huskyとcommitlintでgit commitメッセージの形式をチェックする

2022年2月17日 09:15

こんにちは、基盤開発チームの三輪です！今年の冬が寒すぎて家で仕事をしている間ずっと暖房をつけているので、今まで1か月の電気代が3,000円くらいだったのが先月初めて10,000円を超えました。

基盤開発チームでは最近チームが立ち上がったばかりということもあり、コミットメッセージの書式など考えず書きたいように書いていました。

しかし、さすがにそれはまずいよねということで書式を統一することになり、huskyとcommitlintでGitのコミット規約に従わせ、違反したコミットメッセージはcommit時に弾くように設定しました。

調べているとhuskyのVersion4を使った設定方法とVersion5以降（最新はVersion7）ではかなり違いがあり、Version4の設定方法の記事もかなり残っており、どちらが正しいかわからなかったので、今回は最新の設定方法を記事にしていこうと思います。

huskyの設定

huskyとは、Git hooksを扱う事の出来るnpmパッケージで、コミットやプッシュ時に任意のコマンドを走らせることが出来ます。

Git hooksとは、gitでコマンドを実行する直前もしくは実行後に特定のスクリプトを実行するための仕組みです。

huskyを使うことで、リントコマンドなどを手動で走らせる必要がなくなり、開発体験向上に寄与してくれるパッケージです。

まず初めにhuskyとcommitlintをまとめてインストールします。

$ yarn add -D husky @commitlint/{config-conventional,cli}

huskyをインストールできたら下記コマンドを実行します。コマンド実行すると、Git hooksが有効化され、.husky/_/husky.shが作成されます。

yarn husky install

この設定は出来ればyarn install時に自動で行ってほしいので、package.jsonのscriptsに書いておくと便利です。

ただし、Yarn1系と2系どちらを使っているかで設定方法が異なるので、yarn -vでバージョン確認を行ってください。

Yarn1系の場合

// packgae.json

{
  "scripts": {
    "prepare": "husky install",
  }
}

Yarn2系の場合

{
  "private": true,
  "scripts": {
    "postinstall": "husky install"
  }
}

これにより、yarnのライフサイクルの中でhuskyの設定を自動でしてくれます。

commitlintの設定

先ほどすでにcommitlint系パッケージはインストールしたので、ここではcommitlint.config.jsの設定を行います。

プロジェクトルートにcommitlint.config.jsを作成し、その中身を下記のようにします。

// commitlint.config.js 

module.exports = {
  extends: ['@commitlint/config-conventional'],
};

commitlintのルールではコミットメッセージが次の形式になっている必要があります。

type(category): description [flags]

コミットメッセージ例
feat: develop new feature
fix: fix some bugs
chore: ciの設定

typeには次の11種類を入力することが出来ます。

- build: ビルドに関すること
- chore: カテゴライズできない雑事
- ci: ciに関すること
- docs: ドキュメント編集など
- feat: 新機能開発
- fix: バグフィックス
- perf: パフォーマンス向上
- refactor: リファクタリング
- revert: コミット取り消し
- style: コードスタイルに関すること
- test: テストに関すること

その他のルールはこちらをご覧ください。
https://www.npmjs.com/package/@commitlint/config-conventional

huskyでcommitlintルールを走らせるようにする

コミット時にコミットメッセージがcommitlintルールをクリアしているかチェックし、クリアしていなければコミットに失敗するようにします。

まず、package.jsonにcommitlintコマンドを追加します。

// package.json
{
  "scripts": {
    "commitmsg": "commitlint -e $GIT_PARAMS"
  }
}

次に下記コマンドを実行します。

$ yarn husky add .husky/commit-msg 'yarn commitmsg'

これで.husky配下にcommit-msgを作成出来ました。

# .husky/commit-msg

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

yarn commitmsg

これでコミットメッセージが正しい書式であるか、コミット時に自動でチェック出来るようになりました。

試しにコミットしてみましょう。適当なファイルをステージし、コミットメッセージも適当にしてcommitします。

$ git commit -m "test"
/home/miwa/project/oidc/node_modules/@commitlint/cli/lib/cli.js:112
        throw err;
        ^

TypeError: Cannot read property 'includes' of null
    at redmine-rule (/home/miwa/project/oidc/commitlint.config.js:10:19)
    at /home/miwa/project/oidc/node_modules/@commitlint/lint/lib/lint.js:98:40
    at Array.map (<anonymous>)
    at lint (/home/miwa/project/oidc/node_modules/@commitlint/lint/lib/lint.js:90:10)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Promise.all (index 0)
    at async main (/home/miwa/project/oidc/node_modules/@commitlint/cli/lib/cli.js:205:21)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
husky - commit-msg hook exited with code 1 (error)

エラーになってますがコミット自体は失敗してますね。それでは、次にcommitlintルールに則ったコミットメッセージでコミットします。

$ git commit -m "fix: test"
yarn run v1.22.17
$ npx commitlint -e $GIT_PARAMS
Done in 0.79s.
[feature/PF-16 bee652c] fix: test
 1 file changed, 26 insertions(+), 26 deletions(-)

コミットされました！！

まとめ

いかがでしたか？個人的に初めてhuskyやcommitlintを触ったこともあり、最初の設定で少し苦労しました。
Git hooksやyarnのライフサイクルも知らなかったので、かなり勉強になった部分も大きかったです。
次回は今回の設定をもとに、commitlintのルールを拡張する方法などを記事にしていきたいと思います。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

執筆者プロフィール：Taiga Miwa
受託会社で2年ほど勤務し、Railsを使ったWebアプリの新規開発を主に担当。 Rails, React, Vue, GraphQLなどモダンな技術を使って開発を行っていた。最近SHIFTにジョインし、アーキテクト目指して修行中。得意技はRubyと魚捌き。

【WELCOME】SHIFTではどんなことができるか、ご興味ありませんか？

【FREE】SHIFTのお役立ち資料

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/

みんなにも読んでほしいですか？

オススメした記事はフォロワーのタイムラインに表示されます！

最後まで読んでくださり、ありがとうございます！

御社サービスのご相談はお気軽に。

ソフトウェア品質のプロがお伺いします。