Zenn
✍️

Commit Message Editorを日本語化して快適にコミットメッセージを書こう！

に公開
VS Code
VS Code 拡張機能
commit
Cursor
commitmessage
tech

はじめに

コミットメッセージを書くたびに「今回はどう書こう…」と手が止まっていませんか？
VS Code／Cursor の拡張機能 『Commit Message Editor』 を使えば、日本語フォームのテンプレートでサクッと入力でき、個人開発でも毎回同じ書式を自動で維持できます。
チーム開発でも全員が同じルールを守れるので、履歴が読みやすくなりレビューもスムーズ。
本記事では、導入手順をわかりやすく解説します。

記事の後半では、すぐに使えるサンプルJSONファイルもご用意。(JSONを読み込む)
JSONファイルの編集が面倒に感じる方は、記事冒頭で紹介している「完成イメージ」と同じフォームが簡単に再現できるよう、私が作成したJSONファイルをワンクリックでローカルにダウンロードできるようにしていますので、ぜひご活用ください！

完成イメージのフォームをそのまま導入したり、ご自身のプロジェクトに合わせて自由にカスタマイズしてみてください。

https://marketplace.visualstudio.com/items/?itemName=adam-bender.commit-message-editor

完成イメージ：日本語フォームで迷わず書けるコミットメッセージ

完成
完成(画像はVScode)

プルダウン
プルダウン(画像はVScode)

実際の使用例
使用例(画像はVScode)

使用例をコミットすると以下のコミットメッセージになります。

feat(auth): パスワードリセット機能を追加

ユーザーがメールリンクからパスワードを再設定できるようにしました。
- トークン発行 API と検証 API を実装
- 失効時間は 30 分
- UI はモバイル対応済み

FJSK-1234

拡張機能を入れる

拡張機能の入れ方

  • まだ入れていない場合は、左側の「四つの四角マーク」→検索窓に
    Commit Message Editorと打ってインストール。

  • インストール後、VS Code または Cursor を一度再起動することで、確実に反映されます。

設定ページを開く

設定ページを開く

  • Ctrl + Shift + P（Macは⌘ + Shift + P）でコマンドパレットを開き、
    Commit Message Editor: Open Settings Pageを選択。

現在の設定をエクスポート

エクスポートの仕方

  • 設定ページ右上の Export ボタン → 任意の場所にcommit-editor.jsonなどの名前で保存。
  • ファイルの中身は「ひな形」なので壊しても大丈夫。

JSONを日本語に書きかえる

  • 保存したJSONを開くと、下記のような部分があります。（短く抜粋）
JSON
{
  "label": "Type",
  "name": "type",
  "type": "enum",
  "options": [
    { "label": "feat", "description": "A new feature" }
  ]
}
  • label / description を日本語に変更すればフォームの見出しや説明が日本語になります。
例：JSON
{
  "label": "種類",
  "name": "type",
  "type": "enum",
  "options": [
    { "label": "機能追加 (feat)", "description": "新しい機能" }
  ]
}
  • 同じ要領で他の項目も好きな文言に変更。
  • さらに並び順や必須／任意を変えたいときは、tokens配列の順番やmultiline,maxLengthなどを調整。
  • テンプレートそのものを変えたいときは、dynamicTemplate配列を編集。（1 行が 1 段）

JSONを読み込む

JSONを読み込み方

  • 設定ページに戻り Import → 先ほど直した JSON を選択。
  • Saveを押す。
  • 完成イメージと同様のフォームをご利用になりたい方は、下記のファイルをご活用ください。
    すぐに使えるサンプルJSONファイル
    (クリックすると、ファイルが即時にローカルへダウンロードされます。)

動作確認

完成図

  • 左側のソース管理（枝アイコン）を開き、鉛筆アイコン✏️を押す。
  • 「Edit as form」タブを選択し、日本語ラベルのフォームが表示されていれば成功！
  • もし日本語ラベルのフォームが表示されていない場合は、VS Code または Cursor を一度再起動していただくことで、確実に反映されます。

さいごに

最後までお読みいただき、ありがとうございます！
こちらは初めての記事となりますので、アカウントのフォローや記事への「Like」、保存、コメントなどをいただけますと、今後の励みになります。
今後ともどうぞよろしくお願いいたします！

Discussion