Validate commit message using Commitlint and husky
Tags: javascript, beginners, webdev, tutorial
Published: 2021-04-01 13:36:37


<p><span class='first-letter'>C</span>ommit 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 <mark>Commitlint</mark> for validating commit message.</p>

<p>commitlint checks if your commit messages meet the <a href="https://www.conventionalcommits.org/en/v1.0.0/">conventional commit format</a>.</p>

**Install commitlint:**

```sh
$ yarn add @commitlint/cli
```

There are few convention we can use:
1. <a href="https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/config-angular"> @commitlint/config-angular </a>
2. <a href="https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/config-conventional"> @commitlint/config-conventional </a> ✅
3. <a href="https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/config-lerna-scopes"> @commitlint/config-lerna-scopes </a>
4. <a href="https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/config-patternplate"> @commitlint/config-patternplate </a>


To add config-conventional into project,

Install `@commitlint/config-conventional`:
```sh
$ yarn add @commitlint/config-conventional
```

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

<u>commitlint.config.js:</u>
```js
module.exports = {extends: ['@commitlint/config-conventional']};
```

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

## GitHooks with <mark>Husky</mark> 🐶

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:

  ```sh
  $ yarn add husky
  ```

- Insert the following code in your `package.json`:

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

- Add Hook
```sh
$ yarn husky add .husky/commit-msg "yarn commitlint --edit $1"
```

After running above command, you will able to see <mark>.husky</mark> 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:

<ImgPost src={Post} alt='Post Blog' />

Your final `package.json` will look like below snippet:

<u>package.json</u>

```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 should be installed as development dependencies, you don't need to add directly into dependencies.

### Reference 🧐

- <a href='https://github.com/conventional-changelog/commitlint'>Conventional Changelog Commitlint</a>

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>