コードを書いていると、**フォーマットや 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)
コードを書いていると、フォーマットや 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 の PostToolUse hooks を設定して、ファイル編集後に自動的に Prettier と ESLint を実行する仕組みを実装しました。
これにより、コードの自動フォーマットが完全に自動化され、手動作業が不要になります。
つまづいた点
正直なところ、導入当初はいくつか課題がありました。
まず、hooks スクリプトに実行権限を与えるのを忘れていて、最初はエラーが出て困惑しました。
chmod +x .claude/hooks/format-and-lint.sh を実行する必要があったんですね。
また、スクリプト内で node_modules のパスを正しく指定するのにも少し手間取りました。
プロジェクトルートからの相対パスを意識しないと、Prettier や ESLint が見つからないエラーが発生するんです。
自動フォーマット設定では、このような環境変数の設定にも注意が必要です。
詳細
Claude Code の hooks 機能を使用することで、Write や Edit ツール使用時に以下の処理が自動実行されます。
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: 処理完了
具体的には以下の処理が行われます。
-
TypeScript/JavaScript ファイルの場合：
eslint --fix で lint エラーを自動修正prettier --write でコード整形
-
JSON/Markdown/YAML ファイルの場合：
設定方法
Step 1: スクリプト作成（.claude/hooks/format-and-lint.sh）
ファイルパスを抽出し、フォーマット対象を判定するバッシュスクリプト。
node_modules、.next等の対象外ファイルは除外します。
Step 2: hooks 設定（.claude/settings.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 の自動フォーマットを実現できました。
導入時のつまづきポイントはありましたが、一度設定してしまえば、その後の開発体験は劇的に向上します。
特に手動フォーマットのストレスから解放される点は、実際に使ってみると本当に大きなメリットです。
自動フォーマットの導入を検討している方は、ぜひ試してみてください。
参考リンク
