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

Hossein Mousavi
Jun 21 · 3 min read

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.

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

npx husky-init

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 scriptsobject:

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

An invalid commit message that husky prevent from committing. learn more about conventional here

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

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.

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.

Angular In Depth

The place where advanced Angular concepts are explained