This article is based on Husky v8.0.1 and React v18.2.0.
Husky makes modern native Git hooks easy to use in your React project. You can use it to lint your commit messages, run tests, lint code, or many more when you commit or push.
But what are Git hooks and how can you add husky to your project?
What are Git hooks?
Git hooks are scripts/programs that you can set up to run at certain points in git's execution (git lifecycle). These points include different stages of a commit, like before a commit (pre-commit) or after a commit (post-commit).
Git hooks allow developers to enforce standards by automating other scripts to run those tasks, like run npm test
before a commit, or run eslint
to avoid eslint errors and warnings.
Husky supports all Git hooks. You can find a list with all available Git hooks here.
Add husky to your React project
There are two ways to install husky in your project:
- Automatic (recommended)
- Manual
Automatic installation (recommended)
The package husky-init is used to quickly install and initialize a project with husky.
From your project root, type the following commands (depending on your package manager) to install husky
.
Important: If your package.json
is in a subdirectory, see how to set up a custom directory with husky.
npx husky-init && npm install # npm
npx husky-init && yarn # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2+
After successful execution of this script several things did happen:
- A folder named
.husky
in your project root has been added. It contains a file calledpre-commit
, which is the initial pre-commit hook. And a folder_
which contains the automatically generated shell script for husky. (Do not commit this, see.gitignore
) - The
package.json
was modified, with aprepare
script andhusky
was added as a devDependency. - And your
package-lock.json
was updated.
That's it, you are ready to use husky in your React project. 😀
Manually installation
Three steps, though the outcome should be the same as with automatic installation.
- Install husky
npm install husky --save-dev
- Enable Git hooks
npx husky install
- To automatically have Git hooks enabled after install, edit package.json
npm pkg set scripts.prepare="husky install"
Using hooks
After a successful installation you should already have a pre-commit
hook installed.
The content of the generated pre-commit
hook are:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm test
This means that before every commit, the script npm test
is running. If the tests fail, you will get an error and, you can`t commit, unless you fix the tests. I think you see already how useful this can be in any size of project.
Create a hook
The syntax to add a command to a hook or to create a new hook is:
husky add <file> [cmd]
For example, you want to run ng lint
after npm test
in your pre-commit
hook.
husky add .husky/pre-commit ng lint
The pre-commit hook has been updated:
`
!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm test
ng lint
`
🌟Congratulations🌟You have husky successfully installed and setup husky in your React project.
TL;DR
- Husky is a tool to use git hooks easily to automatically run scripts on git lifecycle events.
- For example: If you want to run a npm script, before code is committed use a
pre-commit
hook.
Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut. If you want to know more about React, have a look at these React Tutorials.
References (and Big thanks):Git hooks,React,Husky,NPM - husky
Top comments (0)