はじめに

npm や yarn インストールした typicode/husky のフックが動かない問題の対応方法。

TL;DR

  • v5 系で大きなアップデートがされている
    • v4 系と v5 系とでインストール時の挙動が異なる
  • v4 系: インストール + package.json の変更で OK
    • npm i -D husky@^4, yarn add -D husky@^4 でインストール
      • インストール時に .git/hooks 配下に色々と作られる
    • package.json に "husky" セクションを追記すれば OK
  • v5 系: 追加セットアップが必要(インストールだけでは .git/hooks 下には何も作られない)
    • npx husky install or yarn husky install
    • npx husky add .husky/pre-commit "echo 'pre-commit'" or yarn husky ...
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 問題事象
    2. 解決方法
      1. v5 系
      2. v4 系
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
$ sw_vers
ProductName:	macOS
ProductVersion:	11.2.2
BuildVersion:	20D80

$ yarn --version
1.22.10

$ npm -v
6.14.5

詳細

参考: What’s new in husky 5 - DEV Community

v5 系へのメジャーアップデートで、セットアップ手順が変わっている。

公式リポジトリ(typicode/husky)にも、以下のように書かれている。

Note: husky 5 is a major version with breaking changes. Upgrading from v4 to v5 requires additional steps, please see the docs.

問題事象

読まなくても OK

以下はダメな例。先に書いておくと 「v5 系がインストールされるのに、v4 系の設定をしている」 ので NG

1
2
$ npm i -D husky  # もしくは yarn add -D husky
# バージョン未指定なので v5 系がインストールされる

package.json に以下を追記。

1
2
3
4
5
6
7
8
9
{
  "name": "husky-test",
  ...,
  "husky": {
    "hooks": {
      "pre-commit": "echo 'from husky'"
    }
  }
}

コミットしてみると husky による pre-commit フックは動作しない。

1
2
3
4
$ git add package.json && git commit -m "husky test"
[master (root-commit) aaf3ee1] husky test
 1 files changed, 15 insertions(+)
 create mode 100644 package.json

解決方法

v5 系

husky インストール後、husky init, husky install, husky add でセットアップすれば OK。

1
2
3
4
5
6
7
8
9
$ npm i -D husky
$ npx husky init
$ npx husky install
$ npx husky add .husky/pre-commit "echo 'from husky'"
$ git add package.json && git commit -m "husky v5"
husky > pre-commit (node v12.7.0)  # pre-commit フックが動く
from husky
[master 47f3d49] husky v5
...

なお .husky 配下にコンフィグなどが追加されており、.husky/pre-commit はこんな感じ。

1
2
3
4
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

echo 'from husky`

ちなみに npx husky で出てくるヘルプに例が載っている。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ npx husky
Usage

  husky init
  husky install [dir] (default: .husky)
  husky uninstall
  husky add <file> [cmd]

Examples
  husky init

  husky install
  husky install .config/husky

  husky add .husky/pre-commit
  husky add .husky/pre-commit "npm test"
  husky add .config/husky/pre-commit "npm test"

v4 系

v4 系を使いたい場合は、インストール時にバージョン指定。

1
$ npm i -D husky@^4

あとは package.json に以下を追記。

1
2
3
4
5
6
7
8
9
{
  "name": "husky-test",
  ...,
  "husky": {
    "hooks": {
      "pre-commit": "echo 'from husky'"
    }
  }
}

まとめ

  • v5 系で大きなアップデートがされている
    • v4 系と v5 系とでインストール時の挙動が異なる
  • v4 系: インストール + package.json の変更で OK
    • npm i -D husky@^4, yarn add -D husky@^4 でインストール
      • インストール時に .git/hooks 配下に色々と作られる
    • package.json に "husky" セクションを追記すれば OK
  • v5 系: 追加セットアップが必要(インストールだけでは .git/hooks 下には何も作られない)
    • npx husky install or yarn husky install
    • npx husky add .husky/pre-commit "echo 'pre-commit'" or yarn husky ...

その他・メモ

以下を参考にして .git/hooks を削除して再インストールしたりとか、yarn のバージョン確認してみたりしたけど、結局はメジャーアップデートによる影響というもの。

ついつい日本語でググってしまうけど、これまでの環境との違い(今回は husky のバージョン)や、一次情報を真っ先に確認する癖をつけたい。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list