この記事について

huskyの4からv8の設定方法についてのメモです。
youtubeのとらゼミ、【日本一わかりやすいTypeScript入門】ESLintとPrettierでコードの品質を高めようをやっていて一部うまくいかなかった箇所の覚え書になります。

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

huskyとは

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

困ったこと

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

※ package.jsonを一部抜粋。
※ 記載はしませんが、lint-fixというコマンドをscriptsに追加しています。また、huskyもinstallされています。

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js, tx}": [
      "npm run lint-fix"
    ]
  }
}

解決方法①

動画内で説明されるやり方を試しました。
動画から飛べるgithubのリンク→2-2. huskyがもし動かなかったら...

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

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

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

解決方法②

公式のinstall方法を試しました。困ったときは公式。
行き着いた公式のサイトがこちら↓

npmを使って既にhuskyはinstallされていましたので、下記を追加で実行しました。

# 実行コマンド
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

#　実行コマンド
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の設定は自動的に削除され、以下が追加されています。

{
  "scripts": {
    "prepare": "husky install"
  },
}

また、開発ディレクトリ直下に.husky/pre-commitも追加されました。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint-staged

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

# 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というコマンドを動画内で設定しています。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint-fix

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

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もされていません。
これで意図通りに挙動させることができました！

参考