HuskyとBiomeでコミット前に自動lintを実行する設定方法

はじめに

コードレビューで毎回「lintエラーが残っています」と指摘される、CIで lint が落ちてからプッシュし直す、そんな経験はないでしょうか。

Huskyを使ってGitのコミット前フックにBiomeのlintを仕込んでおけば、エラーのあるコードがそもそもコミットできなくなります。この記事ではHuskyとlint-stagedを組み合わせて、変更したファイルだけにBiomeを走らせる設定方法を解説します。

Biomeのセットアップがまだの場合は先に済ませてください。

npm install --save-dev --save-exact @biomejs/biome
npx biome init

npm install --save-dev husky lint-staged

Husky はGitフックをnpmスクリプトとして管理するツールです。lint-staged はステージングされたファイル（git add 済みのファイル）だけにコマンドを実行するツールです。全ファイルにlintをかけると遅くなるので、この2つをセットで使います。

npx husky init

このコマンドで .husky/ ディレクトリと pre-commit フックファイルが作成され、package.json の prepare スクリプトに husky が追加されます。

{
  "scripts": {
    "prepare": "husky"
  }
}

package.json に lint-staged の設定を追加します。

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "biome check --write"
    ]
  }
}

biome check --write はlintチェックとフォーマットを同時に行い、自動修正できるものは修正します。自動修正せずチェックだけしたい場合は --write を外してください。

.husky/pre-commit ファイルを以下の内容に書き換えます。

npx lint-staged

初期化時に作られたファイルに npm test などが書かれている場合は削除して上書きしてください。

intentionalにlintエラーのあるファイルを作ってコミットしてみます。

// src/test.ts
const x = 1;
console.log(x);

git add src/test.ts
git commit -m "test"

Biomeがエラーを検出するとコミットが中断されます。

✖ Some files have errors. Please fix them and try again.
src/test.ts:2:1 lint/suspicious/noConsole ━━━━━━━━━━━━━
✖ Don't use console.

エラーを修正するかインライン無効化してから再度コミットすると通るようになります。

biome check --write で自動修正が走った場合、修正後のファイルが自動的にステージングされます。ただし修正内容はコミット前に確認する習慣をつけておくと安心です。

git diff --staged  # コミット前に差分確認

npm install 時に自動でHuskyが有効になるよう prepare スクリプトが設定されていれば、リポジトリをクローンしたメンバーが npm install するだけでフックが有効になります。

npm install  # これだけでHuskyが有効になる

CI環境など Git フックが不要な環境では HUSKY=0 を設定することで無効化できます。

HUSKY=0 npm install