DEV Community

Cover image for Make everyone in your project write beautiful commit messages using commitlint and commitizen 🚀
Sohan Dutta
Sohan Dutta

Posted on

Make everyone in your project write beautiful commit messages using commitlint and commitizen 🚀

#github #node #commit

When working on a project many people don't have the time to write meaningful commit messages. For me, I have to work with many other developers which involve reviewing their commits, reviewing merge requests, creating and fixing stuff, etc. And all that simultaneously for multiple projects. Often their commit message does not describe what changes did they did in that current commit, and I have to dig through their code to understand that, and it can be a nightmare sometimes.

Even if they write a good message, many people have their own style or convention of writing their commit messages. To solve this particular problem I started using commitlint along with commitizen so that my team adheres to a commit convention.

Sneak peek to the end result 👇
commitizen

Step 1: Setup husky and commitlint

Firstly, you will need husky, which is used for writing git hooks. See More

Install husky to your project.

npx husky-init && npm install
Enter fullscreen mode Exit fullscreen mode

or, if you prefer yarn like me

npx husky-init && yarn
Enter fullscreen mode Exit fullscreen mode

Next, we are going to install commitlint and commitlint-config-gitmoji

yarn add -D @commitlint/cli commitlint-config-gitmoji
Enter fullscreen mode Exit fullscreen mode

or,

npm install --save-dev @commitlint/cli commitlint-config-gitmoji
Enter fullscreen mode Exit fullscreen mode

The @commitlint/cli will be used to check if our commit message follows the convention we configured for the project and the commitlint-config-gitmoji is the commit convention preset we will be using. There are other conventions as well which you can use.

The commitlint-config-gitmoji follows the below convention.

You need to provide a emoji (or gitmoji) then a type, following a scope (not mandatory), and then the subject, which is your actual commit message. You can add a body and footer too if you like.

:gitmoji: type(scope?): subject
body?
footer?
Enter fullscreen mode Exit fullscreen mode

Example,

✨ feat(api): add middleware for user authentication

Now, we need to define the commitlint config for our project. Create a file named commitlint.config.js and define your config given below.

module.exports = {
  extends: ['gitmoji'],
  rules: {
    'header-max-length': [0, 'always', 100],
  },
};
Enter fullscreen mode Exit fullscreen mode

You can customize the rules of your commit message per you like similarly to eslint. See here

Step 2: Add commitlint checking as a git hook

Next, we need to add commitlint as a git hook using husky to check our commit message before every commit. To do this run the below command.

yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"'
Enter fullscreen mode Exit fullscreen mode

OR

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
Enter fullscreen mode Exit fullscreen mode

This will create a file named commit-msg inside your project inside .husky folder.

Note: husky by default creates a pre-commit file, which runs npm test. If you don't have a test script defined in your package.json it will throw an error. You can remove the npm test line from the pre-commit file or add a valid test script.

Now try to do a commit 😏

image.png

Well now my fellow teammates cannot commit unless they write a proper commit message 😈.

commitlint prevents us from doing a commit if the commit message does not adhere to the structure provided by commitlint-config-gitmoji.

Step 3: Adding commitizen cli for composing commit messages

Coming to the last part, now we will create a CLI helper to generate the commit message using commitizen. Also we are using cz-customizable to customize the CLI helper.

yarn add -D commitizen cz-customizable
Enter fullscreen mode Exit fullscreen mode

OR

npm install --save-dev commitizen cz-customizable
Enter fullscreen mode Exit fullscreen mode

Next, add a commitizen config in your package.json like below

{
  ....
  "devDependencies": {
    ...,
  },
  "config": {
    "commitizen": {
      "path": "cz-customizable"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Now create a file in your root folder named .cz-config.js to customize the options of the CLI helper, and paste the below config.

module.exports = {
  types: [
    { value: ':sparkles: feat', name: '✨ feat:\tAdding a new feature' },
    { value: ':bug: fix', name: '🐛 fix:\tFixing a bug' },
    { value: ':memo: docs', name: '📝 docs:\tAdd or update documentation' },
    {
      value: ':lipstick: style',
      name: '💄 style:\tAdd or update styles, ui or ux',
    },
    {
      value: ':recycle: refactor',
      name: '♻️  refactor:\tCode change that neither fixes a bug nor adds a feature',
    },
    {
      value: ':zap: perf',
      name: '⚡️ perf:\tCode change that improves performance',
    },
    {
      value: ':white_check_mark: test',
      name: '✅ test:\tAdding tests cases',
    },
    {
      value: ':truck: chore',
      name: '🚚 chore:\tChanges to the build process or auxiliary tools\n\t\tand libraries such as documentation generation',
    },
    { value: ':rewind: revert', name: '⏪️ revert:\tRevert to a commit' },
    { value: ':construction: wip', name: '🚧 wip:\tWork in progress' },
    {
      value: ':construction_worker: build',
      name: '👷 build:\tAdd or update regards to build process',
    },
    {
      value: ':green_heart: ci',
      name: '💚 ci:\tAdd or update regards to build process',
    },
  ],

  scopes: [
    { name: 'ui' },
    { name: 'android' },
    { name: 'ios' },
    { name: 'home' },
    { name: 'planner' },
    { name: 'settings' },
  ],

  scopeOverrides: {
    fix: [{ name: 'merge' }, { name: 'style' }, { name: 'test' }, { name: 'hotfix' }],
  },

  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'],
  // skip any questions you want
  skipQuestions: ['body'],
  subjectLimit: 100,
};
Enter fullscreen mode Exit fullscreen mode

Also, add a npm script to run the commitizen cli.

{
  "scripts": {
    ...,
    "cm": "cz"
  },
  "dependencies": {
    ...
  }
}
Enter fullscreen mode Exit fullscreen mode

You can modify the config as per your choice. See here

Now run the script to see commitizen in action.

yarn cm
Enter fullscreen mode Exit fullscreen mode

OR

npm run cm
Enter fullscreen mode Exit fullscreen mode

Ta-da, now you and everyone in your team can easily write beautiful conventional commit messages.

image.png

Top comments (4)

Collapse
 
sbin0819 profile image
sbin •

Thanks a lot :)

Collapse
 
orefalo profile image
Olivier Refalo •

Liked your articled.
I standardized around cz-customizable which I found is a better alternative especially in standalone mode.

Collapse
 
orefalo profile image
Olivier Refalo •

sorry.. I meant to say : that standalone mode for cz-customizable is great

Collapse
 
omergronich profile image
Omer Gronich •

Awesome.