【Everyday Next.js】3. husky / lint-staged

lint 自動実行の必要性

前回も説明した通り、nextjs で build するときは自動で lint も走るようである。

例えば以下のコード。

'use client';

import React, {useState} from 'react';

export default function Home() {
  const isTrue = Math.random() > 0.5;

  if (isTrue) {
    const [count, setCount] = useState(0);
  }

  return <div>Hello, world!</div>;
}

build 自体はできるはずなのだが、React フックを条件付きで呼び出すと ESLint エラーを起こす。

そのため、build しようとすると以下のように lint エラーで build も失敗する。

ということは、少なくとも push をするときに eslint エラーが起きてしまうようなコードだとまずい。

では、「push や commit をする前に毎回npm run lintを実行するようにしましょうね！」とすれば良いかというと、やはり人間なので忘れてしまうこともあるし、面倒である。

したがって、push や commit をする前に「自動で」npm run lintが実行されるようにしたいわけである。

husky / lint-staged

ここで、husky と lint-staged の登場。

husky と lint-staged を使えば、「コミット前にステージされているファイルに lint を自動で走らせる」ことができる。

nextjs.org

github.com

それぞれの公式ドキュメント通りに設定を進める。

パッケージインストール

npm i -D husky lint-staged

lint-staged 設定ファイル

公式ドキュメントに載っている通り、Next.js で lint-staged を動かしたい場合は以下の lint-staged 設定ファイルが必要。

// .lintstagedrc.js
const path = require('path')

const buildEslintCommand = (filenames) =>
  `next lint --fix --file ${filenames.map((f) => path.relative(process.cwd(), f)).join(' --file ')}`

module.exports = {
  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
}

husky install

npm pkg set scripts.prepare="husky install"
npm run prepare

husky をセットアップするために、husky installの実行が必要である。

複数人で開発したりしないのであれば、単純husky installを実行するだけでも良いのだが、上記は npm scripts に"prepare": "husky install"を追加した上で、npm run prepareを実行してhusky installを走らせている。

npm run prepareは少々特殊なスクリプトで、npm installが実行されたときなどに自動実行される。

つまり、あなた以外がリポジトリを clone して開発するとなったときに、わざわざhusky installを実行してもらわなくても、勝手に実行してくれるのだ。

hook を追加

npx husky add .husky/pre-commit "npx lint-staged"

「コミット前にnpx lint-stagedを husky で自動実行するための設定を追加しなさい」というコマンド。

動作確認

本当に動作するか、わざと eslint エラーが起きるコードをコミットしようとしてみる。コミットは VSCode の GUI で行ってみた。

狙い通り、コミットに失敗した。（なぜか文字化けしているが…）

おわりに

今回は、コミット前 lint 自動実行のために、husky と lint-staged を導入した。

次回は文字化け解消？