Legendary Commits: Conventional with Emoji 👑😵
Tags: git, github, documentation, webdev
Published: 2024-07-16 20:46:32

Writing commit messages is like a daily exercise you have to practice as a programmer.

Even if you are writing code for fun, it's important to realize this small detail reflects your developer personality in general.

![commit message meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjppyi4b8s9rdgljgjw8.jpg)

Writing quality commits is what separates the average developer from the extraordinary one.

**Do this! 👇**

use  **[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)**

> A specification for adding human and machine readable meaning to commit messages

The Conventional Commits spec is like a simple guide for your commit messages. It gives you some easy rules to follow for a clear commit history, making it a breeze to build tools on top of.

The commit message should be structured as follows:


![a good commit message structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc5d3aag122lybhwv73h.png)

you don’t have to memorize this structure...
instead you can use a tool called : **[Commitizen](https://commitizen-tools.github.io/commitizen/)**

Commitizen assumes your team uses a standard way of committing rules and from that foundation, it can bump your project's version, create the changelog, and update files.

**By default**, Commitizen uses **conventional commits**, but you can build your own set of rules, and publish them.

for your **javascript projects** you can use **commmitizen ** npm package : 

```bash
npm i -g commmitizen 
```

**NOTE: **

If you're not working in a Commitizen-friendly repository, then git cz will work just the same as git commit, but npx cz will use the streamich/git-cz adapter.

To fix this, you need to first make your repo Commitizen friendly: 

to achieve this you have to initialize your project to use the cz-conventional-changelog adapter by typing:

```
# npm
commitizen init cz-conventional-changelog --save-dev --save-exact

# yarn
commitizen init cz-conventional-changelog --yarn --dev --exact

# pnpm
commitizen init cz-conventional-changelog --pnpm --save-dev --save-exact
```

After running the command, you’ll see that the Commitizen config is added to the package.json file. 

We used AngularJS’s commit message convention, also known as conventional-changelog, but you can use different adapters as well.

You can see a list of them [here](https://www.npmjs.com/package/commitizen#adapters)

you can now use git cz instead of git commit command :

`git cz`

![git cz preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16kmlwhzcrg625gp1wvl.png)

If you want to go one step further and add some emojis to your messages as well, you can use an adapter called  **[cz-emoji](https://github.com/ngryman/cz-emoji)**

first you have to install the adapter :

`npm i cz-emoji`

After installing the package, put the following configuration in the package.json file:

![cz-emoji config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4tozqh7yk5j14ktiayo.png)

If you run `git cz` again, you’ll probably see something like this:

![Conventional Commits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q88vba8n9ma4log0vym2.png)

Drop some tips on how you write Git commits as a Software Developer!

If you like this post, check out some of my other writings : 

- [CODEOWNERS File: What’s the Buzz?](https://dev.to/silentwatcher_95/codeowners-file-whats-the-buzz-20ga)

- [sendBeacon in JavaScript](https://dev.to/silentwatcher_95/sendbeacon-in-javascript-3pm)

- [OWASP Dependency Check in Node js 🛡️](https://dev.to/silentwatcher_95/owasp-dependency-check-in-node-js-1oo6)

- [Practicing politeness in JavaScript code 🤬](https://dev.to/silentwatcher_95/practicing-politeness-in-javascript-code-535g)