DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Commitizen + Commitlint
Edson Junior de Andrade
Edson Junior de Andrade

Posted on • Updated on

Commitizen + 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

Now let's install husky as a development dependency

yarn add husky -D
Enter fullscreen mode Exit fullscreen mode

Below we will define that every time the user includes a confirmation message, the husky will execute the commitlint, for that we will include the following code in our package.json

"husky": {
    "hooks": {
        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
}
Enter fullscreen mode Exit fullscreen mode

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 commitizen -D
Enter fullscreen mode Exit fullscreen mode

Let's start to compromise

commitizen init cz-conventional-changelog --yarn --dev --exact
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

We can also configure the husky so that every time I include a git commit I already have this process without having to type yarn commit, I include inside the husk hooks the following line:

"prepare-commit-msg": "exec < /dev/tty && git cz --hook || true"
Enter fullscreen mode Exit fullscreen mode
"husky": {
      "hooks": {
          "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
          "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true"
      }
}
Enter fullscreen mode Exit fullscreen mode

That's it, you've configured the commitlint + commitizen tools, if you want, you can remove the script: yarn commit from your package.json.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.