🍋

Commit や PR（プルリクエスト）時に走る Lint / Format ツール設定のまとめ

に公開
lint
CI
husky
pre-commit
formatter
tech

プロジェクトで Lint / Format ツールを使うとき、「保存時に自動で整形する」「コミット前にチェックする」「CI で検証する」など、実行タイミングごとに設定ファイルやしくみがわかれている。

この記事では、基本的な位置づけと実行フローを整理しました。

保存時の実行をコントロールする

  • プロジェクトのルート直下に .json / .js などの設定ファイルを置く
    例: eslint.config.js, prettier.config.json, toolname.json など
  • .vscode/settings.json を使って、保存時フォーマットなどの実行をコントロールできる

CI

  • .github/workflows に .ymlなどの設定ファイルを置く
    例: .github/workflows/toolname.yml
  • PR（プルリクエスト）を作成・更新したときに自動チェックが走る
  • 設定によっては、PR に限らず push のたびにチェックを自動実行させることもできる
  • コード修正はされず、エラー検出だけ
  • 実行フローは以下の通り:
GitHub (CI):
push / PR
→ GitHub Actions (.github/workflows/toolname.yml)
→ pnpm <linter/formatter> check .
(修正はせず、失敗なら赤バツが出る)

pre-commit hook と Husky

  • package.json に lint-staged の設定を書く
  • コミット時に自動で実行させることができる
  • 実行フローは以下の通り:
git commit
→ Husky (pre-commit hook)
→ lint-staged
→ linter / formatter (対象ファイルを自動整形)

pre-commit hook とは

  • lint-staged は「コミットされるファイルだけ」を対象に自動整形を行う
"lint-staged": {
  "*.{ts,tsx,js,jsx,json}": "biome check --write"
}

Husky とは

  • Git の pre-commit hook などを簡単に管理できるツール
  • pre-commit hook に lint-staged を呼び出す設定を追加できる
{
  "lint-staged": {
    "*.{ts,tsx,js,jsx,json}": "biome check --write"
  },
  "scripts": {
    "postinstall": "husky install"
  },
  "devDependencies": {
    "husky": "^8.0.0",
    "lint-staged": "^15.0.0"
  }
}

Discussion