Install Husky in your project for proper commit lint with pre-commit hooks
Published: 2023-08-30 04:45:05

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](https://typicode.github.io/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](https://github.com/conventional-changelog/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](https://github.com/conventional-changelog/commitlint#what-is-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](https://prettier.io/), [eslint](https://eslint.org/) or [Laravel Pint](https://laravel.com/docs/10.x/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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knvpob163w67dc0kqrjt.png)

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

```json
#!/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](https://laravel.com/docs/10.x/pint). So you can modify your code according your need like this.

```json
#!/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.

```json
#!/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
```

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

Thanks for your time.