huskyとlint-stagedを導入する方法

プログラミング

はじめに

チームで開発を行う上では、統一されたコードディングルールが必要になります。その時に役立つのが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フックをサポートしています。

404 | Husky
NotFound

lint-stagedとは

プロジェクト全体にリントやフォーマッターを実行すると時間がかかってしまいます。lint-stagedを使用すると、Gitでステージング(変更)されたファイルに対してのみ、リントやフォーマッターを実行することができます。

GitHub - lint-staged/lint-staged: 🚫💩 — Run linters on git staged files
🚫💩—Runlintersongitstagedfiles.Contributetolint-staged/lint-stageddevelopmentbycreatinganaccountonGitHub.

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ファイルの内容が実行されますが、.git/hooksを確認してみても、pre-commitファイルはありません。Gitフックのスクリプトパスが、.git/hooksから.huskyディレクトリに変更されます。

huskyがどのように動作しているかは、こちらの記事が参考になるので参照してください。

husky と lint-staged 完全に理解した - Qiita
モチベーションGitリポジトリにコミットするソースコードの質を保つためにhuskyとlint-stagedを組み合わせて、gitのpre-commitイベントでリンターやフォーマッターを…

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を使って、コミット時にリントとフォーマッターを走らせることができるようになりました。

コメント

タイトルとURLをコピーしました