Use husky to reduce errors and have a consistent codebase
By Mario Kandut
Europe’s developer-focused job platform
Let companies apply to you
Developer-focused, salary and tech stack upfront.
Just one profile, no job applications!
This article is based on Husky v8.0.1.
Husky makes modern native Git hooks easy to use in an Angular project. You can use it to lint your commit messages, run tests, lint code, or many more when you commit or push.
💰 The Pragmatic Programmer: journey to mastery. 💰 One of the best books in software development, sold over 200,000 times.
But what are Git hooks and how can you add husky to any Angular project?
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,
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.
There are two ways to install husky in your project:
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
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:
.huskyin your project root has been added. It contains a file called
pre-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
package.jsonwas modified, with a
huskywas added as a devDependency.
That's it, you are ready to use husky in your Angular project. 😀
Three steps, though the outcome should be the same as with automatic installation.
npm install husky --save-dev
npx husky install
npm pkg set scripts.prepare="husky install"
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.
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
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 Angular project.
Never miss an article.