✨VS Code + gitmoji でコミットメッセージにササッと絵文字をつけよう✨

## 👀 gitmojiって？

gitのコミットメッセージに絵文字をつけて、コミットの変更内容を把握しやすくする取り組みです。

https://gitmoji.dev/

[CLIツール](https://github.com/carloscuesta/gitmoji)や[VS Codeの拡張機能](https://marketplace.visualstudio.com/items?itemName=seatonjiang.gitmoji-vscode)が提供されています。

コミットメッセージをかわいく装飾できちゃいます💐

![利用イメージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/371897/a2ce7ffa-b239-a775-d847-0146d43cbe5a.png)

## 🎨 VS Codeでgitmojiを使う

拡張機能を入れると、VS Code上でも簡単にgitmojiの絵文字を挿入することができます。

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

![使用例.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/371897/0cfbf03d-cdf9-7ab7-3d7c-d2206b03c117.gif)

デフォルトで日本語化されていて、どの顔文字を使えばいいかわかりやすいですね！

### 🎲 絵文字の内容をカスタマイズする

デフォルトの状態でも十分使い勝手がいいですが、個人開発や小規模なチームで使うには、いささか絵文字の数が多いかもしれません。
そんな時は、拡張機能の設定からカスタマイズが可能です。
私の開発チームでは、以下のような設定を行なっています。

```jsondoc:.vscode/settings.json
{
    // gitmoji
    "gitmoji.outputType": "code",       // 文字列形式で絵文字を出力する
    "gitmoji.onlyUseCustomEmoji": true, // カスタマイズした絵文字のみ表示する
    "gitmoji.addCustomEmoji": [         // 絵文字のカスタマイズ
        {
            "emoji": "✨",
            "code": ":sparkles:",
            "description": "新機能"
        },
        {
            "emoji": "🐛",
            "code": ":bug:",
            "description": "バグ修正"
        },
        {
            "emoji": "♻️",
            "code": ":recycle:",
            "description": "リファクタリング"
        },
        {
            "emoji": "💄",
            "code": ":lipstick:",
            "description": "UI/UX"
        },
        {
            "emoji": "✅",
            "code": ":white_check_mark:",
            "description": "自動整形"
        },
        {
            "emoji": "⚰️",
            "code": ":coffin:",
            "description": "削除"
        },
        {
            "emoji": "📚",
            "code": ":books:",
            "description": "ドキュメント"
        },
        {
            "emoji": "🔍️",
            "code": ":mag:",
            "description": "SEO改善"
        },
        {
            "emoji": "⚡️",
            "code": ":zap:",
            "description": "パフォーマンス改善"
        },
        {
            "emoji": "💚",
            "code": ":green_heart:",
            "description": "テスト"
        },
        {
            "emoji": "📦️",
            "code": ":package:",
            "description": "パッケージ"
        },
        {
            "emoji": "⏪️",
            "code": ":rewind:",
            "description": "リバート"
        },
        {
            "emoji": "🔀",
            "code": ":twisted_rightwards_arrows:",
            "description": "マージ"
        },
        {
            "emoji": "🚧",
            "code": ":construction:",
            "description": "WIP"
        },
        {
            "emoji": "🧑‍💻",
            "code": ":technologist:",
            "description": "開発環境"
        },
        {
            "emoji": "🚀",
            "code": ":rocket:",
            "description": "本番リリース"
        }
    ]
}
```

シンプルな表示になるので、ビギナーの方にも使いやすいと思います。

![カスタマイズ後の使用例.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/371897/09798409-bc67-34b9-1a03-f63205e03bc9.gif)

## 👍 gitmojiをもっと活用しよう！

コミットメッセージが華やかになったり、コミットの分類を意識して開発ができるようになります。
それでは、みなさまよい絵文字ライフを🎉

## 📝 この記事は…

:christmas_tree:[ディップ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/dip-dev)の14日目の記事でした:christmas_tree:
他の記事もぜひご覧ください！

https://qiita.com/advent-calendar/2023/dip-dev

次の記事はこちら⬇️

https://qiita.com/sykaaamm/items/501f1f1404e08731dc59

https://qiita.com/igami/items/94e69db9798976e1c198