🐶
Next.jsプロジェクトにHuskyとlint-stagedを導入する
この記事では、コードをコミットする前に自動的にコードのリントやフォーマット整形を行うためのHuskyとlint-stagedの導入方法について説明します。
git addでステージングされたファイルが対象なので、プロジェクトの途中でも導入が簡単です。
今回はNext.jsプロジェクトへの追加します。
取り扱う内容
以下のツールのセットアップについて説明します
- Husky: v9
- lint-staged: v15
- Prettier: v3
- ESLint: v8
- cspell: v8
Huskyの設定
まず、Huskyをインストールします
shell
npm install --save-dev husky
v9からは1行でHuskyが追加できるようになったので、以下のコマンドを実行します
shell
npx husky init
.huskyフォルダが追加され、コミット時に.husky/pre-commitに記述されているフックが実行されるようになります。
追加された変更
package.json
"scripts": {
・・・
"prepare": "husky" //追加
},
.husky/pre-commit
npm test
Lint-stagedの設定
次に、lint-stagedをインストールします
shell
npm install --save-dev lint-staged
lint-stagedをフックに追加。
shell
echo "npx lint-staged" > .husky/pre-commit
これでgit addでステージングされた特定のスクリプトが実行されるようになります。
lint-stagedの動作の流れ:
- git commit
- npx lint-staged
- スクリプト実行
追加された変更
package.json
"scripts": {
・・・
"prepare": "husky" //追加
},
.husky/pre-commit
npm test
lint-stagedで動作させたいスクリプトはpackage.jsonか.lintstagedrcというファイルに記述します。以下はprettier、eslint、cspellを設定する例です
.lintstagedrc
{
"*.{js,jsx,ts,tsx}": [
"eslint -c .eslintrc.js --fix",
"prettier --write '**/*.{js,jsx,ts,tsx,json}'",
"cspell"
]
}
package.jsonで設定する場合
package.json
"scripts": {
・・・
},
"dependencies": {
・・・
},
"devDependencies": {
・・・
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint -c .eslintrc.js --fix",
"prettier --write '**/*.{js,jsx,ts,tsx,json}'",
"cspell"
]
},
必要なパッケージのインストール
まとめてインストールしたい場合は以下のコマンドを実行してください
まとめてインストール
shell
npm install -D eslint eslint-config-next eslint-config-prettier eslint-plugin-prettier eslint-plugin-react prettier cspell
TypeScriptを使用している場合は以下も
shell
npm i --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
eslintの設定
shell
npm install -D eslint eslint-config-next eslint-config-prettier eslint-plugin-prettier eslint-plugin-react
TSを使用している方はこちらも
shell
npm i --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier
prettierの設定
shell
npm install --save-dev prettier
cspellの設定
shell
npm install --save-dev cspell
git commit
最後にコミットして、git addでステージングされたファイルが正しく動いてれば完了です🐕
成功時
shell
git commit -m test
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[main 988c1b9] test
1 file changed, 1 insertion(+), 1 deletion(-)
失敗時
shell
git commit -m test
✔ Preparing lint-staged...
⚠ Running tasks for staged files...
❯ .lintstagedrc — 1 file
❯ *.{js,jsx,ts,tsx} — 1 file
✔ eslint -c .eslintrc.js --fix
✔ prettier --write '**/*.{js,jsx,ts,tsx,json}'
✖ cspell [FAILED]
↓ Skipped because of errors from tasks.
✔ Reverting to original state because of errors...
✔ Cleaning up temporary files...
✖ cspell:
1/1 ./src/app/layout.tsx 142.06ms X
-------------------------------------------
Issues found:
./src/app/layout.tsx:5:34 - Unknown word (vietnames)
CSpell: Files checked: 1, Issues found: 1 in 1 file.
./src/app/layout.tsx:5:34 - Unknown word (vietnames)
husky - pre-commit script failed (code 1)
github上げてます🙋♂️
Discussion