チーム開発をしていて「commitにルールを持たせたいな」と思うことがあります。
commitlint というツールを入れるとそれが可能になり、
更にhuskyと組み合わせることでコミット時にルールから外れている事を警告してくれるようになります！
検証した環境
| 1 | @commitlint/cli | 19.2.1 |
| 2 | @commitlint/config-conventional | 19.1.0 |
| 3 | husky | 9.0.11 |
インストールと設定
公式ページの記載方法を参考に設定していきます
パッケージと設定ファイルを用意します
npm install -D @commitlint/{cli,config-conventional}module.exports = {
extends: ['@commitlint/config-conventional']
};これで commitlint が使えるようになっています！
commitlint はデフォルトだとcommitのルールとして有名なangular.jsのものを採用しています
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>以下2項目が必須となっているため
- type
- feat, fix などangular.jsで指定されているものを記載
- 詳細は後述
- subject
feat: コミットタイトル のようなコミット内容でもルールに則っています
そして commitlint は文字列に対し「コミットのルール通りになっているか？」を検証するため
echoで試す事が可能です
# ルールに適用出来ていない場合
# typeやsubjectが存在しないことを怒られる
$ echo "foo" | npx commitlint
⧗ input: foo
✖ subject may not be empty [subject-empty]
✖ type may not be empty [type-empty]
✖ found 2 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
# ルールに適用出来ている場合、警告が表示されない
$ echo "feat: foo" | npx commitlinthuskyの設定
commitlintを使用出来る環境が出来たので、
次に、huskyを使ってコミットを行う前に commitlint を実行し、コミットメッセージがルール通りになっているか？ を試していきます。
huskyは commitの実行前・gitへのpush前 などに
自分の好きなコマンドを実行する事が出来るようになるライブラリです！
設定方法が公式にしっかり書いてあるのでこちらを参考に
まずhuskyをインストール
npm install -D huskyそして、commitをする時にhuskyが起動するようにします
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg.husky/commit-msg というファイルに記述をすると、
コミットをする直前に指定したコマンドを実行出来ます
ここまで設定してcommitを試してみると
# ルールに適用出来ていない場合（コミットに失敗）
$ git commit -m "test"
⧗ input: test
✖ subject may not be empty [subject-empty]
✖ type may not be empty [type-empty]
✖ found 2 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
husky - commit-msg script failed (code 1)
# ルールに適用出来ている場合（正常にコミット出来る）
$ git commit -m "chore: test"
[main fe0e1c6] chore: test
1 file changed, 6 insertions(+), 1 deletion(-)commitlintが機能するようになりました！🎉
tigのようなCUIツールを使っても問題なくcommitlintが効きます
commitlintのルールを変更する
前述通り commitlint はデフォルトだとcommitのルールとして有名なangular.jsのものを採用しています
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>typeに指定出来るのは以下のようになっています
| type | 説明 |
|---|---|
| feat | 新しい機能を追加する |
| fix | バグを修正する |
| docs | ドキュメントのみの変更 |
| style | コードの意味に影響を与えないスタイルの変更（空白、フォーマット、セミコロンの欠落など） |
| refactor | バグの修正や機能の追加を伴わないコードのリファクタリング |
| perf | パフォーマンスを向上させるコード変更 |
| test | テストの追加や既存テストの修正 |
| chore | ビルドプロセスや補助ツール、ライブラリーの更新など、生産コードに影響を与えない変更 |
元々、ライブラリ開発用のtypeになるため、
web開発などで使おうとすると正直「使わないなぁ」「どれでもない気がする…」というケースが出てきます
そのためtypeを以下のように変更してみます
| type | 説明 |
|---|---|
| add | 追加 |
| update | 更新 |
| fix | 修正 |
| refactor | リファクタリング |
| chore | その他の対応 |
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [2, 'always', ['add', 'update', 'fix', 'refactor', 'chore']],
},
}設定したtypeが指定出来るようになりました！
# typeが合っている場合は怒られない
$ git commit -m "add: test"
[main c9611ab] add: test
1 file changed, 6 insertions(+), 1 deletion(-)
$ git commit -m "chore: test"
[main 2fbfe4b] chore: test
1 file changed, 6 insertions(+), 1 deletion(-)
# typeが指定したものから外れている場合エラーとなる
$ git commit -m "feat: test"
⧗ input: feat: test
✖ type must be one of [add, update, fix, refactor, chore] [type-enum]
✖ found 1 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
husky - commit-msg script failed (code 1)
