Suprabha Supi
Suprabha's Blog

Follow

Suprabha's Blog

Follow
Validate commit message using Commitlint and husky

Validate commit message using Commitlint and husky

Suprabha Supi's photo
Suprabha Supi
Β·Aug 11, 2021Β·

2 min read

Commit message is very important when you work in team. By reading the conventional commit messages, it helps your team to understand what changes have you done and why. Sometime it's also going to help you when you look back into your codebase 😜

You will be using Commitlint for validating commit message.

commitlint checks if your commit messages meet the conventional commit format.

Let's setup commitlint to your project πŸ€ͺ

Install commitlint

$ yarn add @commitlint/cli

There are few convention we can use:

  1. @commitlint/config-angular
  2. @commitlint/config-conventional βœ…
  3. @commitlint/config-lerna-scopes
  4. @commitlint/config-patternplate

By above convention, let's setup with the second approach

To add config-conventional into project, Install @commitlint/config-conventional:

$ yarn add @commitlint/config-conventional

Now, let's create commitlint.config.js in root of the project:

commitlint.config.js:

module.exports = {extends: ['@commitlint/config-conventional']};

Configuration is picked up from commitlint.config.js or a commitlint field in package.json.

GitHooks with Husky 🐢

It's not dog 🀣

We’re talking about the tool that allows you to set up Git hooks very easily. You can add git hooks in two easy steps:

πŸ‘‰ Install husky as a dev dependency:

  $ yarn add husky

πŸ‘‰ Insert the following code in your package.json:

  {
    "husky": {
      "hooks": {
        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
      }
    }
  }

πŸ‘‰ Add Hook:

$ yarn husky add .husky/commit-msg "yarn commitlint --edit $1"

After adding hook command, you will able to see .husky in root of the project.

That’s it, you have setup husky and commitlint.

Now, At each commit, the command associated with commit-msg will be run. If you commit with wrong commit message, you will get an error.

Your final package.json will look like below snippet:

package.json

{
  "name": "web",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    ...
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    "@commitlint/cli": "^12.0.1",
    "@commitlint/config-conventional": "^12.0.1",
    "husky": "^6.0.0"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}

Note: 🧨 All dependencies related to commitlint, husky should be installed as devDependencies, you don't need to add directly into dependencies.

Reference 🧐


Thanks for reading the article ❀️

Buy Me A Coffee

🌟 Twitter πŸ“š Ebooks 🌟 Instagram

Did you find this article valuable?

Support Suprabha Supi by becoming a sponsor. Any amount is appreciated!

See recent sponsors |Β Learn more about Hashnode Sponsors
Β 
Share this