DEV Community

Cover image for Install Husky in your project for proper commit lint with pre-commit hooks
M H Hasib
M H Hasib

Posted on • Updated on

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:

  1. Install husky with commit proper formation
  2. 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


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

Next, enable Git hooks using the following command:



npx husky install


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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)


Enter fullscreen mode Exit fullscreen mode

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'


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

Image description

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

You can add more command as you want. That's all for now.

Thanks for your time.

Top comments (3)

Collapse
 
jashandeep31 profile image
Jashandeep Singh

Thanks, man!

Collapse
 
mahmudulhsn profile image
M H Hasib

Welcome bro..

Collapse
 
kmrhemant916 profile image
Hemant Kumar

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