🔨 [git]: Write better commits with Gitmoji
Tags: beginners, javascript, productivity, webdev
Published: 2021-04-18 13:07:39

![Image](https://www.bram.us/wordpress/wp-content/uploads/2017/09/gitmoji-560x410.png)

## 📝 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

![Image](https://chris.beams.io/content/images/size/w2000/2021/01/git_commit_2x.png)

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](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716))

```bash
<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 :

```bash
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

![Image](https://user-images.githubusercontent.com/31794680/84195052-3a6d0780-aa9e-11ea-87ed-b39133f40829.gif)

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 :

```bash
✨ (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

```bash
🐳 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](https://emojipedia.org/)

## 📦️ Gitmoji-CLI

![Image](https://cloud.githubusercontent.com/assets/7629661/20454643/11eb9e40-ae47-11e6-90db-a1ad8a87b495.gif)

A gitmoji interactive client for using gitmojis on commit messages.

### Installation

With npm :

```bash
npm install gitmoji-cli
```


On MacOS :

```bash
brew install gitmoji
```

### Interactive Client

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

```bash
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.

```bash
gitmoji -i
git add .
git commit
```

![Image](https://user-images.githubusercontent.com/7629661/41189947-1de56124-6bd6-11e8-9567-e7f1a8e99500.png)

### Search

Search using specific keywords to find the right gitmoji.

```bash
gitmoji -s "criteria"
```

![Image](https://user-images.githubusercontent.com/7629661/41189878-d24a3b78-6bd4-11e8-8d47-c8edf3b87e53.png)

### List

Pretty print all the available gitmojis.

```bash
gitmoji -l
```

![Image](https://user-images.githubusercontent.com/7629661/41189877-d22b145a-6bd4-11e8-97f8-a8e36bcab062.png)


###  Config

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

```bash
gitmoji config
```

![Image](https://user-images.githubusercontent.com/7629661/41189876-d21167ee-6bd4-11e8-9008-4c987502f307.png)

## 🔨Extensions (Integration with IDE)

### Gitmoji for Vscode

![Image](https://cdn.jsdelivr.net/gh/vtrois/gitmoji-vscode@1/images/about.gif)

Link : [https://marketplace.visualstudio.com/items?itemName=Vtrois.gitmoji-vscode](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:

```bash
apm install gitmoji-atom
```

Link : [https://atom.io/packages/gitmoji-atom](https://atom.io/packages/gitmoji-atom)

## 💻 Integration with DEV.TO ?

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

```bash
🐳 Docker
☸️ Kubernetes
...
```

## Links

* [https://emojipedia.org/laptop/](https://emojipedia.org/laptop/)

* [https://gitmoji.dev/](https://gitmoji.dev/)

* [https://github.com/carloscuesta/gitmoji](https://github.com/carloscuesta/gitmoji)

* [https://github.com/carloscuesta/gitmoji-cli](https://github.com/carloscuesta/gitmoji-cli)

* [https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716)

* [https://gist.github.com/robertpainsi/b632364184e70900af4ab688decf6f53](https://gist.github.com/robertpainsi/b632364184e70900af4ab688decf6f53)

* [https://gist.github.com/parmentf/035de27d6ed1dce0b36a](https://gist.github.com/parmentf/035de27d6ed1dce0b36a)

* [https://dev.to/i5han3/git-commit-message-convention-that-you-can-follow-1709](https://dev.to/i5han3/git-commit-message-convention-that-you-can-follow-1709)

* [https://dev.to/helderburato/patterns-for-writing-better-git-commit-messages-4ba0](https://dev.to/helderburato/patterns-for-writing-better-git-commit-messages-4ba0)

* [https://chris.beams.io/posts/git-commit/](https://chris.beams.io/posts/git-commit/)