はじめに
チームで開発を行う上では、統一されたコードディングルールが必要になります。その時に役立つのがhuskyとlint-stagedです。
これらを使用すると、コミットする前にリントやフォーマッターを走らせることができます。リントを通過しないコードが含まれていると、エラーになりコミット自体することができなくなります。そうすることで、リポジトリにエラーが入らないようになるので、コードスタイルを強制することができるのです。
私がチーム開発を行った際は、メンバーが導入していたので、自分でも導入できるようになりたいと思い、備忘録的に手順をを書き残すことにしました。新しいプロジェクトにhuskyとlint-stagedを導入するときは、この記事を見返せば大丈夫なようになっていると思います。
基本、huskyとlint-stagedのドキュメントのとおり、導入を進めていきます。
gitとnpmが初期化されていることが前提です。
実行環境
・ホストOS: Windows 11
・仮想化技術: Windows Subsystem for Linux 2 (WSL2)
・ゲストOS: Ubuntu 22.04.3 LTS
・Node.js: 18.17.0
・npm: 9.6.7
・husky: 8.0.0
・lint-staged: 14.0.1
2023年8月27日時点での情報です。
huskyとは
コミットまたはプッシュ時に、コミットメッセージのリント、テストの実行、コードのリントなどを行うことができるようになります。また、huskyはすべてのGitフックをサポートしています。
lint-stagedとは
プロジェクト全体にリントやフォーマッターを実行すると時間がかかってしまいます。lint-stagedを使用すると、Gitでステージング(変更)されたファイルに対してのみ、リントやフォーマッターを実行することができます。
huskyとlint-stagedの導入
husky-initコマンドで初期化
npx husky-init && npm install
huskyを初期化すると、以下の内容が自動で設定されます。
package.json
にprepareスクリプトが追加される。.husky
ディレクトリが作成され、その.husky
ディレクトリ内にpre-commitフックが作成される。
※デフォルトではコミット時にnpm test
が実行されるようになっていますが、後ほどコマンドで上書きします。- Gitフックのパスが構成される。
※本来、.git/hooks
内にpre-commitファイルを置くことで、コミット前にpre-commitファイルの内容が実行されますが、を確認してみても、pre-commitファイルはありません。Gitフックのスクリプトパスが、
.git/hooks
から.husky
ディレクトリに変更されます。
huskyがどのように動作しているかは、こちらの記事が参考になるので参照してください。
lint-stagedの設定
lint-stagedのインストール
以下のコマンドでlint-stagedをインストールします。
npm install --save-dev lint-staged
lint-stagedをpre-commitファイルに設定
次に、.husky/pre-commit
にlint-stagedが実行されるように設定します。
npx husky set .husky/pre-commit "npx lint-staged"
上記コマンドの実行後、.husky/pre-commit
は以下のようになります。
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
package.jsonにlint-stagedの設定を書き込む
package.json
に、lint-stagedの設定を書き込むことで実行したいリントやフォーマッターのコマンドを設定します。
どのファイルにリントを走らせるか、どのファイルを無視するかなど、細かい指定方法については、lint-stagedのドキュメントを参照します。
{
"lint-staged": {
"*.{js,ts,vue}": [
"eslint src/ --fix --ignore-path .gitignore",
"prettier --write src/ --ignore-path .gitignore"
]
}
}
おわりに
以上で、huskyとlint-stageを使って、コミット時にリントとフォーマッターを走らせることができるようになりました。
コメント