Install Husky in your project for proper commit lint with pre-commit hooks

Many of us write code. But how many of us write code properly with proper comment or proper linting. Also, most of us use git, but how many of us maintain proper git commit message. Proper commit message help us to find the particular code as well as we can easily understand which code contain the commit. So int this tutorial, we are going to learn about few topic. There are:

Install husky with commit proper formation
Husky pre-commit hooks

1. Install husky with commit proper formation:

First of all, we need to install Husky. So let's start by installing Husky. To install Husky Run the following command.

npm install husky --save-dev

Next, you also need to install commitlint to lint commits:

npm install @commitlint/cli --save-dev
npm install @commitlint/config-conventional --save-dev

Next, enable Git hooks using the following command:

npx husky install

Then, add the commit-msg hook using the following command:

npx husky add .husky/commit-msg 'npx commitlint --edit $1'

Next, create a file in your git root directory named .commitlintrc.json and add the following configuration:

{
  "extends": ["@commitlint/config-conventional"]
}

Then, create another file in the same directory named commitlint.config.js and the add the following configuration:

 module.exports = {
  extends: ['@commitlint/config-conventional'],
};

Finally, add a Git commit that doesn’t follow the convention:

git commit -a -m "Set up Husky and commitlint"

The operation should be failed with the following message:

⧗   input: Add Husky and commitlint
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

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

husky - commit-msg hook exited with code 1 (error)

Yes! Our commit message list is working!. Now lets try with the following commit lint which will work. Now run the following commit:

git commit -m 'feat: set up husky and commitlint'

BTW, you will get the linting formation in commitlint.

2. Husky pre-commit hooks:

So, here is the second part of our tutorial where we are going to implement the pre-commit hooks. But we need to know why we need pre-commit hooks. Sometimes we forget to format our code for with prittier, eslint or Laravel Pint. Sometimes its tough to remember to run the linting command before commit and push into the git repository. Here pre-commit hooks helps us. So lets install the husky pre-commit hook configuration. To install pre-commit hook run the following command:

npx husky-init npm install
npm run prepare

This will generate a file named pre-commit inside the .husky folder.

This file will contain the following configuration. It will generate a demo pre-commit which is npm test.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm test

Now you need to modify the command you want to run before your commit. For example, you are working with in a Laravel Project and you want to format your code with Laravel Pint. So you can modify your code according your need like this.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

./vendor/bin/pint

You can find a scenario when it will run Laravel pint command, it will run through all the file you changes. But if you want to run the specific file like that you add some specific file in git and you want to run the Laravel pint only these files. Then do the following code.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

files=$(git diff --cached --name-only --diff-filter=ACM -- '*.php');
vendor/bin/pint $files -q

git add $files