Pre-flight Format Javascript Files

Automatically formats JavaScript and TypeScript files with Prettier after every edit operation, ensuring consistent code style without manual intervention.

When to Use This Hook

Attach this hook when you need to:

• Enforce consistent formatting across JS/TS/JSX/TSX files edited during Claude Code sessions
• Eliminate formatting debates by applying Prettier rules automatically after each edit
• Keep diffs clean by ensuring all edited files match the project's Prettier configuration

Consider alternatives when:

• Your project uses ESLint with formatting rules and you prefer eslint --fix instead
• You want formatting applied only at commit time rather than after every edit

Quick Start

Configuration

Copy
name: pre-flight-format-javascript-files
type: hook
trigger: PostToolUse
category: post-tool

Example Trigger

Copy
# Hook triggers after Claude edits a JavaScript file
claude> Edit src/utils/helpers.ts
# Prettier runs automatically on the edited file

Example Output

Formatting src/utils/helpers.ts with Prettier...
src/utils/helpers.ts 142ms
File formatted successfully.

Core Concepts

Format Scope Overview

Aspect	Details
File Extensions	.js, .ts, .jsx, .tsx
Matcher	Triggers on Edit tool operations
Formatter	npx prettier --write (no global install needed)
Error Handling	Suppressed with 2>/dev/null to avoid blocking on missing Prettier
Config Resolution	Uses nearest .prettierrc or prettier.config.js

Formatting Workflow

Edit Tool Completes
       |
  Check File Extension
   /              \
.js/.ts/.jsx/.tsx   Other
       |              |
  Run Prettier       Skip
       |
  ┌────┴────┐
  |         |
Success   Fail
  |         |
 Done    Suppress
         (silent)

Configuration

Parameter	Type	Default	Description
matcher	string	"Edit"	Tool operation that triggers formatting
extensions	string	".js,.ts,.jsx,.tsx"	File extensions to format
formatter_cmd	string	"npx prettier --write"	Command used to format files
suppress_errors	boolean	true	Silently ignore formatter failures
config_path	string	auto-detected	Explicit path to Prettier config file

Best Practices

1. Include a Local Prettier Config - Always include a .prettierrc in your project root so the hook applies your team's specific rules rather than Prettier defaults. This prevents formatting thrash between developers.

2. Add Write Matcher Too - The default hook only triggers on Edit. Add a second matcher for Write operations to catch newly created files that also need formatting.

3. Pin Prettier Version - Use a package.json devDependency for Prettier rather than relying on npx fetching the latest version. Version drift between developers causes unnecessary formatting diffs.

4. Respect .prettierignore - Ensure your .prettierignore file is in the project root. The hook passes file paths directly, so Prettier will check ignore rules automatically for generated or vendored files.

5. Combine with Linting - Run Prettier first for formatting, then a separate lint hook for logic issues. This order prevents ESLint from reporting formatting violations that Prettier would have fixed.

Common Issues

1. Prettier Not Found - If Prettier is not installed locally or globally, npx prettier downloads it on first run, causing a delay. Pre-install it as a dev dependency with npm install -D prettier to avoid this.

2. Conflicting ESLint Rules - If ESLint has formatting rules that conflict with Prettier, edits will toggle between two styles. Install eslint-config-prettier to disable conflicting ESLint rules.

3. Large File Formatting Timeout - Prettier can be slow on very large files (5000+ lines). If you experience timeouts, consider splitting large files or adding them to .prettierignore.