3
3

コミットメッセージを自動で最適化するツールcommitzenの導入方法

Last updated at Posted at 2024-03-11

統一感のない適当なコミットメッセージから抜けろ

チーム開発時の適当なコミットメッセージを書いてしまうことありませんか?
image.png

統一性のない適当なコミットメッセージ

コミットメッセージのフォーマットを統一するためには、"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}' 

これでコミット時に自動チェック

この時出力される./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)

きちんとエラーが発生します

コミットメッセージをテンプレート化してより良いチーム開発を!

参考文献

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3