Validate commit message using Commitlint and husky

Suprabha - Apr 1 '21 - - Dev Community

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.

Install commitlint:

$ yarn add @commitlint/cli
Enter fullscreen mode Exit fullscreen mode

There are few convention we can use:

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

To add config-conventional into project,

Install @commitlint/config-conventional:

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

Create commitlint.config.js in root of the project:

commitlint.config.js:

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

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
Enter fullscreen mode Exit fullscreen mode
  • Insert the following code in your package.json:
  {
    "husky": {
      "hooks": {
        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode
  • Add Hook
$ yarn husky add .husky/commit-msg "yarn commitlint --edit $1"
Enter fullscreen mode Exit fullscreen mode

After running above command, you will able to see .husky in root of the project.

Thatโ€™s all. At each commit, the command associated with commit-msg will be run. If you commit with wrong commit message, you will get below error as below:

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"
    }
  }
}


Enter fullscreen mode Exit fullscreen mode

Note: ๐Ÿงจ

All Dependencies should be installed as development dependencies, you don't need to add directly into dependencies.

Reference ๐Ÿง

๐ŸŒŸ Twitter ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป suprabha.me ๐ŸŒŸ Instagram
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player