setup-pre-commit

プリコミットフックのセットアップ

セットアップ内容

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

手順

1. パッケージマネージャーを検出する

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

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

devDependencies としてインストールします。

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)

新しいプリコミットフックが実行されるため、すべてが正常に動作することを確認する簡単なスモークテストになります。

補足

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