DEV Community

Cover image for Your commits refined with Commitizen and Commitlint
Edson Junior de Andrade
Edson Junior de Andrade

Posted on • Updated on

Your commits refined with Commitizen and Commitlint

Configure and install Commitizen + Commitlint tools


What is Commitizen?

commitizen will guide the developer through a commit. A string of options will be displayed to custom fill in any required fields during the commit.

What is Commitlint?

commitlint will help you keep your commit within the conventions, will validate and indicate errors in your message.

Check the commitment types

Let's install two tools, they are commitlint/config-conventional and commitlint/cli, to install just insert the following command as a development dependency:

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

If necessary update the node, I leave a tutorial in the link below
Updating the Node Version

Now let's create the commitlint.config.js file and add the config-conventional configuration

module.exports = { extends: ["@commitlint/config-conventional"] };
Enter fullscreen mode Exit fullscreen mode

Now that commitlint is ready to be used, we need to inform you that it needs to be executed after the commit request). For this we will integrate the husky (configure husky + lint-staged), the husky is a tool that allows us to create automated functionality based on git commands.

Before installing husky, we need to start git in our project so that the mapping between husky and git is done correctly:

git init
Enter fullscreen mode Exit fullscreen mode

You can perform the installation of husky through this article.

To test, just include a commit so that commitlint will already identify the message that does not follow Conventional Commits standards

git add .

git commit -m "initial commit"
Enter fullscreen mode Exit fullscreen mode

If you followed the steps correctly, at this point an error will appear on the terminal with the details of the incorrect data. From now on you will follow Conventional standards, for example:

git commit -m "feat: add initial configuration"
Enter fullscreen mode Exit fullscreen mode

We've finished setting up commit-lint. (Remembering that you can configure it however you like.)

Now let's configure and install commitizen

To install, let's enter the following command as development dependency

yarn add --dev commitizen cz-conventional-changelog
Enter fullscreen mode Exit fullscreen mode

In package.json add the following line

  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
Enter fullscreen mode Exit fullscreen mode

Now we need to configure the execution, we have two ways.

We can create a script in package.json

"scripts": {
    "commit": "git-cz"
}
Enter fullscreen mode Exit fullscreen mode

Will start the process of a new commit, to commit now just insert

git add .

yarn commit
Enter fullscreen mode Exit fullscreen mode

From now on you will receive the following questions

Select the type of commit, in the example I will select a feature

? Select the type of change you are making: talent: a new resource
Enter fullscreen mode Exit fullscreen mode

Now it will ask you what the scope is, if you want to define where you made the change

? What is the scope of this change (eg component or filename): (press Enter to skip)
Enter fullscreen mode Exit fullscreen mode

Here, it will ask you what the content of your commit is.

? Write a brief and imperative description of the change (max. 66 characters):
> (27) add commitizen configuration
Enter fullscreen mode Exit fullscreen mode

Now it will ask for a more complete description

? Provide a longer description of the change: (press Enter to skip)
> Sample message for description
Enter fullscreen mode Exit fullscreen mode

To break a line, I can insert at the end of the line: \n\ nTest message

Now it will ask if your commit removes something that worked and won't work anymore, some feature for example

? Are there any significant changes? (y/N) No
Enter fullscreen mode Exit fullscreen mode

Now you will be asked if the commit affects any issues that are open in our project? if so, it will ask what questions you want to close...

? Does this change affect any open issues? (y/N) No
Enter fullscreen mode Exit fullscreen mode

Having followed the steps above, your commit will be completed

We can check the process we just did

git log
Enter fullscreen mode Exit fullscreen mode

Latest comments (0)