Emojify Conventional Commits with Git

3 minute read Published

Reward yourself with an emoji anytime you make a conventional commit.

There’s got to be at least 1000 tutorials that’ll teach you how to add emojis to your conventional commits. Many of them will tell you to install 3rd party tools like Husky or Yorkie which can clutter up a repo with development cruft, or have you hacking up your package.json with stuff that isn’t in the spec.

For the longest time I was using npx git-cz aliased on my machine until I realized what I was doing was no safer than piping curling to shell. After looking around I found a better way to add commit emojis. And the method I’ll share is much more friendly for contributors to a project as it doesn’t force THEM to use YOUR specific approach to development.

Note: A reason for using conventional commits is for automatic changelog generation. There are other methods however such as using changesets.

A better way to add emojis

There’s a nice little, multi-purpose CLI tool called devmoji which can be combined with a custom git hook to automatically add emojis whenever git sees you’re preparing a commit. Install it using your package manager of choice:

npm install -g devmoji # or pnpm, yarn etc...

Once installed run devmoji --list for a list of available emojis:

Available Devmoji
✨   :feat:          feat: a new feature
🐛   :fix:           fix: a bug fix
📚️   :docs:          docs: documentation only changes
🎨   :style:         style: changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
♻️   :refactor:      refactor: a code change that neither fixes a bug nor adds a feature
⚡️   :perf:          perf: a code change that improves performance
🚨   :test:          test: adding missing or correcting existing tests
🔧   :chore:         chore: changes to the build process or auxiliary tools and libraries such as documentation generation
🚀   :chore-release: chore(release): code deployment or publishing to external repositories
🔗   :chore-deps:    chore(deps): add or delete dependencies
📦️   :build:         build: changes related to build processes
👷   :ci:            ci: updates to the continuous integration system
🚀   :release:       code deployment or publishing to external repositories
🔒️   :security:      Fixing security issues.
🌐   :i18n:          Internationalization and localization.
💥   :breaking:      Introducing breaking changes.
⚙️   :config:        Changing configuration files.
➕   :add:           add something
➖   :remove:        remove something

Use it inside a git project by creating an executable git hook:

echo -e "#\!/bin/sh\n\nCOMMIT_MSG_FILE=\$1\nCOMMIT_MSG=\$(cat \$COMMIT_MSG_FILE)\n\necho \"\${COMMIT_MSG}\" | devmoji > \$1" > .git/hooks/prepare-commit-msg
chmod +x .git/hooks/prepare-commit-msg

Then simply create a conventional commit:

echo -e "\n.env\n.env.*\n\!.env.example" >> .gitignore
git add .gitignore
git commit -m "chore(security): keep secrets out of source control"

And your commit hook will automatically emojify your commit message:

chore(security): 🔧 🔒️ keep secrets out of source control

That’s all there is to it.