Zenn
🐶

Next.jsプロジェクトにHuskyとlint-stagedを導入する

2024/06/06に公開
ESLint
Prettier
husky
lint-staged
cspell
tech

この記事では、コードをコミットする前に自動的にコードのリントやフォーマット整形を行うための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

https://typicode.github.io/husky/get-started.html

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の動作の流れ：

  1. git commit
  2. npx lint-staged
  3. スクリプト実行
追加された変更
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"
    ]
  },

https://github.com/lint-staged/lint-staged

必要なパッケージのインストール

まとめてインストールしたい場合は以下のコマンドを実行してください

まとめてインストール
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上げてます🙋‍♂️
https://github.com/nikawa2161/husky-lintstaged

Discussion