Claude Code で自動フォーマット：PostToolUse hooks 設定方法

コードを書いていると、**フォーマットや Lint エラーの修正**って面倒ですよね。 特に **Prettier** や **ESLint** の自動フォーマットを忘れて、コミットしてしまう経験はありませんか？ 私自身、開発に集中している時こそ、こうした瑣末なタスクを自動化したいと常々感じていました。 Claude Code を使っていると、Write や Edit ツールでファイルを編集する機会が多いです。 その度に手動で `prettier --write` や `eslint --fix` を実行するのは、正直なところかなりストレスが溜まります。 そこで、Claude Code の PostToolUse hooks 機能を使って、ファイル編集後に自動的にフォーマットと Lint を実行する仕組みを導入してみました。 この記事では、**自動フォーマット**の設定方法から、つまづきポイントまで詳しく解説します。 ## こんな人におすすめ - Claude Code を使って開発効率を上げたい方 - コードの**自動フォーマット**に興味がある方 - Prettier や ESLint の手動実行にストレスを感じている方 - husky + lint-staged を既に導入している方 - 「フォーマット忘れた！」という経験がある方 <!-- 内部リンク候補: Claude Code の環境構築記事、husky + lint-staged 設定記事 --> ## 目次 - [概要](#概要) - [つまづいた点](#つまづいた点) - [詳細](#詳細) - [設定方法](#設定方法) - [利点](#利点) - [テスト結果](#テスト結果) - [まとめ](#まとめ) - [参考リンク](#参考リンク) ## 概要 Claude Code の PostToolUse hooks を設定して、ファイル編集後に自動的に Prettier と ESLint を実行する仕組みを実装しました。 これにより、コードの**自動フォーマット**が完全に自動化され、手動作業が不要になります。 ## つまづいた点 正直なところ、導入当初はいくつか課題がありました。 まず、hooks スクリプトに実行権限を与えるのを忘れていて、最初はエラーが出て困惑しました。 `chmod +x .claude/hooks/format-and-lint.sh` を実行する必要があったんですね。 また、スクリプト内で `node_modules` のパスを正しく指定するのにも少し手間取りました。 プロジェクトルートからの相対パスを意識しないと、Prettier や ESLint が見つからないエラーが発生するんです。 **自動フォーマット**設定では、このような環境変数の設定にも注意が必要です。 ## 詳細 Claude Code の hooks 機能を使用することで、Write や Edit ツール使用時に以下の処理が自動実行されます。 ```mermaid sequenceDiagram participant CC as Claude Code participant Hook as PostToolUse Hook participant Script as format-and-lint.sh participant Prettier as Prettier participant ESLint as ESLint CC->>Hook: Edit/Write ツール使用 Hook->>Script: ファイルパスを渡す Script->>Script: ファイル種別を判定 alt TS/JS ファイル Script->>ESLint: eslint --fix Script->>Prettier: prettier --write else JSON/MD/YAML Script->>Prettier: prettier --write end Script-->>Hook: 完了通知 Hook-->>CC: 処理完了 ``` 具体的には以下の処理が行われます。 1. TypeScript/JavaScript ファイルの場合： - `eslint --fix` で lint エラーを自動修正 - `prettier --write` でコード整形 2. JSON/Markdown/YAML ファイルの場合： - `prettier --write` でフォーマット ### 設定方法 **Step 1: スクリプト作成（`.claude/hooks/format-and-lint.sh`）** ファイルパスを抽出し、フォーマット対象を判定するバッシュスクリプト。 node_modules、.next等の対象外ファイルは除外します。 **Step 2: hooks 設定（`.claude/settings.json`）** ```json { "hooks": { "PostToolUse": [ { "matcher": "Edit|Write", "hooks": [ { "type": "command", "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/format-and-lint.sh", "timeout": 30000 } ] } ] } } ``` ### 利点 個人的に最も便利だと感じたのは、やはり「意識しなくて良い」という点です。 - コミット前に自動的にコードが整形される - Lint 違反が残りにくい開発フロー - husky + lint-staged との二段構えで堅牢性向上 - ファイル編集の直後に即座にフォーマットが実行される - **自動フォーマット**により手動作業が完全に不要に 実際に導入してみて、コミット前の都度の手動フォーマットが不要になり、かなり快適です。 ### テスト結果 実際に設定してみたところ、以下の結果が得られました。 - Write ツール使用後に自動実行 ✅ - Edit ツール使用後に自動実行 ✅ - Prettier による**自動フォーマット** ✅ - ESLint による自動修正 ✅ 測定してみたところ、平均フォーマット時間は約 0.5 秒/ファイル でした。 開発体験への影響はほぼなく、むしろ「フォーマットを気にする必要がない」という安心感が得られます。 <!-- 内部リンク候補: パフォーマンス比較記事、開発環境最適化記事 --> ## まとめ Claude Code の PostToolUse hooks を使うことで、Prettier と ESLint の**自動フォーマット**を実現できました。 導入時のつまづきポイントはありましたが、一度設定してしまえば、その後の開発体験は劇的に向上します。 特に手動フォーマットのストレスから解放される点は、実際に使ってみると本当に大きなメリットです。 **自動フォーマット**の導入を検討している方は、ぜひ試してみてください。 ## 参考リンク - [Claude Code Documentation](https://code.claude.com) - [Prettier](https://prettier.io) - [ESLint](https://eslint.org)

sequenceDiagram
    participant CC as Claude Code
    participant Hook as PostToolUse Hook
    participant Script as format-and-lint.sh
    participant Prettier as Prettier
    participant ESLint as ESLint

    CC->>Hook: Edit/Write ツール使用
    Hook->>Script: ファイルパスを渡す
    Script->>Script: ファイル種別を判定
    alt TS/JS ファイル
        Script->>ESLint: eslint --fix
        Script->>Prettier: prettier --write
    else JSON/MD/YAML
        Script->>Prettier: prettier --write
    end
    Script-->>Hook: 完了通知
    Hook-->>CC: 処理完了

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/format-and-lint.sh",
            "timeout": 30000
          }
        ]
      }
    ]
  }
}