DEV Community

How to use Husky to create pre-commit and pre-push hooks

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 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 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. 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

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

What problems you can encounter

As you can see in this thread 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.

Top comments (3)

Collapse
 
longlch profile image
longlch

I spent hours finding the issue why hooks can't work after install Husky. After check their document, the old way like we did (Add the husky config in package.json) is no longer use.
They change the structure husky in the current version (v5). Check it out (dev.to/typicode/what-s-new-in-husk...).

Collapse
 
kinizumi profile image
kinizumi

pre-push never works I believe nobody got pre-push hook working

Collapse
 
deveml profile image
Emil Sharier

It does work. I ran into the same issue some 30 mins back and almost gave up seeing your comment xD. Turns out that it was a silly issue. :D