Skip to main content
hook

format-javascript-files — Claude Code hook: setup and usage

Formats .js, .ts, .jsx, and .tsx files with Prettier whenever Claude Code edits them. Keeps styling consistent without manual formatting passes.

Install into Claude Code · claude-code-templates All methods and platforms ↓
npx claude-code-templates@latest --hook post-tool/format-javascript-files
Open on GitHub

What format-javascript-files does

This hook listens for the PostToolUse event matching the Edit tool. It checks $CLAUDE_TOOL_FILE_PATH against a regular expression. The check filters for .js, .ts, .jsx, and .tsx files.

Formatting runs through npx prettier --write directly on the modified path. Prettier does not need to be installed globally because npx executes it. Output streams pipe to 2>/dev/null, and the command appends || true.

Because errors are suppressed, the hook fails silently without warning when Prettier is unavailable or encounters syntax errors.

What it helps with

  • format code with Prettier immediately after Claude edits files
  • normalize syntax across .js, .ts, .jsx, and .tsx files
  • maintain repository code style without manual formatting commands

Example prompts for the agent

  • Edit Button.tsx to add a disabled prop
  • Refactor the helper functions inside utils/helpers.js

How to install format-javascript-files

1claude-code-templates

npx claude-code-templates@latest --hook post-tool/format-javascript-files

2Manually: put the files in place

.claude/settings.json

The hooks block: event (PreToolUse, PostToolUse, Stop…) → command. Personal ones go to ~/.claude/settings.json

Step by step, with commands for each platform: Claude Code hooks: what they are, where to configure them, how to block a risky command

Questions about format-javascript-files

How do I install format-javascript-files in Claude Code?

Run npx claude-code-templates@latest --hook post-tool/format-javascript-files. The hook configuration is saved in .claude/settings.json.

What does format-javascript-files do?

The hook intercepts the Edit tool and applies Prettier formatting to modified JavaScript and TypeScript files.

What happens if Prettier is missing?

Execution redirects errors to 2>/dev/null || true. The editing step completes without interruption even when Prettier is not found.

Source text

format-javascript-files.json · MIT
{
  "description": "Automatically format JavaScript/TypeScript files after any Edit operation using prettier. This hook runs 'npx prettier --write' on any .js, .ts, .jsx, or .tsx file that Claude modifies, ensuring consistent code formatting. Uses npx so prettier doesn't need to be globally installed. Includes error suppression so it won't fail if prettier is not available.",
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit",
        "hooks": [
          {
            "type": "command",
            "command": "if [[ \"$CLAUDE_TOOL_FILE_PATH\" =~ \\.(js|ts|jsx|tsx)$ ]]; then npx prettier --write \"$CLAUDE_TOOL_FILE_PATH\" 2>/dev/null || true; fi"
          }
        ]
      }
    ]
  }
}

© davila7 · MIT · davila7/claude-code-templates

Similar hooks

Everything for Frontend and UI →

From the same set804

The whole set →

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor