Zenn
🦜

Husky v9 + lint-staged でコミット前に自動整形するまでにハマったこと

に公開
Git
husky
lint-staged
tech

こんにちは。忙しいのを理由に記事書くのサボってました。
今日は、Husky v9 + lint‑staged をプロジェクトに導入してコミット前にコード整形 & Lint が走るようにしたやり方と詰まったところ、解決方法等を紹介したいと思います。
huskyがメジャーバージョンアップで前バージョンの記述が使えなくなったりが結構あるみたいなので、今後導入検討されている方やアップグレード時に詰まった方の参考になれば幸いです！

🚀導入の経緯

今まで自動整形はprettier + VSCode(Cursor)のprettier拡張機能で行っていました。
Cursorの設定でファイル保存時にコード整形するように設定しておりこれで特に不満なくできていました。
また、lintエラーについてはリモートpush時にgithub acitonsでlintチェック走るようにしており、
コードレビュー時にレビュワーからエラーを指摘されるといった無駄な工数を防いでいました。

ただ、これだと下記のデメリットがありました

  • メンバー全員がVSCodeののprettier拡張機能を入れる必要がある
  • lintエラーはpushした後に検知されるので修正のコミットが余分に増える

新しいメンバーが増えた時などに、拡張機能入れてもらう〜とかが面倒 + エラーの修正で余分なコミットやしたくない、、
という点から今回husky v9 + lint-stagedでコミット前にコード整形とlintを走らせるようにしました。

🐶huskyとは？

Gitのフック（hook）を簡単に書けるツール。pre‑commitやpre‑pushなどのタイミングで任意のスクリプトを実行できます。

🎯lint-stagedとは？

コミット対象に入ったファイルだけにLintやフォーマッターをかけられるツールです。huskyとセットで使われることが多いみたいです。

設定で詰まったところ

husky最新バージョンの記述方法

技術ブログを参考にしていたのですがhuskyはv9で記述方法に変更があったりで、紹介されていた内容では古く上手くいかず混乱しました。

huskyがコミット時に発火しない

コミットする前にlint-stagedが発火してほしいのでfrontend/.husky/pre-commitは下記のようにしていました。

frontend/.husky/pre-commit
pnpm lint-staged

また、frontend/package.jsonは下記のようにしていました。

frontend/package.json
{
 "scripts": {
~~~省略~~~
    "prepare": "husky"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,.scss}": [
      "eslint --fix",
      "prettier --write"
    ]
  },
  "devDependencies": {
~~~省略~~~
    "husky": "^9.1.7",
    "lint-staged": "^16.0.0",
~~~省略~~~
  }
}

ただ、これだとlintもコード整形も発火せずにコミットされてしまいました。

調べたらわかったのですがgitファイル設置場所とhusky設定ファイル設置場所が同一階層じゃなかったのが原因でした。

.
├── .git/
├── backend/
└── frontend/ // ←ここにhusky格納

解決方法

  • husky最新バージョンの記述方法
    公式ドキュメント見て記述方法を修正しました。これについては日本語の技術記事読んで混乱したので最初からドキュメント見とけば良かったです。

  • huskyがコミット時に発火しない
    公式ドキュメントに解決方法載っていました。

今回、公式ドキュメントに載っている方法で解決することができました。

frontend/.husky/pre-commit
cd frontend
pnpm lint-staged
frontend/package.json
{
 "scripts": {
~~~省略~~~
    "prepare": "cd .. && husky frontend/.husky"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,.scss}": [
      "eslint --fix",
      "prettier --write"
    ]
  },
  "devDependencies": {
~~~省略~~~
    "husky": "^9.1.7",
    "lint-staged": "^16.0.0",
~~~省略~~~
  }
}

これで実行したら無事コード整形もlintチェックも走りました。よかった

まとめ

まだ導入して日が浅いので不満に思ったことなどは今のところないです。
コミット時にlintが走るのはめっちゃ便利だと思いました。
あと、新しいツール導入するときとかどうしても日本語記事で探してしまうけど、結局ドキュメント見るのが一番だなって思いました。

Discussion