husky を v4 → v7 にアップグレードしたら pre-commit ができなくなった

と思ったら設定方法が変わっただけだったので直しました笑、までがタイトルです（長い）

1. husky とは

ワンちゃんかな…

実は私今まで husky が何なのあまりわかってなくて、コミットする度に「なんか走ってるな」と思ってただけでした。でも今回ちゃんと調べましたよ！

husky とは、git hook を簡単に操作できるようにしてくれるパッケージです。

git ではコミットやプッシュなど特定アクションが発生した時にカスタムスクリプトを叩く方法があります。それが git hook です。フックをかけることのように特定のアクションに特定のスクリプトをかけるイメージですね。

git hook を使うためには.git/hooksディレクトリ内にスクリプトを書く必要がありますが、husky を使うともっと楽に git hook を制御することができます。

// package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint",
      "pre-push": "yarn test",
    }
  }
}

簡単でしょう？

2. マイグレーション

husky が何なのかわかったのでさっそく v4 から v7 にアップグレードすることにしました。そのためにはマイグレーションが必要で、やり方は公式サイトにのってます。基本的にコマンド叩くだけで大丈夫(なはず)です。

npm

npm install husky@latest --save-dev \
  && npx husky-init \
  && npm exec -- github:typicode/husky-4-to-7 --remove-v4-config 

Yarn 1

yarn add husky@latest --dev \
  && npx husky-init \
  && npm exec -- github:typicode/husky-4-to-7 --remove-v4-config

Yarn 2

yarn add husky@latest --dev \
  && yarn dlx husky-init --yarn2 \
  && npm exec -- github:typicode/husky-4-to-7 --remove-v4-config

pnpm

pnpm install husky@7 --save-dev \
  && pnpx husky-init \
  && pnpx -- github:typicode/husky-4-to-7 --remove-v4-config

ちなみに私の環境は Yarn 1 でした。

コマンド叩いて処理が走り終わったら package.json に以下のような差分ができます。

// package.json

{
  "scripts": {
    // ...
    "prepare": "husky install" // 新しく追加
  },
  "devDependencies": {
    // ...
    "husky"' "^7.0.0", // 4.x.x からアップグレード
    // ...
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint",
      "pre-push": "yarn test",
    }
  }
}

そしてもうひとつ目立つ変化は、.huskyディレクトリ配下にpre-commitというファイルができていることです。中身はこれです。

# .husky/pre-commit

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

npm test

まずここまでやっといてコミットしてみたら、もともと指定してたyarn lintじゃなくてyarn testが走ってビックリしました。

3. v7の設定方法

なんか v7 からは設定方法が変わったらしいですね。公式ドキュメントにサンプルコートもありました。

// .huskyrc.json (v4)
{
  "hooks": {
    "pre-commit": "npm test && npm run foo"
  }
}

# .husky/pre-commit (v7)
# ...
npm test
npm run foo

あーなるほどースクリプトを package.json に書くんじゃなくて別ファイルに書くようですね。だからサンプルでpre-commitのファイルを用意してくれたんでしょう。

マイグレーション直後は.husky配下にpre-commitしかなかったので直接pre-pushを追加し、それぞれのスクリプトを入れました。

# .husky/pre-commit

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

yarn lint

# .husky/pre-push

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

yarn test

そして pacakge.json に書いといた husky のスクリプト部分は削除して試してみたら、コミット前にはyarn lintが、プッシュ前にはyarn testが走ったので上手くいったと思います。

最初コミットしたときにyarn testが走ったのはpre-commitの中にデフォルトでnpm testが入ってからだったと思います。ちゃんとカスタマイズしてから使うようにしましょう。

終わり

なんか手探りで解決した感じがあるのでどこか間違ってるならぜひご指摘お願いします！！