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

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

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

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

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

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

参考文献