How to validate commit message convention using Commitlint and Husky

Commit messages are so important when you’re working with a team, Make other members understand what did you done. So although the team has agreed to a convention, You may found some mistakes sometimes 👀

Here I’ll show How to validate a commit message before doing a commit and make the convention rules.

Lets to understand our dependencies.

💥GitHooks with Husky

Git Hooks is an efficient feature from git to help us execute scripts or programs before or after some events like: Commit, Merge, Push, And others.

So we need to use commit-msg hook to can validate the message.

Why need to use Husky?

You need to set up these hooks inside your project to can ensure other members uses that convention. So Husky comes for rescue
It gives us a configuration to setup it in our package.json.

To install Husky

👉 npm install husky --save-dev

Setup configuration

// package.json
{
  "husky": {
    "hooks": {
      "commit-msg": "excute validation script here"
    }
  }
}

💥CommitLint && Commit CLI

commitlint lint messages based on commons converntions.

By default, it uses Conventional Commits and this is the repo Conventional Commits Repo
Also, you can use another conventions like Angular Commits Convention Or Use Conventions made by contributors like Jira Convention

Install commitlint cli and conventional config
👉 npm install --save-dev @commitlint/{config-conventional,cli}

For Windows:
👉 npm install --save-dev @commitlint/config-conventional @commitlint/cli

Configure commitlint to use conventional config

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

that will create configuration file called commitlint.config.js to setup what convention want to use.

Note: Configuration is picked up from commitlint.config.js or commitlintrc.js or .commitlintrc.json or .commitlintrc.yml file or a commitlint field in package.json

Now You Need To Tell Husky to use Commitlint when commit-msg executes By Edit Husky Object in Package.json

// package.json
{
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}

Now All things are setuped if you run with wrong commit message will give you an error as below

git commit -m "foo: this will fail"
husky > commit-msg (node v10.1.0)
No staged files match any of provided globs.
⧗   input: foo: this will fail
✖   type must be one of [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] [type-enum]

✖   found 1 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky > commit-msg hook failed (add --no-verify to bypass)

For more detailed setup Instruction

1. Local Setup
2. CI Setup

Note: All Dependencies installed as Development Dependencies you Don't need to take it to production

See DEMO

Comments

[Se-ok Jeon]

Thx for this! This is really what I wanted. Helped A LOT.
Can I translate in Korean this post? If you don't mind, I wanna share this awesome post in Korean. Surely, There will be a linke directing to this original post.

[Omar Ghazi]

Sure