【husky】v4からv8での設定方法 (とらゼミで躓いたことメモ)

## この記事について
huskyの4からv8の設定方法についてのメモです。
youtubeのとらゼミ、[【日本一わかりやすいTypeScript入門】ESLintとPrettierでコードの品質を高めよう](https://www.youtube.com/watch?v=R35LJL6a-p0&t=1527s)をやっていて一部うまくいかなかった箇所の覚え書になります。

とらゼミさんわかりやすいのでおすすめです。

## huskyとは
とらゼミさんの動画と、下記Zennに説明あるので割愛します。

## 困ったこと
動画の説明通りに、下記のように設定したところ、`git commit`でhuskyが期待通りに動作しませんでした。
やりたいことは、stagingされたものを`git commit`した時に`eslint`や`prettier`を動作させることです。

※ package.jsonを一部抜粋。
※ 記載はしませんが、`lint-fix`というコマンドを`scripts`に追加しています。また、huskyもinstallされています。
```json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js, tx}": [
      "npm run lint-fix"
    ]
  }
}
```

## 解決方法①
動画内で説明されるやり方を試しました。
動画から飛べるgithubのリンク→[2-2. huskyがもし動かなかったら...](https://github.com/deatiger/ts-basic-demo/tree/bug-husky-not-working#2-2-husky%E3%81%8C%E3%82%82%E3%81%97%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F%E3%82%89)

```bash
# 実行コマンド
ls -la .git/hooks/ls -la .git/hooks/

# 結果
何も出力されない...
```

`ls`で何も表示されないので、そもそもhusky動いてなさそう..？？ということでそもそもhuskyとはから、現在の自分のpackage.jsonにあるhuskyのversionを確認していきました。
※ おそらく動画内のversionに合わせてやれば`ls`で何かしら表示されるかもです。

## 解決方法②
公式のinstall方法を試しました。困ったときは公式。
行き着いた公式のサイトがこちら↓
- [husky manual install](https://typicode.github.io/husky/#/?id=install)
- [husky-4-to-8](https://github.com/typicode/husky-4-to-8)

npmを使って既にhuskyはinstallされていましたので、下記を追加で実行しました。
```bash
# 実行コマンド
npx husky-init

# 結果
Need to install the following packages:
  husky-init
Ok to proceed? (y) y
husky-init updating package.json
  setting prepare script to command "husky install"
husky - Git hooks installed
husky - created .husky/pre-commit

please review changes in package.json
```

```bash
#　実行コマンド
npm exec -- github:typicode/husky-4-to-8 --remove-v4-config

# 結果
Need to install the following packages:
  github:typicode/husky-4-to-8
Ok to proceed? (y) y
husky - created .husky/pre-commit
husky - deleted husky field from package.json

⚠️ pre-commit hook may need to be manually updated to be run via package manager.

Examples:
  jest → npx --no-install jest
       → yarn jest

  jest && eslint → npx --no-install jest && npx --no-install eslint
                 → yarn jest && yarn eslint

  commitlint -E HUSKY_GIT_PARAMS → npx --no-install commitlint --edit $1
                                 → yarn commitlint --edit $1

See https://typicode.github.io/husky/#/?id=migrate-from-v4-to-v8
```

この時点で、[困ったこと](#困ったこと)に記載のpackage.jsonの設定は自動的に削除され、以下が追加されています。
```json
{
  "scripts": {
    "prepare": "husky install"
  },
}
```

また、開発ディレクトリ直下に`.husky/pre-commit`も追加されました。
```bash
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint-staged
```

どちらも実行できたので、再度`git commit`してみます。

```bash
# git commit結果
# {hogehoge}の部分は各々の名前が入るところです。
.husky/pre-commit: line 4: lint-staged: command not found
husky - pre-commit hook exited with code 127 (error)
husky - command not found in PATH=/Library/Developer/CommandLineTools/usr/libexec/git-core:/Users/{hogehoge}/.nodebrew/current/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/{hogehoge}/.nodebrew/current/bin
```
コマンドがない...？なんで..?
解決方法③に続く。

## 解決方法③
調べたところ、`git commit`した時に実行されるのは`.husky/pre-commit`に記載されているものだそうです。
つまり、`npm run lint-staged`が実行されるようです。しかし、解決方法②に書いたように初めに設定していたhuskyのhooksのコマンドは既に削除されていてありません。

なので、`.husky/pre-commit`を下記のように修正しました。
※ `lint-fix`というコマンドを動画内で設定しています。
```bash
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint-fix
```

今度こそ行けるでしょう..！
再々度`git commit`してみます。適当な箇所のカッコとか外してみてから試します。

```bash
npm ERR! code EJSONPARSE
npm ERR! path /Users/{hogehoge}/Workspaces/torahack/ts-basic/package.json
npm ERR! JSON.parse Unexpected end of JSON input while parsing near "...erver\": \"^4.9.2\"\n  }\n"
npm ERR! JSON.parse Failed to parse JSON data.
npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/{hogehoge}/.npm/_logs/2022-06-27T14_12_11_621Z-debug-0.log
husky - pre-commit hook exited with code 1 (error)
```

ちゃんとエラーになり、commitもされていません。
これで意図通りに挙動させることができました！



## 参考
- [husky manual install](https://typicode.github.io/husky/#/?id=install)
- [husky-4-to-8](https://github.com/typicode/husky-4-to-8)
- [husky を v4 → v7 にアップグレードしたら pre-commit ができなくなった](https://zenn.dev/luvmini511/articles/a47b1aa0310d1a)