Auto-Format on Save

Post-ToolBeginnerHook Type: post-tool-use

Auto-Format on Save triggers after every Write or Edit tool invocation and runs Prettier on the affected file. This ensures all code Claude produces matches your project's formatting rules without requiring Claude to remember to format. It respects your .prettierrc and .prettierignore configurations, handles TypeScript, JavaScript, JSON, CSS, Markdown, and other supported file types. The hook runs silently on success and only reports when formatting changes are applied.

prettierformattingcode-styleautomation

Hook Code

#!/bin/bash
# Auto-Format on Save Hook
# Runs Prettier after file writes/edits

# Only trigger on Write or Edit
if [[ "$TOOL_NAME" != "Edit" ]] && [[ "$TOOL_NAME" != "Write" ]]; then
  exit 0
fi

FILE_PATH=$(echo "$TOOL_INPUT" | jq -r '.file_path // .path // empty')

if [ -z "$FILE_PATH" ] || [ ! -f "$FILE_PATH" ]; then
  exit 0
fi

# Check if file type is supported by Prettier
if ! echo "$FILE_PATH" | grep -qE '\.(ts|tsx|js|jsx|json|css|scss|md|yaml|yml|html|vue|svelte)$'; then
  exit 0
fi

# Check if prettier is available
if ! command -v npx &>/dev/null; then
  exit 0
fi

# Run Prettier with project config
BEFORE_HASH=$(md5sum "$FILE_PATH" 2>/dev/null | cut -d' ' -f1)
npx prettier --write "$FILE_PATH" 2>/dev/null
AFTER_HASH=$(md5sum "$FILE_PATH" 2>/dev/null | cut -d' ' -f1)

if [ "$BEFORE_HASH" != "$AFTER_HASH" ]; then
  echo "Formatted: $FILE_PATH"
fi

exit 0

Add this hook to your Claude Code settings or .claude/settings.json to activate.

Terminal Preview

Auto-Format on Save

About Auto-Format on Save

Claude Code hooks let you run custom shell commands automatically in response to specific events during Claude's operation. Auto-Format on Save is a Post-Tool hook at the Beginner level that automates tasks at key moments in your development workflow, reducing manual steps and enforcing consistency across your team.

Related Hooks

Post-Edit Test Runner

Automatically run relevant tests after Claude edits source files to catch regressions immediately.

TypeScript Type Checker

Run TypeScript type checking after file edits to catch type errors before they accumulate.

Auto Changelog Appender

Automatically extract commit messages and append structured entries to CHANGELOG.md after each commit.