cft

๐Ÿ”จ [git]: Write better commits with Gitmoji

Gitmoji is an initiative to standardize and explain the use of emojis on GitHub commit messages.


user

Javid Mougamadou

3 years ago | 2 min read

Notes

Gitmoji is an initiative to standardize and explain the use of emojis on GitHub commit messages.

๐Ÿ“ Intro : How to Write a Git Commit Message

In my case, I only read commits when i would like to track commit changes or to dig commit explanation. Otherwise, I directly read the source code.

Here is an example of good git commit message semantic will look like (according to Gist Semantic Commit Messages)

<type> [scope]: "Message"

type must be one of the following mentioned below :

  • <build>: Build related changes (eg: npm related/ adding external dependencies)
  • <chore>: A code change that external user won't see (eg: change to .gitignore)
  • <docs>: Documentation related changes
  • <feat>: Introduction of a new feature
  • <fix>: Resolve an issue directly linked to development (bugfixes)
  • <hotfix>: Resolve an issue directly linked to production (patches)
  • <test>: Add/Update test cases
  • <performance>: Add code that improves performance
  • <refactor>: Update for code for maintainability (clean code)

scope is optional and must be a noun that represents the section of the codebase

Message should be imperative and should describe the commit with a clear message/keywords.

Example of commits :

feat(home, components): Add login button
feat(home, components): Add login modal
fix(home, components): Resolve issue with modal collapses
chore(home): Move icons folder
feat(newsletter): Add Newsletter component
feat(navbar): Add navbar container

๐Ÿš€ Gitmoji

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. As there are a lot of different emojis I found the need of creating a guide that can help to use emojis easier.

Now we can replace the <type/> with an emoji :

๐ŸŽจ Improve structure / format of the code.

โšก๏ธ Improve performance.

๐Ÿ”ฅ Remove code or files.

๐Ÿ› Fix a bug.

โœจ Introduce new features.

๐Ÿ“ Add or update documentation.

๐Ÿš€ Deploy stuff.

๐Ÿ’š Fix CI Build.

๐Ÿ‘ท Add or update CI build system.

๐Ÿ”ง Add or update configuration files.

๐Ÿ”จ Add or update development scripts.

โšฐ๏ธ Remove dead code.

Example of commits :

โœจ (home, components): Add login button
โœจ (home, components): Add login modal
๐Ÿ› (home, components): Resolve issue with modal collapses
๐Ÿšš (home): Move icons folder
โœจ (newsletter): Add Newsletter component
โœจ (navbar): Add navbar container
๐Ÿ”ฅ (navbar): Remove old navbar file
โœ… (home): Add login test case
๐ŸŽจ (home, component): Improve login modal
๐Ÿ“ฆ๏ธ (npm): Add react-table
๐Ÿ”จ Update script start-server.js

Additionnal icons

๐Ÿณ Add Dockerfile
๐Ÿณ Add docker-compose.yml
โ˜ธ๏ธ (helm): Add postgres helm chart
โ˜ธ๏ธ (helm): Update frontend.yaml
โ˜ธ๏ธ (helm): Update pvc.yaml
๐ŸŽ (home): Increase speed load for navbar
๐ŸŽ (home): Fix issue with MacOS for navbar

Link: EmojiPedia

๐Ÿ“ฆ๏ธ Gitmoji-CLI

A gitmoji interactive client for using gitmojis on commit messages.

Installation

With npm :

npm install gitmoji-cli

On MacOS :

brew install gitmoji

Interactive Client

Start the interactive commit client, to auto generate your commit based on your prompts.

gitmoji -c

Hook

Run the init option, add your changes and commit them, after that the prompts will begin and your commit message will be built.

gitmoji -i
git add .
git commit

Search

Search using specific keywords to find the right gitmoji.

gitmoji -s "criteria"

List

Pretty print all the available gitmojis.

gitmoji -l

Config

Run gitmoji -g to setup some gitmoji-cli preferences.

gitmoji config

๐Ÿ”จExtensions (Integration with IDE)

Gitmoji for Vscode

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

Gitmoji for Atom

Go to Settings (cmd + , or ctrl + ,) > Install and search for gitmoji-atom.

Alternatively, run the following command:

apm install gitmoji-atom

Link : https://atom.io/packages/gitmoji-atom

๐Ÿ’ป Integration with DEV.TO ?

Do you think that we can use it while writing posts for Dev.TO ?

๐Ÿณ Docker
โ˜ธ๏ธ Kubernetes
...

Links

Upvote


user
Created by

Javid Mougamadou


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles