Git Hook Husky 6 Lint (prettier + eslint) and commitlint for JavaScript Projects

Programming is a teamwork job, so we must ensure that our codebase is clean and usable for everyone in the team with the team culture and the best practices we want to prevent developers from committing unless we validate their code, and that’s when Git Hooks comes in handy.

image copyright. learn more about git hooks here.

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 The Commit Message Validity Using Husky

First, we need to install the latest version of Husky using the following command:

npm install husky -D

And then we need to enable Git Hook:

npx husky-init

After the last command, make sure your project has a new directory .husky which you can find in a file called pre-commit . This file is related to the hook that will be invoked before you commit. Also, make sure you see the following line of code in your package.json file under scriptsobject:

"prepare": "husky install"

The next step would be creating a file in the Husky directory for linting commit messages:

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit'

Now you can find a file called commit-msg in .husky directory with the following information:

Now we need to install commitlint and commitlint/clitpackages:

npm install @commitlint/config-conventional @commitlint/cli -D

Now we want to declare our rules for commit messages and create a file called .commitlintrc.json and paste the following code into it:

Now you have successfully implemented 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).

An invalid commit message that Husky prevents from committing. Learn more about conventional here

Linting project before committing using Husky

First, we need to install a package:

npm install lint-staged -D

and then you need to add the following line in you package.json file under the scripts object:

"pre-commit": "lint-staged"

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:

You can also use the following for handling both of them:

{
  "src/**/*.+(js|json|ts|tsx)": ["eslint"],
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": ["prettier --write"]
}

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 --save-dev --save-exact prettier
#for installing eslint:
npm install eslint --save-dev

Done! now you are good to go.

After validating the commit message, the linting process begins, and then the commit completes.

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.

Please do not hesitate to share your thoughts and ideas with me. You can reach me on Twitter or you can find another way by visiting my portfolio.

Hossein Mousavi - Software Developer

Read more from me:

API-First Approach Complete Guide

How to Implement Dark/Light Themes in a Next.js App Using Context Hook & TailwindCSS

How To Implement Interceptors in Angular

Angular forms (Reactive Form) including Angular Material and Custom Validator

A Detailed Look at filter(), map(), and reduce() in JavaScript