huskyでgit commitやgit pushの前にコマンドを実行して開発自動化を行う

この記事について

huskyというライブラリを使用して、git commit時やgit push時にコマンドを実行する方法をお伝えします。
git commit時にフォーマッタを適用させたり、git push時にテストを実行したり、開発自動化を進める時などに有効です。

対象読者

• gitを使用しており、開発自動化を進めたい方
• huskyの使い方を学びたい方

huskyとは

• gitで特定のアクションを行った際に、コマンドを実行してタスクを行う（これをgit hooksとも言います）ための仕組みを提供するライブラリです（Node.js環境があれば利用可能）
• huskyを使用することで、git pushした時にテストコードを実行させるなどが可能となります
• lint-stagedと組み合わせることで「ステージングしているファイル」や「コミットしたファイル」に対してのみコマンドを実行させる、ということが可能となります

huskyの使い方

環境

以下の環境で動作確認を行いました。

名前	バージョン
windows10
Node.js	12.13.0
npm	6.12.0
yarn	1.21.1
husky	4.2.1

インストール

• npmを使用する場合

npm install -D husky

• yarnを使用する場合

yarn add -D husky

package.jsonへの記述

.huskyディレクトリを作成し、その配下のファイルにスクリプトを記述する方法（参考）もありますが、ここではpackage.jsonにhuskyの設定を記述していきます。
（package.json内で不要な記述は省略しております）

{
  "devDependencies": {
    "husky": "^4.2.1",
  },
  "husky": {
    "hooks": {
      "pre-commit": "git commit時に実行したいコマンド",
      "pre-push": "git push時に実行したいコマンド"
    }
  }
}

例：git commit時にeslintとprettierを適用させたい

（eslintとprettierはインストール済みであることを前提とします）

package.jsonの記述
（git commit時にルートディレクトリ配下のファイルに対してprettierとeslintによる修正を行います）

{
  "devDependencies": {
    "eslint": "^7.24.0",
    "eslint-config-prettier": "^6.11.0",
    "husky": "^4.2.1",
    "prettier": "^2.0.5",
  },
  "husky": {
    "hooks": {
      "pre-commit": "prettier --write . && eslint --fix ."
    }
  }
}

例：git push時にJestのテストを実行させたい

package.jsonの記述

{
  "devDependencies": {
    "jest": "^27.0.4",
    "husky": "^4.2.1",
  },
  "husky": {
    "hooks": {
      "pre-push": "jest"
    }
  }
}

lint-stagedとの組み合わせ

lint-stagedと組み合わせることで、「git commit時にはステージング中のファイルに対してのみ」「git push時にはcommitしたファイルに対してのみ」コマンドを実行することができます。

package.jsonの記述
"pre-commit": "lint-staged --allow-empty"の箇所では、単に"pre-commit": "lint-staged"と記述した場合、以下のエラーが出てしまう場合があるため空コミットを許容するようにしています。
参考

Prevented an empty commit!

また、lint-stagedのバージョン10以降ではコマンド実行後のgit addは不要（自動でgit addされる）ため記述しておりません。
以下の流れで処理されます。

1. コミット時にlint-staged --allow-emptyコマンドが実行される
2. コミットしたファイルがcss,html,jsいずれかのファイル形式であればprettier --writeを実行してprettierのフォーマット適用
3. コミットするファイルがjsのファイル形式であればeslint --fixを実行してeslint適用

{
  "devDependencies": {
    "eslint": "^7.24.0",
    "eslint-config-prettier": "^6.11.0",
    "husky": "^4.2.1",
    "lint-staged": "^10.0.7",
    "prettier": "^2.0.5"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged --allow-empty"
    }
  },
  "lint-staged": {
    "**/*.{css,html,js}": [
      "prettier --write"
    ],
    "**/*.js": [
      "eslint --fix"
    ]
  }
}

エラーが無い場合、git commitが行われます。
エラーがある場合、以下のようなメッセージがターミナル上に表示されてgit commitは行われません。

154:5   warning  Unexpected console statement no-console
158:17  error    'event' is defined but never used no-unused-vars

✖ 2 problems (1 errors, 1 warnings)

husky > pre-commit hook failed (add --no-verify to bypass)

参考

husky の pre-commit が（また）動かない
【JavaScript】コミットする前にlint-stagedでeslintのチェックをする