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

# はじめに

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

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

https://engineer.crowdworks.jp/entry/husky_story



# この記事の目標


:::note
**やったこと**

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

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

# 動作環境
- yarn: 1.22.19
- husky: 9.0.11
- lint-staged: 15.2.2

# やり方

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

### ①husky と lint-staged をインストール
- まずは以下のコマンドを叩いて、[husky](https://typicode.github.io/husky/)と[lint-staged](https://github.com/lint-staged/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が実行されます！

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


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

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

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



```
$　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`コマンドが見つからないというエラーです。


**【解決までの経緯】** 

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

https://qiita.com/hagmon/items/f7b8f36d15ff9d166b3a#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95

参考にして、
ホームディレクトリに .huskyrc を作成し、そこにyarnへのパスを通すことで**解決**しました！
```
$ echo "export PATH=\"$(dirname $(which yarn)):\$PATH\"" > ~/.huskyrc
```

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

### ⑥:dizzy_face: 【苦労した2】lint-staged
⑤をやった段階で、実際にstylelintがコミット時に走るのかを確認したかったので、
stylelintに引っかかるようなCSSを記述し、コミットしてみました。

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

```
$　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ファイル引っかかったのが出ています

![スクリーンショット 2024-03-30 11.48.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1584967/daa3039f-7626-e25a-f8f5-8b02ef20c09a.png)


# 終わりに

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

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


# 参考
https://qiita.com/akym03/items/7e4db720a9e1bfad7747

https://zenn.dev/otomoti_27/articles/692e1308ce849b