Lucas Lemos.

Automating commit message patterns with @commitlint/cli

Cover Image for Automating commit message patterns with @commitlint/cli
Lucas Henrique
Lucas Henrique

First Things First

Alright, let's start by understanding what is git and why sould we use it.

In plain terms, git is a Distributed Version Control System (Distributed VCS), that makes it easier to track changes to files, so when you change a file (create/update), it can determine if the file is new and if the file isn't git will tell you exaclty what changed on the file. There are another Distributed VCSs that you can use, like ArX, Fossil, Mercurial, Monotone, etc. I can make a whole article speaking of VCSs here (including the non distributed ones).

But then, being git the most popular Distributed VCS, does it really makes sense to use it? Yes, git has a good disposition of remote tools like gitlab, github and many others. It's also well known for versioning code and it has a lot of free knowledgement on the internet, so for practical reasons, git is our best option. If you wish to know more about git, visit git-scm.

In this article, we will focus on the committing part of git, which is basically a register of the change in a file or group of files. There are some conventions to write a commit message we'll look into it and into some other aspects of git itself.

Initializing

NOTE: If you already know git, you can create a directory called git-commit-msg-patterns and initialize a repository and jump right into the Installing Deps section.

Let's create a directory that will contain our project, open your terminal and type these two commands in sequence:

mkdir git-commit-msg-patterns

cd git-commit-msg-patterns

The first one create a directory and the second access it, all commands from now on will be executed having this directory as basis.

Next, we need to initialize the git repository with the git init command, this will create a .git folder in the actual directory and store the git settings and changes there. This is the basic setup

Understanding basic concepts

So, if you already know git, you must be aware that now we have a repository and any file created inside it will be at the status of untracked, when a file has this status it means that git don't have the file previously indexed in it's changes, in other words, it means that the file is new inside the repository.

When you create a file, you should use the git add command to change it's status to staged, a staged file is basically the file (or group of files) that will be associated with the next commit.

As explained earlier, a commit is basically a register of a changes in a file or a group of files, a repository usually haves a timeline based on it's commits and the commit concept is usually explained as a "point of the repository timline", which is a pretty straight foward explanation.

With everything explained, let's get into the main part.

Installing Deps

We will use Git Hooks for the automatic check of commit messages, specially the commit-msg hook which is the one that is responsible for checking the commit message pattern and validate it. I'll make an example using a basic template that I've learned from this dev.to article, to turn the check automatic, we'll use some Javascript tools:

And one of these configs:

You can also write your own config (wheter it's based on one of the aboves or it's a total new config) and publish it to npm, I wrote one for padronizing the commits in my work repos and here it is: @bristom/commitlint-config, you can check the Github repository to see what are the rules.

To install husky, commitlint and the config you chose as development dependencies you should run:

npm install husky @commitlint/cli <config-package> --dev

Or with yarn

yarn add husky @commitlint/cli <config-package> --dev

In my case I'll install the @bristom/commitlint-config, as it is my default.

Then, in the root of our project, you create two files: .huskyrc and commitlint.config.js. The .huskyrc file stores the git hooks config for husky to run, and the commitlint.config.js stores the commitlint config to check the commit messages. The content for each one is listed below:

.huskyrc

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

commitlint.config.js

module.exports = {
    // Replace the @bristom/commitlint-config with the
    // name of the config package you've just installed.
    extends: ['@bristom/commitlint-config']
};

Alright, with everything setup, let's try to make a commit:

git commit -m "anything"

This will throw an error on basically all configs installed, since isn't compatible with any pattern, but if instead I try:

git commit -m "[feat]: Initial commit"

It will work perfectly (check the pattern of you config package to make the commit right).

Overview

Now, today we've learned a little bit about git, git hooks and how to automate the check of commit messages patterns using some Javascript tools.

But even if I had only used Javascript, you can implement it on any code of yours and the better of it: using the same tools, you just have to install Node.js and instead of install the commitlint CLI scoped for a project, you install it using the -g flag of npm. The downside is that you won't have hooks automated too, you'll have to configure them on your own.

Thanks for your attention and for coming all the way here to learn, hope to see you soon!