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.
npx claude-code-templates@latest --hook post-tool/format-javascript-filesWhat 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.tsxfiles - maintain repository code style without manual formatting commands
Example prompts for the agent
- Edit
Button.tsxto add adisabledprop - 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-files2Manually: put the files in place
.claude/settings.jsonThe 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