🙆♀️
コミットメッセージを自動で最適化するツールcommitzenの導入方法
統一感のない適当なコミットメッセージから抜けろ
チーム開発時の適当なコミットメッセージを書いてしまうことありませんか?
:::note warn
統一性のない適当なコミットメッセージ
:::
コミットメッセージのフォーマットを統一するためには、"Conventional Commits"という規約が有効です
簡単に言うとこう言うフォーマットにしましょうと言うもの
<type>[optional scope]: <description>
[optional body]
[optional footer(s)]
今回はこのフォーマットに自動でcommitしてくれるツールを導入する方法をお伝えします
ぜひ統一感のあるコミットメッセージを開発で使いGit生活を役立ててください
自動でコミットメッセージが規約に沿っているかをチェックするツール
まずはフォーマッターを入れます
npm install --save-dev @commitlint/cli @commitlint/config-conventional
package.json内に追記↓
"commitlint": {
"extends": [
"@commitlint/config-conventional"
]
}
git commit -m "規約に沿っていないコミットメッセージ"
実際に規約に沿っていないメッセージを入れると教えてくれます
% npx commitlint --from=HEAD~1 [firebase]
⧗ input: 規約に沿っていないコミットメッセージ
✖ 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
commit時に自動でチェックをする
毎回やるのは面倒くさいので自動でチェックしてもらいましょう
今回はこちらを使います
インストールをして
npm install husky --save-dev
実行
npx husky init
※scripts の prepare は特殊で、npm install の前に自動で実行されます。
npx husky-init && npm install
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
これでコミット時に自動チェック
:::note alert
この時出力される./husky/pre-commitファイルは削除しましょう
エラーの原因です
:::
プロンプトから実行する
インストール
npm install --save-dev commitizen
npx commitizen init cz-conventional-changelog --save-dev --save-exact
package.jsonに追記↓
"scripts": {
"commit": "cz",
#面倒臭い人は"commit": "git add . && cz && git push"
}
下記コマンドで実行可能
npm run commit
実際に使ってみる
% npm run commit
? Select the type of change that you're committing: fix: A bug fix
# コミットの種類を選択してください
feat: A new feature #新しい機能
> fix: A bug fix #バグ修正
docs: Documentation only changes #ドキュメンテーションのみの変更
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) #コードの意味に影響を与えない変更(空白、フォーマット、セミコロンの不足など)
refactor: A code change that neither fixes a bug nor adds a feature #バグを修正せず、新しい機能を追加しないコードの変更
perf: A code change that improves performance #パフォーマンスを向上させるコードの変更
test: Adding missing tests or correcting existing tests #不足しているテストの追加または既存のテストの修正
build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm) #ビルドシステムまたは外部の依存関係に影響を与える変更(例: gulp、broccoli、npm)
ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs) #CI構成ファイルおよびスクリプトへの変更(例: Travis、Circle、BrowserStack、SauceLabs)
chore: Other changes that don't modify src or test files #ソースまたはテストファイルを変更しないその他の変更
revert: Reverts a previous commit #以前のコミットを元に戻す
? What is the scope of this change (e.g. component or file name): (press enter to skip)
# 変更のスコープは何ですか(例: コンポーネントまたはファイル名): (Enter キーを押してスキップ)*Enter推奨
? Write a short, imperative tense description of the change (max 95 chars):
(16) git commit 時にも適応
# 変更の簡潔で命令的な説明を入力してください(最大 95 文字):*必須
? Provide a longer description of the change: (press enter to skip)
# 変更の詳細を提供してください(Enter キーを押してスキップ)*Enter推奨
? Are there any breaking changes? No
# 重大な変更がありますか?
? Does this change affect any open issues? No
# この変更は既存の問題に影響しますか?
適当なコミットメッセージを入力すると
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 hook exited with code 1 (error)
きちんとエラーが発生します
コミットメッセージをテンプレート化してより良いチーム開発を!
参考文献
Discussion