How to Lint Commit Messages with Husky and CommitLint

Take your commits to the next level with CommitLint

Photo by Brett Jordan on Unsplash

Introduction

How many times have you come across a git log that looks like this?

More than you’d like, right? We developers have a tendency to become lazy, and not put much effort into things we don’t consider important (which is mostly everything outside of our code). However, it is absolutely impossible to understand what is going on in our repository from these undecipherable commits. This makes it very difficult for teams to work together effectively.

So, if maintaining a clean git log is so important, how do we do it? How can we force ourselves to write better, cleaner and semantic commits which are easy to understand at a glance?

Behold, the ultimate commit linting tool: CommitLint.

This tutorial will show you how to install and configure CommitLint, together with Husky.

Index

• Installing CommitLint
• Installing Husky
• Testing

Installing CommitLint

CommitLint is a commit linting tool that will force us to write beautiful commits. How does it do this?

CommitLint works with something called conventions, which are basically a series of rules that our commits need to follow. If we try to make a commit that doesn’t follow the convention that we choose, it will fail. You can find a list of all of the available conventions here. For this tutorial, I’ll use the conventional commits specification, which is based on the angular convention. It looks like this:

type(scope?): message

To install both CommitLint and config-conventional, let’s run the following command:

npm i -D @commitlint/{cli,config-conventional}

To use the config-conventional rules with CommitLint, we have two options:

1. Create a .commitlintrc.json file in your app root, which will extend the config-conventional rules.

2. Create a commitlint.config.js file, which will export the config-conventional rules.