How to use Husky to create pre-commit and pre-push hooks
Tags: npm, javascript, github, webdev
Published: 2020-09-19 00:27:11

Automation is always good, but it's awesome when it reduces cognitive load and optimize processes.

I coded a lot of tests for the [worldwide community for houseplant lovers](https://chooseyourplant.com?ref=devictoribero) I'm building, but I didn't include them in any pipeline or git hook. SPOILER ALERT. After a few days, I forgot about their existence and this is not good 👎.

We can automate to "execute things" before we create a commit or we push changes in a remote repository. This is great because it reduces the cognitive load when coding which means less stress and more focus. Some people use [git hooks](https://www.atlassian.com/git/tutorials/git-hooks) locally to prettify the code and/or run the linter.

If you are using git as version control, you might know (or maybe not, and that's okay) that it has some native hooks that are hidden inside the .git folder. You can check it by running `ls .git/hooks/` in the root of your project. If you do so, you'll see some `.sample` files.

## How to use git hooks?

The easiest way to use git hooks locally in a Node environment, it's by using a library called [husky](https://github.com/typicode/husky). It handles git hooks for us with a small configuration!

## How create a pre-commit or pre-push with Husky?

The usage is pretty straight forward. We only need to install the package and add some configuration to the package.json. **Nothing else!**

### Requirements

`Husky` package installed, Node version `>=10` and Git version `>= 2.13.0`.


### How to install Husky

Install `Husky` only for `dev` environments because it's not a production requirement. You can install it by executing the following line of code:

`npm install husky --save-dev`


### Add the required configuration in package.json

You should have a package.json in the root of your project. Open it and add a `Husky` configuration in the root of the JSON.

In this project, I only added the execution of the test in the `pre-commit` and `pre-push` git hook, but you can add your linting rules, formatting, or whatever you like. Now, every time I try to execute `git commit` or `git push` the tests are executed. Example below 👇:

![A computer terminal showing the execution of test before committing changes](https://elrincondevictor.com/static/img/how-to-use-husky-to-create-pre-commit-and-pre-push-hooks-1.png)


### How to use the pre-commit or pre-push git hook?

You don't need to do anything special apart from creating a commit! Try it out by running:

`git commit -m "Finally I'm executing tests on each commit"`

![A computer terminal showing the execution of test before committing changes](https://elrincondevictor.com/static/img/how-to-use-husky-to-create-pre-commit-and-pre-push-hooks-2.gif)


### What problems you can encounter

[As you can see in this thread](https://github.com/typicode/husky/issues/445) some people (me included) can't make hooks work after installing `Husky`. To solve it, you just need to remove the git hooks folder, uninstall Husky and install it again. You can do this by running:

```
rm -rf .git/hooks/
npm uninstall husky
npm install --save-dev husky
```

After that, it should be all OK and the tests, the linter, or whatever you configured should be executed in the next git commit.