huskyのpre-commitで設定したlintチェックがVSCodeのGUIからのコミットだと動かない件

結論から言うとhuskyのリポジトリにissueとしてあがっていましたが、日本語の情報がうまく見つけきれなかったので雑にまとめておきます。
https://github.com/typicode/husky/issues/639

状況

コミット時にESLintやらstylelintやらのチェックを走らせようとしてhuskyとlint-stagedの設定をおこないました。
その状態でコマンドラインからgit commitするとlintのチェックが動きエラーがあるとコミットが中断されるのですが、VSCodeのGUIでコミット（ボタンぽちー！）するとチェックが動かずエラーがある状態のままコミットされてしまいました。

実は以前もこれでハマったことがあったのですが、そもそもファイルの保存時にもlintが動くように設定しており、その時点でエラーを解消していたためコミット時のチェックはなくても気にしていませんでした。

最近「りあクト！」という本を読んでReactの勉強をしているので、今回社内のちょっとしたツールを作るのにReactを使ってみようと思い諸々の初期設定をしていてまた同じ問題でハマりました。
フロントエンドに詳しい同僚に相談してみたところ、一瞬で上記のissueを見つけてきてくれて解決しました。まじ神！

原因

issue内のコメントにもある通り、npxにpathが通っていないことが原因のようです。

VSCodeに限らず、SourceTreeなどのGUIからのコミットでも発生するみたいです。

解決策

その1. husky のバージョンを3系に下げる

バージョン4以降からこのissueが発生しているみたいなので、バージョンを3に下げると解決します。
husky自体はgitのcommitとかのアクションにフックしてコマンドを実行してくれているだけ（だと思っている）ので、バージョン4でしか使えない機能があるとかじゃない限りはこの対応でいいような気がします。

• npmの場合
  https://github.com/typicode/husky/issues/639#issuecomment-699770193
  npm uninstall husky && npm install --save-dev husky@3

• yarnの場合
  yarn remove husky && yarn add -D husky@3

その2. .huskyrc で PATH を指定する

以下のように ~/.huskyrc を作成してパスを通してあげれば解決します。

.huskyrc

PATH="/usr/local/bin:$PATH"

issueのコメントを見るとプロジェクトルートではなくホームディレクトリに置かないとダメみたいなことを言っている人もいますが僕の環境ではプロジェクトルートに置いてみてもうまく動いていました。

ホームディレクトリに置く場合、各自の環境で .huskyrc を作成してもらう必要があるというのと、nodeをインストールしているパスが違う場合がある（そもそもnodeが入っていないパターンもある？）などの考慮が必要なためちょっと大変そうです。
かといってプロジェクトルートに置いて .huskyrc もコミットしてしまったとしても、結局nodeのパスが違うパターンの場合に困るのでちょっとめんどくさそうです。

どうしてもhuskyの最新バージョンを使いたいというのでなければバージョンを下げる方向で解決するのがよさそうです。

結論

• GUIからのコミットでもhuskyを動かしたい場合はhuskyのバージョンを3系に下げる
• どうしてもhuskyの4系を使いたい場合はPATHを通す
• （issueとしてあがっているのでそのうち4系でも解消されるかも）

issueのコメントのやりとりを見た感じ、そもそもnpxが見つからなくてhuskyのフックが実行できないのにエラーで落ちるんじゃなくて普通に無視してコミットしちゃうのはどうなんだみたいな議論もされているようです。（たしかに）
そのあたりも含めて今後なにかしらの修正が入る可能性はありそうですが、とりあえずlintチェックをしたいだけの場合はおとなしくバージョンを3系に下げるのがよさそうです。