huskyとlint-stagedでコミット時にlintチェックをする方法

共同開発において、あらかじめ定めたコーディングルールに沿って実装することは、統一されたコードを保つ上で重要です。

今回は、静的解析を強制しコードをきれいに保つために、huskyを使用してESLintなどのLinterやPrettierなどのフォーマッタがコミット時に自動で実行させる方法を紹介します。

インストール

必要なライブラリをインストールします。

huskyはGit hooksをトリガーに、タスクの実行をプログラムできるnpmライブラリです。

用途としては、例えばソースをコミットする前に静的解析やフォーマッタのタスクを実行させたり、リモートにプッシュする前にテストを実行させたりすることがよくあります。

以下のコマンドからインストールできます。

npx husky-init

npm install

pnpm dlx husky-init

pnpm install

Gitでステージしたファイルに対して特定のコマンドを実行してくれるライブラリです。

以下のコマンドからインストールすることができます。

 npm install --save-dev lint-staged

 pnpm install --save-dev lint-staged

コミット前にlint-stagedを実行するよう.husky/pre-commitに以下を記述します。

 npx husky set .husky/pre-commit "npx lint-staged"

package.jsonにlint-stagedで実行するコマンドを定義します。

この時、「実行対象のファイル」と「実行するコマンド」の組み合わせで定義します。

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint --fix"
  }
}

上の例では、拡張子がjs, jsx, ts, tsxのいずれかのファイルに対し、eslint --fixコマンドを実行するように設定しています。

上記の手順を適切に実施すれば、問題なくコミット時にESLintなどの静的解析やPrettierなどのフォーマッタを実行できます。

ただ、設定時に以下のエラーが出ることがありますので、その対処方法を残しておきます。

このエラーが出たときは、fsmonitor の設定値をtrueにすることで解決できます。

以下のコマンドを実行します。

 git config --global core.fsmonitor true

core.fsmonitorがtrueに設定されている場合、git statusなどのコマンドがデーモンに変更を要求し、必要に応じて自動的に起動するようになります。
それにより、gitコマンドの動作を高速化することができるようです。

huskyの設定が.git/hooks/filesと競合しているため発生するエラーです。

.git/hooksフォルダを削除することで解決することができます。

これは、lint-stagedでPrettierを実行するように指定した場合に発生しうるエラーです。

.husky/pre-commitにもフォーマッティングを実行しようとして発生します。

例えば、以下のようにPrettierの実行コードを定義していると発生します。

prettier --write

解決のためには、Prettierの実行コードを以下のように書き換えます。

prettier --ignore-unknown --write