Zenn
🤪

VS Code 拡張機能Gitmojiをカスタマイズしてみる

2024/12/03に公開
Git
VS Code
tech
Gitmoji
tech

https://qiita.com/advent-calendar/2024/puromoku

Gitmojiとは

使用されている絵文字を見るだけでコミットの目的や意図を簡単に識別するためのものです。

例）

  • ⚡️ ホーム画面の画像を遅延読み込みします。
  • 🐛 onClick イベント ハンドラーを修正
  • 🔖 バージョンを 1.2.0 にアップグレード
  • ♻️ (コンポーネント): クラスをフックに変換する
  • 📈 ダッシュボードに分析を追加する
  • 🌐 日本語対応
  • ♿️ (アカウント): モーダル a11y を改善する

使用できる絵文字や絵文字の意味などは、以下に記載されています。

https://gitmoji.dev/

VSCode　拡張機能のGitmojiを利用してみる

https://marketplace.visualstudio.com/items?itemName=seatonjiang.gitmoji-vscode

上記の拡張機能をインストールすると、ソース管理に絵文字が追加され絵文字をクリックするとgitmojiの候補が表示され選択することも可能です。

サンプル動画

https://share.cleanshot.com/W0kmz6V1

VSCode 拡張機能のGitmojiをカスタマイズしてみる

下記のショートカットで設定画面を開き、右上のアイコンをクリックしてsettings.jsonを開く
Mac: command + ,
Windows: Ctrl + ,

settings.jsonにて下記のカスタマイズが可能となります。

カスタム絵文字を追加する

"gitmoji.addCustomEmoji": [
  {
    "emoji": "🎨",
    "code": ":art:",
    "description": "コードの構造を改善する"
  },
  {
    "emoji": "♻️",
    "code": ":recycle:",
    "description": "コードをリファクタリングする"
  },
],

カスタム絵文字のみを利用する

Default: false

"gitmoji.onlyUseCustomEmoji": true,

ショートコードでの絵文字の検索を可能とする

Default: false

"gitmoji.showEmojiCode": true,

コミットの末尾に絵文字を挿入する

Default: false

"gitmoji.asSuffix": true,

まとめ

絵文字の見た目から、どのようなコミットされたのかがぱっと見でわかりやすくなります。
showEmojiCode,onlyUseCustomEmoji,addCustomEmoji これらをカスタマイズすることで、絵文字の検索がしやすくなりコミットするのがたのしくなります！

より良い開発ライフを！！

と言いたいところですが・・・

下記のブログでも書かれている通り、ターミナル上では絵文字が表示されないため見づらくなる欠点がありますので、利用する際は用法・用量を守って正しくお使いください。

https://tech.pepabo.com/2023/08/28/stopped-to-use-gitmoji/

参考資料

https://gitmoji.dev/
https://tech.pepabo.com/2023/08/28/stopped-to-use-gitmoji/
https://zenn.dev/ogakuzuko/articles/a160fdd8b4b3b8
https://zenn.dev/hayato94087/articles/c5fdebc782f964

Discussion