👀

commitlintというコミットメッセージのリンターを導入してみた(後編:入力補助git-czの導入)

2023/01/16に公開

前編の概要と後編について

以前に前編としてこちらの記事を書きました。
https://zenn.dev/kalubi/articles/27fa889c338cdf

コミットメッセージをリントして、型通りの書き方でないとエラーになりコミットできないという機能でした。

後編ではその型通りに入力するための補助ツールを追加します。

他人と使うことが前提のツールなので、自分だけルールが分かっていて他人が使いにくいというのはナンセンスすぎますので、そのための改善機能を追加します。

コミットメッセージ入力補助「git-cz」

他の人が作ったコミットルールに沿って書くのはしんどいので、選択肢に答えていくだけでコミットメッセージが作られるような仕組みのパッケージを導入します。

今回は「git-cz」というパッケージを使用します。

そもそもこのgit-czというのはcommitizenという同じくコミットメッセージ入力補助パッケージのラッパーだそうです。
下記の記事に詳しく書かれています。こちらの記事を読む限りcommitizenより使いやすそうだったので、git-czを選定しました。
https://zenn.dev/ttskch/articles/a998c125756ab6

git-czの導入

前編と同様、導入手順を紹介します。
https://github.com/streamich/git-cz

インストール

公式リポジトリ通りにグローバルでインストールしました。

npm install -g git-cz

グローバルを汚染したくない場合は下記記事を参照してください。
https://soudai-s.com/align-commit-messages-by-conventional-commits

設定ファイルの追加

カスタマイズ用の設定ファイルを追加することができます。
changelog.config.jsまたはchangelog.config.jsで作成します。
https://github.com/streamich/git-cz#custom-config

デフォルトでは英語なので一部日本語にして分かりやすくします。
絵文字も好きなものに変更します。
PCから絵文字を選ぶ際は下記サイトがおすすめです。
https://lets-emoji.com/emojilist/emojilist-1/

以下はお試しでカスタマイズしたものです。自分の環境に合わせて色々カスタマイズしてみてください。

changelog.config.js
module.exports = {
  disableEmoji: false,
  format: '{type}{scope}: {emoji}{subject}',
  list: [
    'chore',
    'ci',
    'config',
    'docs',
    'feat',
    'fix',
    'package',
    'perf',
    'refactor',
    'release',
    'style',
    'test',
  ],
  maxMessageLength: 64,
  minMessageLength: 3,
  questions: [
    'type',
    'scope',
    'subject',
    'body',
    'breaking',
    'issues',
    'lerna',
  ],
  scopes: ['なし', 'API', '環境構築', '設定ファイル', '型ファイル'],
  types: {
    chore: {
      description: 'ビルド関連や補助ツールの変更',
      emoji: '🤖',
      value: 'chore',
    },
    ci: {
      description: 'CI関連の変更',
      emoji: '🎡',
      value: 'ci',
    },
    config: {
      description: '設定ファイル',
      emoji: '⚙',
      value: 'config',
    },
    docs: {
      description: 'ドキュメントの更新',
      emoji: '✏',
      value: 'docs',
    },
    feat: {
      description: '機能の追加、変更、削除)',
      emoji: '✨',
      value: 'feat',
    },
    fix: {
      description: 'バグ修正',
      emoji: '🐞',
      value: 'fix',
    },
    package: {
      description: 'パッケージ',
      emoji: '📦',
      value: 'package',
    },
    perf: {
      description: 'パフォーマンス改善',
      emoji: '⚡️',
      value: 'perf',
    },
    refactor: {
      description: 'リファクタリング',
      emoji: '🔨',
      value: 'refactor',
    },
    release: {
      description: 'リリース、公開',
      emoji: '🏹',
      value: 'release',
    },
    style: {
      description:
        'コードのスタイル調整(マークアップ、フォーマット、セミコロン、etc)',
      emoji: '👙',
      value: 'style',
    },
    test: {
      description: 'テストコードの変更',
      emoji: '🧪',
      value: 'test',
    },
  },
  messages: {
    type: 'コミットする内容はどの型ですか:',
    scope: 'コミットが影響するスコープを選んでください:',
    subject: '変更内容を簡潔に書いてください:\n',
    body: '変更内容の詳細があれば書いてください:\n ',
    breaking: '重要な変更があれば書いてください:\n',
    issues: 'このコミットで閉じるIssuesがあれば書いてください。例: #123:',
  },
};

テスト

前編と同様、まずは何かしらの変更をステージングします。

そうしましたらgti czをコマンドで実行します(グローバルインストールの場合)

イイ感じにコミットできましたね!

型とタイトル以外は任意なので、特に記述がない場合はエンターでスキップできます。

ちなみにscopesは任意なので空にしても大丈夫です。
空にするとscopesの質問はされなくなります。(今回だと「scope: 'コミットが影響するスコープを選んでください:'」の部分)

これでチームで初めてcommitlintを使う仲間もすぐに使えることができそうですね!

参考

https://github.com/streamich/git-cz
https://soudai-s.com/align-commit-messages-by-conventional-commits
https://zenn.dev/ttskch/articles/a998c125756ab6

Discussion