setup-pre-commit

Pre-Commit フックのセットアップ

セットアップ内容

• Husky の pre-commit フック
• すべてのステージ済みファイルに対して Prettier を実行する lint-staged
• Prettier の設定（存在しない場合）
• pre-commit フック内の typecheck スクリプトと test スクリプト

手順

1. パッケージマネージャーを特定する

package-lock.json（npm）、pnpm-lock.yaml（pnpm）、yarn.lock（yarn）、bun.lockb（bun）があるか確認します。存在するものを使用してください。判断できない場合は npm を使用します。

2. 依存関係をインストールする

開発用の依存関係としてインストールします。

husky lint-staged prettier

3. Husky を初期化する

npx husky init

これにより .husky/ ディレクトリが作成され、package.json に prepare: "husky" が追加されます。

4. .husky/pre-commit を作成する

このファイルを作成します（Husky v9 以降ではシバンは不要です）。

npx lint-staged
npm run typecheck
npm run test

調整：検出したパッケージマネージャーに合わせて npm を置き換えます。リポジトリの package.json に typecheck または test スクリプトがない場合は、該当する行を省略してユーザーに伝えてください。

5. .lintstagedrc を作成する

{
  "*": "prettier --ignore-unknown --write"
}

6. .prettierrc を作成する（存在しない場合）

Prettier の設定が存在しない場合にのみ作成します。次のデフォルト設定を使用します。

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": false,
  "trailingComma": "es5",
  "semi": true,
  "arrowParens": "always"
}

7. 確認する

• .husky/pre-commit が存在し、実行可能になっている
• .lintstagedrc が存在する
• package.json の prepare スクリプトが "husky" になっている
• prettier の設定が存在する
• npx lint-staged を実行して動作を確認する

8. コミットする

変更または作成したすべてのファイルをステージし、次のメッセージでコミットします：Add pre-commit hooks (husky + lint-staged + prettier)

これにより、新しい pre-commit フックが実行され、すべてが動作するかどうかを確認できます。

注意事項

• Husky v9 以降では、フックファイルにシバンは不要です
• prettier --ignore-unknown は、Prettier で解析できないファイル（画像など）をスキップします
• pre-commit では、まず lint-staged（高速で、ステージ済みファイルのみ）を実行し、次に全体の型チェックとテストを実行します