18
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Commitizen でチームのコミットメッセージの形式を統一する

Posted at

概要

チームで開発しているとコミットの粒度・形式がバラバラになってしまう事があると思います。今回はそんな時に使える Commitizen と そのプラグインである cz-customizable を紹介します。

Commitizen とは チーム向けにコミットメッセージのルールを定義する為のツールで、cz-customizable は Commitizen で独自のルールを定義するためのプラグインになります。

導入すると対話に答えるだけでコミットメッセージの形式を統一する事が出来るようになります。(絵文字かわいい)

スクリーンショット 2022-03-13 21.14.38.png
スクリーンショット 2022-03-13 20.46.26.png

commitizen cz-customizableのインストール

まずは必要になるパッケージをダウンロードしましょう。

npm i -g commmitizen
npm i -D cz-customizable

cz-customizableのセットアップ

cz-customizable をプラグインとして利用するように設定を行います。
package.json に以下を追加してください。

package.json
... 省略
"config": {
  "commitizen": {
    "path": "node_modules/cz-customizable"
  }
}

configファイルの追加

cz-customizable は実行時にプロジェクト直下にある .cz-config.js を設定ファイルとして読み込むので、プロジェクト直下に .cz-config.js というファイルを作って以下を記述してください。

こちらは普段僕が利用している設定で、コミットメッセージのフォーマットは Angular 開発チームのものを参考にしています。
チームのフォーマットに合わせて好きに書き換えてください。(各プロパティの詳しい説明については公式をご確認ください)

.cz-config.js
module.exports = {
  types: [
    {
      value: '🌟 feat',
      name: 'feat: 機能追加',
      title: 'Features',
    },
    {
      value: '🔧 fix',
      name: 'fix: バグの修正',
      title: 'Bug Fixes',
    },
    {
      value: '🗒 docs',
      name: 'docs: ドキュメントのみの変更',
      title: 'Documentation',
    },
    {
      value: '🎨 style',
      name: 'style: コードの動作に影響しない、見た目だけの変更(スペース、フォーマット、欠落の修正、セミコロンなど)',
      title: 'Styles',
    },
    {
      value: '♻️ refactor',
      name: 'refactor: バグの修正や機能の追加ではないコードの変更',
      title: 'Code Refactoring',
    },
    {
      value: '⏫ perf',
      name: 'perf: パフォーマンスを向上させるコードの変更',
      title: 'Performance',
    },
    {
      value: '🧪 test',
      name: 'test: 不足しているテストの追加や既存のテストの修正',
      title: 'Tests',
    },
    {
      value: '🐧 chore',
      name: 'chore: ビルドプロセスやドキュメント生成などの補助ツールやライブラリの変更',
      title: 'Chores',
    },
  ],
  messages: {
    type: 'コミットする変更タイプを選択してください:\n',
    subject: 'コミット内容について入力してください:\n',
    confirmCommit: 'こちらの内容でコミットを実行してよろしいですか?:\n',
    /* ticketNumber: 'チケット番号を入力してください (ない場合はEnter):\n',*/
  },
  skipQuestions: ['scope', 'body', 'breaking', 'footer'],
  allowBreakingChanges: ['feat', 'fix'],
  /* 
  コミットメッセージにチケット番号を追加したい場合コメントを削除
  allowTicketNumber: true,
  isTicketNumberRequired: false,
  ticketNumberPrefix: '',
  ticketNumberRegExp: '',
  */
}

これで commitizen のセットアップは完了です 🎉

commitizen を使ってコミットしてみる

それでは実際に commitizen を使ってコミットしてみましょう!
プロジェクト内で適当なファイルを編集して、git add 五にのコマンドを実行してください。

cz

以下のような選択肢が表示されるので、変更のタイプを選択してEnter。
スクリーンショット 2022-03-13 21.14.38.png

続いてコミットメッセージの入力を求められるので入力してEnter。
スクリーンショット 2022-03-13 21.15.38.png

最後にコミットの内容が正しいか聞かれるので問題なければEnter。
スクリーンショット 2022-03-13 21.16.17.png

すると上記の内容でコミットが実行されます!
スクリーンショット 2022-03-13 21.17.29.png

.cz-config.js には他にも様々なプロパティがあるので、色々試してチームにあった独自のコミットメッセージのフォーマットを作ってみてください!

参考にした記事・サイト

commitizen/cz-cli: The commitizen command line utility. #BlackLivesMatter
https://github.com/commitizen/cz-cli

leoforfree/cz-customizable: A customizable commitizen adapter for https://github.com/commitizen/cz-cli (or standalone util)
https://github.com/leoforfree/cz-customizable

18
16
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
18
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?