Hooks / formatting

Prettier after edit

Runs Prettier on any JS/TS/JSON/CSS/Markdown file right after Claude edits it.

What it does

Fires on PostToolUse for Edit and Write. A small script extracts the edited file path from the hook JSON, gates on web-file extensions, and runs prettier --write when Prettier is available. Files Claude did not touch are never formatted.

When it runs

Config

Merge this into .claude/settings.json - or use the generator to combine hooks.

{
  "hooks": {
    "PostToolUse": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "${CLAUDE_PROJECT_DIR}/.claude/hooks/prettier-after-edit.sh",
            "timeout": 30
          }
        ],
        "matcher": "Edit|Write"
      }
    ]
  }
}

Script

Save as .claude/hooks/prettier-after-edit.sh and chmod +x it.

#!/bin/bash
# prettier-after-edit: run after Claude edits a file. Reads hook JSON from stdin.
set -u
file=$(jq -r '.tool_input.file_path // empty')
[ -z "$file" ] && exit 0
[ -f "$file" ] || exit 0
case "$file" in
*.js|*.jsx|*.ts|*.tsx|*.json|*.css|*.md) ;;
  *) exit 0 ;;
esac
if ! command -v prettier >/dev/null 2>&1; then
  exit 0  # formatter not installed; stay silent
fi
prettier --write "$file" >/dev/null 2>&1
exit 0

Install

1. Save the script to .claude/hooks/prettier-after-edit.sh and run: chmod +x .claude/hooks/prettier-after-edit.sh
2. Install the formatter (prettier) and make sure it is on your PATH, plus jq.
3. Add the config fragment to .claude/settings.json (or use the generator).

Test it

• Positive: ask Claude to edit a matching file (*.js|*.jsx|*.ts|*.tsx|*.json|*.css|*.md), then check the file was reformatted.
• Negative: ask Claude to edit a non-matching file (e.g. README.txt) - the formatter should not run (check with /doctor or debug logs).

Sources

• Claude Code hooks reference (checked 2026-09-10)
• Claude Code hooks guide (checked 2026-09-10)

Related hooks