Husky と lint-staged の設定手順

2024年3月26日時点の Husky と lint-staged の設定手順についてまとめる。

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

Husky と lint-staged を開発環境で使用するため、次のコマンドを実行し、devDependencies に各パッケージをインストールします。

npm install -D husky lint-staged

🔖 パッケージ情報

2024年3月26日時点での各パッケージの最新バージョンを使用します。

バージョンの詳細については以下の表を参照してください。

パッケージ名バージョン
Husky9.0.11
lint-staged15.2.2

🛠 Husky の初期化

Husky を初期化するために次のコマンドを実行をします。

npx husky init

🖌 pre-commit の追加

pre-commit で lint-staged が実行されるようにコマンドを .husky/pre-commit に追加します。

echo "npx lint-staged" > .husky/pre-commit

🖌 package.json を修正

最後に package.json に lint-staged の設定を追加します。

{
  "scripts": {
    "prepare": "husky"
  },
  "lint-staged": {
    "*": "npm run xxxx"
  },
}

✅ まとめ

以上で Husky と lint-staged の設定を行うことができます。

Husky のバージョンが v9 に上がったタイミングで設定周りが変更になっているため、v8 より以前のバージョンとは設定手順が異なることに注意してください。