はじめに
この記事では、Next.js 環境において Husky と lint-staged を利用してコミット前に ESLint と Prettier を実行する手順を記載します。
Husky とは
- Git hooks を簡単に管理するためのツール
- コード品質を担保するために利用される
- Git hooks とは、Git ワークフロー（コミット前後、プッシュ前など）で実行されるスクリプト
lint-staged とは
- Git でステージ上の（変更された）ファイルに対してスクリプトを実行するためのツール
開発環境
開発環境は以下の通りです。
- Windows 11
- Next.js 14.2.4
- React 18.3.1
- TypeScript 5.5.2
- Husky 9.1.5
- lint-staged 15.2.9
- ESLint 8.57.0
- Prettier 3.3.3
Husky と lint-staged のインストール
まずは Husky と lint-staged のインストールします。
npm install --save-dev husky lint-staged
Husky の初期化
Husky の初期化コマンドを実行します。
npx husky init
実行後、以下2点が追加されます。
-
"prepare": "husky"スクリプトの追加 -
.huskyフォルダの追加
"prepare": "husky" スクリプトの追加
package.json の scripts に "prepare": "husky" が追加されます。
package.json
{
...,
"scripts": {
...,
"prepare": "husky"
},
...
}
prepare は npm install 前に自動で実行されます。
.husky フォルダの追加
.husky フォルダ内には pre-commit ファイルと _ フォルダが含まれています。pre-commit の中身は以下の通りです。
npm
pre-commit で lint-staged を実行するために中身を書き換えます。
npx lint-staged
lint-staged の設定
package.json に "lint-staged" を追加して、ESLint と Prettier を実行するスクリプトを記載します。
package.json
{
...,
"lint-staged": {
"src/**/*.{ts,tsx,json,css,scss}": [
"prettier --write",
"next lint --fix --dir src"
]
}
}
以上で設定完了です。