honda

こんにちは、フロントエンドエンジニアの本田です。

Git のコミットをする際、ついつい lint のコード整形を忘れたままコミットしてしまうことはないでしょうか？
今回は Next.js の環境に husky と lint-staged を導入して、コミット時に自動で lint が動作するようにしてみようと思います！

そもそも husky と lint-staged とは？

husky は Git のコミットやプッシュなどを実行すると、設定した処理を その処理の前に実行してくれる仕組み、lint-staged はステージングしたファイルに対して、特定のコマンドを実行してくれるパッケージです。

この 2 つを併用することで、コミットやプッシュを実行すると、ステージングしたファイルに対して設定した処理を行ってくれるようになります。

husky と lint-staged をインストールする

何はともあれ、まずは husky と lint-staged をインストールしましょう。
下記のコマンドを実行して必要なパッケージ類をインストールします。

# npm の場合
npm install --save-dev husky lint-staged

# yarn の場合
yarn add --dev husky lint-staged

Git hooks を有効化するために、下記のコマンドを実行してください。実行すると、.husky ディレクトリが作成されます。

# npm の場合
npx husky install

# yarn の場合
yarn husky install

次に、package.jsonのprepareにhusky installを記述します。
これにより、GitHub リポジトリから clone して各パッケージをインストールするタイミングで Git hooks が有効になります。

// package.json
"scripts": {
    "prepare": "husky install"
  },

コミット前の hooks を作成する

下記を実行し、.husky/pre-commitファイルを作成します。

# npm の場合
npx husky add .husky/pre-commit "npm lint-staged"

# yarn の場合
yarn husky add .husky/pre-commit "yarn lint-staged"

.husky/pre-commitファイルには、コミット前に実行したいコマンドを設定していきます。
今回は lint-staged を実行したいので、下記のように記述します。

#!/bin/sh
source ~/.zshrc

. "$(dirname "$0")/_/husky.sh"

# コミット前に実行するコマンド
# npm の場合
npm lint-stage

# yarn の場合
yarn lint-stage

lint-staged の設定

Next.js では、create-next-app実行時に Next.js 向けの ESLint が設定された状態でプロジェクトが作成されます。
Next.js の ESLint の設定ついては Zenn のこちらの記事に詳しく書かれていたので、気になる方はご覧ください。

またその関係で、よく lint-staged の記事で紹介されているpackage.jsonに lint-staged のスクリプトと設定を追加する方法ではうまく実行されません。

Next.jsの公式で Next.js と 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 が動作するか確認してみます。途中の lint-staged は、最初のコミットコマンドを実行すると自動で実行されました。
実行すると下記のように表示され、動作していることが確認できました！

$ git commit -m test
yarn run v1.22.18
$ lint-staged
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
✨  Done in 2.72s.
[feature/branchName ce3d3e5] test
 1 file changed, 1 insertion(+)