暇人じゃない

Husky (v5) と lint-staged を使ってコミットする前に Prettier を実行する

Git でコミットする前に Prettier や ESLint を動かす方法を探すと、Husky (v4) + lint-staged の組み合わせがヒットする。

2021/02/26 時点では Husky が v5 になっていて、package.json に hook を記述するのではなく、.husky ディレクトリの hook ファイル (pre-commit など) にスクリプトを定義するやり方に変わっていたのでまとめておく。

それぞれのツールについて整理すると、Husky は Git の hook を管理するツール。lint-staged は Git に stage されているファイル (コミット対象のファイル) に指定したスクリプトを実行するツール。コミット対象のファイルにのみ Lint などのスクリプトを実行して時間を節約しましょう、というのが lint-staged のコンセプト。

パッケージのインストール

Husky と lint-staged をプロジェクトに追加する:

yarn add -D husky lint-staged

lint-staged の設定

package.json に lint-staged の設定を追加する。以下は stage に追加した tsx などの拡張子がついたファイルに対して Prettier を実行する例:

"lint-staged": {
  "*.{js,jsx,ts,tsx,json,md}": [
    "prettier --write"
  ]
}

適当なファイルに変更を加えて yarn lint-staged を実行すると Prettier が動くはず。

Husky の設定

以下のコマンドを実行する。このコマンドは .husky ディレクトを生成したり、package.json の prepare に husky install を追加する:

yarn husky init

これでリポジトリを clone したばかりの環境でも yarn install を実行すれば Git の hook が自動で設定される。

.husky/pre-commit が生成されているので、lint-staged のスクリプトを追加する:

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

yarn lint-staged

これでコミットする前に Prettier が動くようになる。

Husky 5.1.2 で husky init の挙動が変わった (2021/03/01 追記)

husky init を実行した時の、husky install の Life Cycle Scripts の追加先が postinstall から prepare に変わった。 以下の Issue によると、prepare を使えば npm install [package] した時に、そのパッケージのスクリプトが実行されない。したがって、パブリックなパッケージの場合にスクリプトを実行しないような考慮が不要になるとのこと。

ただ、Yarn v2 では prepare が未サポートのようで、今後サポートされるか確認が必要。

参考

Husky v4 を使っている場合、husky-4-to-5 というツールを使えば簡単に移行できるらしい。

JavaScript