typescript環境でgit commitをフック(pre-commit)にlintを実行する

今回は git commit をフックにlint（eslint, prettier）を実行するための設定を備忘録していきます。

動作環境

もしかすると husky や lint-staged のバージョンが変わることで動作が変わるかもしれないので、現在私の環境で動作が確認できているバージョンを記載します。

name	version
husky	7.0.4
lint-staged	12.3.2

環境構築

インストール

$ yarn add -E -D husky lint-staged
$ npx husky-init

以上でroot直下に .husky ディレクトリが作成され初期設定が完了します。
このとき、package.jsonにも scripts内に "prepare": "husky install" が追加されていることが確認できるはずです。

pre-commitで実行するスクリプトを編集

では、huskyの設定として.huskyの配下に作成されている pre-commit ファイルを編集します。

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

#npm test <-コメントアウト
npm run lint-staged

pre-commitをpackage.jsonに追記

続いてpackage.jsonにhookの設定を行います。

"scripts": {
	"lint-staged": "lint-staged", //<- 追記
},
// 以下追記
"husky": {
    "hooks": {
      "pre-commit": "lint-staged", //<- コミット前にlint-stagedのコマンドが実行される
      "pre-push": "npm run lint"　//<- プッシュ前にコマンドが実行される
    }
  },
  "lint-staged": {
    "**/*.{tsx,ts}": [
      "prettier --write",
      "eslint \"{src,apps,libs,test}/**/*.ts\" --fix"
    ]
  },

注意

コミットの対象にtsやtsxなど対象ファイルがないと実行されないので、プロジェクト途中から導入した直後のコミットではlint-staged対象のファイルがないと実行されません。

また、やり方が悪かったのかpathを設定しなければ行けないのかはわからないが、 pre-commit ファイルに記載しているコマンドはnpmでないとエラーが出てしまった。

SourceTree向け設定

SourceTreeを使用しているとhuskyの読み込みでエラーが発生します。

原因はhuskyのpathが通っていないことに起因します。（今回はnpxを使用しているため、npxのpath）

そのため、ホームディレクトリ直下に .huskyrc ファイルを配置し、その中にnpxのパスを記載する必要があります。

設定内容について、nodejsのバージョン管理ツールを使用しているかと思いますが、そのツールが使用するnodejsのカレントバージョンのパスを設定することになります。

例えばnodebrewだと以下です。

PATH="/Users/{userName}/.nodebrew/current/bin:$PATH"

上記を ~/.huskyrc に記述するだけです。