Programming is a teamwork job so we must assure that our codebase is clean and usable for everyone in the team with the team culture and the best practices so we want to prevent developers to commit unless we validate their code and that’s when Git Hooks come in handy.
With the help of Git Hooks, you can run scripts automatically every time a particular event occurs in a Git repository. With this amazing feature of Git and with the help of Husky, You can lint your commit messages, prettify the whole project’s code, run tests, lint code, and … when you commit.
Checking Commit Message validity using Husky
First, we need to install the latest version of Husky using the following command:
npm install husky --save-dev
and then we need to enable Git Hook:
After the last command, make sure your project has a new directory
.husky which you can find a file called
pre-commit . This file is related to the hook that will invoke before you commit. Also, make sure you see the following line of code in your
package.json file under
"prepare": "husky install"
The next step would be creating a file in the Husky directory for the purpose of linting commit messages:
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit'
Now you can find a file called
.husky directory with the following information:
Now we need to install
npm install @commitlint/config-conventional @commitlint/cli --dev
now we want to declare our rules for commit messages, create a file called
.commitlintrc.json and paste the following code into it:
Now you have successfully implement commit linting for your project. The conventional commit message for your project would be something like this:
"fix(scope): your commit message"
The first word should be one of the rules items you have written in your
.commitlintrc.json file and the scope is the module/component you are working on. for commits that may have breaking changes, you need to add “!” at the end of (scope).
Linting project before commit using Husky
First, we need to install a package:
npm install lint-staged --save-dev
and then you need to add the following line in you
package.json file under the
Create a file called
.lintstagedrc in the root of the application and based on whether you are using Prettier or ESLint, paste the proper code into it:
.lintstagedrc for Prettier:
.lintstagedrc for ESLint:
As you can see, you can specify the extension of files you want to prettify/lint as well.
make sure to install Prettier or ESLint as well:
// for installing prettier:npm install prettier// for installing eslint:npm install eslint
Done! now you are good to go.
Husky 6 is using a new approach than its previous versions
In the previous versions of Husky, we declared all the hooks within the
package.json file but with the current version, they have dropped the conventional JS config which you can read more about here. now all the hooks are in a directory (
.husky) located at the root of your project.
Share with your friends! Clap 👏 as max as 50 times.
If you have any problem with implementing Husky, don’t hesitate to comment down below. You can also reach out on Twitter via Hossein Mousavi.
Read more from me:
Angular forms (Reactive Form) including Angular Material and Custom Validator
Forms are major parts of every Angular project and in this article, we want to implement a Reactive Angular form with a…