【Node】Huskyを使って、git commit前にLintやテストコマンドを自動実行する！

# Huskyとは
公式ドキュメントを翻訳

![cap1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/6847923b-20a0-779e-065b-149187cb9d6c.png)

```git commit``` や ```git push``` 前に自動で任意のコマンドを実行してくれるライブラリです！！


実際に実行すると、こんな感じの動作が確認できます。

![cap2 - コピー.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/fb6a0e52-2c13-26e5-e2c4-d85acdab749c.png)

```git commit``` 時にlintが実行され、lintにひっかかってcommitが中止されていることがわかります！
今回はlintにしましたが、実行するコマンドは任意に指定できるので、UTを実行したり、buildを実行してみたり、夢が広がります。

インストールから動作確認までを試してみます。

# やってみる
## プロジェクトの用意
いつもの手順で準備します。

```
pnpm create vite hello-husky --template react-ts
```

```bash
>pnpm create vite hello-husky --template react-ts
.../19357234a12-3ea4                     |   +1 +
.../19357234a12-3ea4                     | Progress: resolved 1, reused 1, downloaded 0, added 1,

Done. Now run:

  cd hello-husky
  pnpm install
  pnpm run dev
```

gitリポジトリとして扱うためのinit処理も必要です。

```
  cd hello-husky
  git init
  pnpm install
```

```
> cd .\hello-husky\
> git init
Initialized empty Git repository in C:/work/repo/hello-husky/.git/
> pnpm install
Packages: +181
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  
Progress: resolved 221, reused 181, downloaded 0, added 181, done

dependencies:
+ react 18.3.1
+ react-dom 18.3.1

devDependencies:
+ @eslint/js 9.15.0
+ @types/react 18.3.12
+ @types/react-dom 18.3.1
+ @vitejs/plugin-react 4.3.3
+ eslint 9.15.0
+ eslint-plugin-react-hooks 5.0.0
+ eslint-plugin-react-refresh 0.4.14
+ globals 15.12.0
+ typescript 5.6.3 (5.7.2 is available)
+ typescript-eslint 8.15.0
+ vite 5.4.11

Done in 15.4s
```

これでプロジェクトの準備＆gitリポジトリ化が完了しました！！！

## Huskyのインストールとセッティング
公式ドキュメントを参考にインストールとセッティングをしてみます

https://typicode.github.io/husky/get-started.html#install

![cap3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/8bd34c3a-d00c-4158-0e1c-ecaa83d85157.png)

### ライブラリをインストールする
```
> pnpm add --save-dev husky
Packages: +1
+
Progress: resolved 222, reused 182, downloaded 0, added 1, done

devDependencies:
+ husky 9.1.7   

Done in 4s
```

![cap4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/787b4c2d-daed-21da-0ae8-095de04fb7b3.png)

良い感じです

## initしてみる

```
pnpm exec husky init
```

成功すると、ディレクトリとshっぽいファイルが作成されます。

![cap5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/fe2d2f00-4022-4a7c-24ed-0126b9704910.png)

shっぽいファイルを確認してみます。

```.husky/pre-commit
pnpm test

```

pre-commit(コミット前)に ```pnpm test``` してくれそうですね。
testファイルを用意するのが面倒なので、```pnpm run lint``` に変更して、lintを実行するよう変更します。

```diff_shell
- pnpm test
+ pnpm run lint
```


## commitしてみる！
では実際にcommitしてみましょう。
lintに叱られそうなコードを追加します。

```diff_tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

+ const notUsed = "not_used"

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

```

addしてcommitします。

```
git add .
```

いざコミット！

```powershell
> git commit -m "huskyテスト"

> hello-husky@0.0.0 lint C:\work\repo\hello-husky
> eslint .


C:\work\repo\hello-husky\src\main.tsx
  6:7  error  'notUsed' is assigned a value but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (1 error, 0 warnings)

 ELIFECYCLE  Command failed with exit code 1.
husky - pre-commit script failed (code 1)
```

```git commit``` すると、eslintが走りました！！！
いいですね。
```git status``` でコミットがされていないことを確認します。

```powershell
> git status
On branch master
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   .husky/pre-commit
        modified:   package.json
        modified:   pnpm-lock.yaml
        modified:   src/main.tsx
```

>Changes to be committed:

とあるので、未コミットなのが確認できました！！！めっちゃ便利

# おわりに
Husky最高！！！
以前まで、Lintやformatterは結構忘れがちになっちゃうタスクでした。
こういった仕組みで自動化できるのは最高だと感じました！！！