DEV Community

Cover image for Something Someone Somewhere Uses... Sometimes

Posted on • Updated on

Something Someone Somewhere Uses... Sometimes

🌌 Recently I found myself coding in a team and it was decided that all commit messages would begin with an emoji. Gitmoji defines what each emoji means. ✨ or :sparkles: is for a new feature and 💩 or :hanky: is for bad code that needs get the idea. Turns out there are tons of these - I just counted 62. I admit, it adds an element of fun and repos look more stylish. Gitmoji says:

Using emojis on commit messages provides an easy way of identifying the purpose or intention of a commit with only looking at the emojis used.

Normal Gitmoji

So coding begins on this project and the time comes to start making commits. I cruise over to Gitmoji and scroll around trying to find the best available emoji. This ends up taking a while as I learn the system. I also have a problem when I use the Windows 10 emoji tool (windows button + ;) to insert the emoji into the terminal. When the commit message gets to GitHub, the emoji looks like ࢊ aka nothing. So this is becoming a giant waste of time, seriously disturbing my flow, yo.

I was also unaware of gitmoji-cli at this time

Instead of running npm i -g gitmoji-cli, which I still haven't done, I spent the rest of the day making a VS Code extension and not working on my project. I had no idea what I was doing, but VSC is pretty amazing and has a tool to help scaffold an extension.

npm install -g yo generator-code
yo code
Enter fullscreen mode Exit fullscreen mode

The yo installs Yeoman and generator-code is the VSC tool that generates all the files needed for an extension, ➕ a Hello World.

In any event, I found the docs and the api to be user friendly. Another 🤙 radical feature dude, is that VSC will automatically know that the workspace is for extension development (I believe this is based on ~.vscode/launch.json file the code generator makes). Instead of running an npm script or something, just press F5 and a whole new window opens along with a debugger. I feel like a theme is developing of me worshiping my code editor...idk...we spend a lot of time together.

After a few hours I had built a solution to my problem, integrated right into my favorite code editor. It works by having a big list of all the emojis and their definitions available in the command palette. VS Code's api is such that I didn't even have to write the logic for the search, only process the result. Less work, how great is that. Anyways, after an emoji is selected the prompt wants the commit message. All I really do is match the user's selected emoji to the list and roll it all together with a string literal....Then finally everything pops out in the integrated terminal (or creates one).

// pseudo code
const choice = '🚀 Deploying stuff'

const gitmoji = () => {
   if(choice.match('🚀')) return ':rocket:'
const commitText = 'Deploy app to Heroku'`git commit -m ${gitmoji} ${commitText}`)
Enter fullscreen mode Exit fullscreen mode

So the final string in the terminal might be something like:

 git commit -m ':rocket: Deploy app to Heroku'
Enter fullscreen mode Exit fullscreen mode

Then you Hit enter.

Here is a gif that explains it better than I do:

Gitmoji Commit in action

The next step was publishing the extension to the marketplace. Not a big deal. There is a command for that. And 💥, my extension is available to the entire community. After a week or so its been installed 30 something times, not earth shattering, but for where I am at in my career I count anyone using anything I had a hand in as a success. I can only imagine what it feels like to work on a big app with millions of users. My brain would blow a gasket.

At the end of the day providing value to the user is the true purpose of writing software. Though most of the time I just enjoy coming up with ideas and solving problems, lost in my own little world.

So if u feel like giving it a try just search gitmoji commit in extensions.

Pro Tip - instead of going to the palette and selecting the Gitmoji Commit command, map the command straight to a keybinding. I use Ctl/Cmd + K G.

GitHub logo benjaminadk / emojigit

VS Code extension for composing Gitmoji commit messages

Gitmoji Commit

Stop wasting time looking up git commit message emojis. This extension helps you find the right emoji and helps compose your commit message, all without leaving VS Code. You can even supply your own custom emoji mapping to suit the needs of you and/or your team.



Currently, Gitmoji Commit adds two commands to VS Code.

Create Commit Message

Automates creating a commit message by prompting user for the type of commit and commit message text. The type of commit selected determines the emoji. The emoji is inserted into the commit message as either unicode (e.g. ) or as GitHub emoji markdown colon syntax (e.g. :sparkles:).

When the time comes to type…

Top comments (6)

heberqc profile image
Heber Quequejana

Thank you very much. I'm already using it. I would like you to change the (') to (") in the message template, due to some errors that appear when I write commit messages like :construction: test(something): do something

benjaminadk profile image


codemouse92 profile image
Jason C. McDonald

Too bad y'all didn't go retro and just use emoticons. :-)

Thanks for sharing your problem solving process!

As to actually using emojiis in the commit message, I'm a bit torn. On the one hand, it's a brilliant way of visually organizing commits. On the other hand, it sounds like it turned into a bout of yak-shaving. I'll be interested to know what the return-on-(time)-investment is on this.

ashleyjsheridan profile image
Ashley Sheridan

A warning to anyone using emoji in commit messages with a CI system that uses older components: unless every part of your CI process supports the encoding then things won't work as you expect. I've found this out the hard way more than once!

fluffynuts profile image
Davyd McColl

I like gitmoji on the web, but having them as prefixes makes trawling test logs tedious. I'm a firm believer in semantic commit logs, but perhaps I'll chuck some of these in further down the message (:

alevinetx profile image