はじめに

この記事では、Next.js 環境において Husky と lint-staged を利用してコミット前に ESLint と Prettier を実行する手順を記載します。

Husky とは

開発環境は以下の通りです。

まずは Husky と lint-staged のインストールします。

npm install --save-dev husky lint-staged

Husky の初期化コマンドを実行します。

npx husky init

実行後、以下2点が追加されます。

package.json の scripts に "prepare": "husky" が追加されます。

package.json

{
  ...,
  "scripts": {
    ...,
    "prepare": "husky"
  },
  ...
}

prepare は npm install 前に自動で実行されます。

.husky フォルダ内には pre-commit ファイルと _ フォルダが含まれています。pre-commit の中身は以下の通りです。

npm

pre-commit で lint-staged を実行するために中身を書き換えます。

npx 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"
    ]
  }
}

以上で設定完了です。