【自動化】husky + lint-stagedでコミット時にリンター自動実行の仕組みを作る

はじめに

ふらっと行った勉強会でhuskyを用いて、生産性改善をしていた発表を聞いて、
「これ自分の開発チームでもできそう」
と思って、huskyを導入した時の技術メモを分かりやすく記事化しました。

▼会社のエンジニアブログではやってみた結果どうだった的な感想ベースの記事を書いてます

この記事の目標

やったこと

• ステージングしたファイルに対して、コミット時stylelint, eslintを実行して、警告の箇所を気づけるようした

この記事を読むと、上記をどのようにやったのか理解できます。
苦労した箇所なども合わせて解説します。

動作環境

• yarn: 1.22.19
• husky: 9.0.11
• lint-staged: 15.2.2

やり方

▼エラーでつまずいた箇所も含めて、書きます

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

• まずは以下のコマンドを叩いて、huskyとlint-stagedの2つをインストール

$　yarn add --dev husky lint-staged

②lint-staged の設定

• stylelintとeslintをコミット時に自動実行したかったので、それらをpackage.jsonに設定

package.json

"lint-staged": {
  "*.{css, sass,scss}": [
    "stylelint"
  ],
  "*.{js,jsx,ts,tsx}": [
    "eslint"
  ]
}

③Git hooks の有効化

• 下記コマンドを実行すると、ホームディレクトリに.huskyフォルダが作られます

$　yarn husky install

作られるフォルダ

.
├── .husky 

④.husky/pre-commitファイルを作成し、コミット前に実行したいコマンドを記述

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

$　yarn husky add .husky/pre-commit "yarn lint-staged"

③で作られた.huskyディレクトリの中にある/pre-commitの中にlint-stagedの実行を追加します

.husky/pre-commit

yarn lint-staged

作られるpre-commit

.
├── .husky
    └── pre-commit 

これで、
コミット前に.husky/pre-commitの中のyarn lint-stagedが実行され、
→yarn lint-stagedによって、②で設定したpackage.jsonの中身のstylelint,eslintが実行されます！

と思ったら、、、、⑤に続く。

⑤ 【苦労した1】この段階で、コミットしてstylelintが走るか挑戦

④までをやった段階で、実際にstylelintがコミット時に走るのかを確認したかったので、
stylelintに引っかかるようなCSSを記述し、コミットしてみました。

すると以下のエラーが発生

$　git add [stylelint対象のファイル]
$　git commit -m 'huskyのテスト'

yarn run v1.22.19
$ lint-staged
/bin/sh: lint-staged: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
husky - pre-commit script failed (code 127)
husky - command not found in PATH=/opt/homebrew/Cellar/git/2.40.1/libexec/git-core:/Users以降割愛~~~~~~~~~~~

lint-stagedコマンドが見つからないというエラーです。

【解決までの経緯】

色々と調べていると以下の記事を発見。

参考にして、
ホームディレクトリに .huskyrc を作成し、そこにyarnへのパスを通すことで解決しました！

$ echo "export PATH=\"$(dirname $(which yarn)):\$PATH\"" > ~/.huskyrc

でもまだ終わらない。。。⑥に続く

⑥ 【苦労した2】lint-staged

⑤をやった段階で、実際にstylelintがコミット時に走るのかを確認したかったので、
stylelintに引っかかるようなCSSを記述し、コミットしてみました。

これでいけるやろと思ったら、またエラー発生

$　git add [stylelint対象のファイル]
$　git commit -m 'huskyのテスト'

⚠ lint-staged prevented an empty git commit.
Use the --allow-empty option to continue, or check your task configuration

翻訳すると、

⚠ lint-staged が空の git commit を防いでいます。
続行するには--allow-emptyオプションを使うか、タスクの設定を確認してください。

【解決までの経緯】
--allow-emptyをlint-stagedコマンドの後ろにつければいいと思い、
.husky/pre-commitに下記の記述

.husky/pre-commit

yarn lint-staged --allow-empty

🎉仕組み作り完了！

実際に叩いたコマンド。eslintとstylelintが引っかかると▼画像のようになります。
stylelintに２ファイル,eslintに1ファイル引っかかったのが出ています

終わりに

これstylelint、eslintなどのlinterだけじゃなく、コミット前にrubocop -aなどの自動整形ツールも走らせることができます。色々と拡張できそうだなあと思ってます。
色々とつまずくこともあったけど、ツールをチームの運用に装着するまでやり切った後の達成感は何にも変えられませんね。

また、詰まっている時、一緒にペアプロしていただいた先輩には、本当に感謝しかありません。

参考