ぼくの husky で設定した pre-commit が動かない。。。

今回は、エラー解決にかなり時間を要したので、備忘録として残しておく。

タイトルのとおり、新規プロジェクトを開始する際に、なぜか私の pre-commit が動かないという事態に遭遇した。pre-commit は複数人で開発を行っている際に、とても便利なのでその機能も含め、紹介する。

pre-commit とは
husky と lint-staged の設定方法
- インストール
- 設定
husky で設定した pre-commit が動かない問題
まとめ

pre-commit とは

Gitにも、特定のアクションが発生した時にカスタムスクリプトを叩く方法がある。（Gitフックという。）pre-commit もその一つで、コミットの実行前に実行される。また、エラーを返すことでコミットを中断させることができる。

設定に関しては、.git/hooks のフォルダの中に、pre-commit というファイルが存在すれば自動的に実行されることになっている。（git init でリポジトリを作成した時に、サンプルのファイル pre-commit.sample が存在しているので、pre-commit にリネームして中身のシェルスクリプトを書き換えることで任意の処理を実行することができる。）

git-scm.com

pre-commit 前に、実行したいこととしては、Lint の確認や Prettier での自動整形、テストの自動実行などが挙げられる。

これらを簡単に設定できるライブラリとして、husky がある。husky は、Gitフックの設定を package.json （.huskyrc 等）からできるツールである。.git/hooks/pre-commit にスクリプトを書いた場合、プロジェクト内で共有がしにくいが、husky を使って設定を package.json に書けば簡単に共有できるメリットが大きい。

github.com

さらに、すべてのファイルに Lintのチェックや整形をするのではなく、今回 commit する変更箇所（すなわち、GItのステージに上がっているファイルのみを対象）にスクリプトを適応させれば十分なので、lint-staged というライブラリも追加する。変更箇所のみに適応させることができるので、効率的である。

github.com

husky と lint-staged の設定方法

インストール

npm または yarn でインストールすることができる。

$ npm install --save-dev husky lint-staged

$ yarn add -D husky lint-staged

設定

処理の流れとしては、husky で pre-commit フックに lint-staged を設定し、lint-staged から ESLint や Prettier を実行する。事前に、eslint、prettier、typescript などをインストールしておく必要があるが、pre-commit 時に、ESLint のチェックとPrettier による自動整形を行い、pre-push 時に、　TypeScript の型チェックを行う設定ファイルは以下のようになる。

{
  "scripts": {
    "type-check": "tsc --pretty --noEmit",
    "format": "prettier --write **/*.{js,ts,tsx}",
    "lint": "eslint . --ext ts --ext tsx --ext js",
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "yarn type-check"
    }
  },
  "lint-staged": {
    "*.@(ts|tsx)": [
      "yarn lint",
      "yarn format"
    ]
  },
}

husky で設定した pre-commit が動かない問題

いよいよ、今回の本題である。

上記の設定を行い、いざ commit や push をしても、Gitフックか動作せず、スルー状態で、ハマりました。。。

そもそも pre-commit が設定されているか確認する

通常、husky をインストールした時点で、.git/hooks/pre-commit が自動的に生成される。

しかしながら、私の場合、husky をインストールしても、.git/hooksには、.sample ファイルがあるだけで、新規にファイルが作成されていない事態。

WEBで調べると、対応方法は以下のように記載されていた。

$ rm -rf .git/hooks
$ yarn add -D husky --force

一度、.git/hooks を削除して、再インストールするが、変化なし。

Git のバージョンを確認する

husky に以下の記述がある。

Verify that your version of Git is >=2.13.0. ENOENT error 'node_modules/husky/.git/hooks'

GitHub のバージョンは、git version 2.27.0 で最新であり、問題なし。

参照先が間違っていないか確認する

今回のフォルダ構成は、以下のようになっている。

app
  |-- .git
    |-- hooks
  |-- server
  |-- client
    |-- package.json

package.jsonと同じ階層に、.git がないので、hooks を参照できていないのかと疑ったが、以下の方法で確認すると、問題なかった。

$ git rev-parse --git-path hooks
$ ../.git/hooks

Yarnのバージョンを確認する

インストール時に、きちんと処理ができていない可能性が高いと考え、パッケージマネージャーとして使っている Yarn を疑うことにした。

$ yarn --version
1.3.2

version 1.3.2？？？ めちゃくちゃ古い。。。現在のmacOSの安定版は、version 1.22.4 である。

https://classic.yarnpkg.com/ja/docs/install/#mac-stable

Yarnを最新版にアップグレードする。

$ brew upgrade yarn

$ yarn --version
1.22.4

yarn install --force で再インストールを実行、無事に pre-commit ファイルが作成された。

まとめ

今回は、まさかのパッケージマネジャーのバージョン違いで、正常に動作していませんでした。インストールで不具合が生じた場合は、Yarn のバージョンも確認お忘れなく。

それでは、ステキな開発ライフを。

7839

雑草魂エンジニアブログ