Husky + lint-staged + commitlint

In this post, I'll show you how to improve your husky workflow, using pre-commit to trigger error checking on your code before uploading it to the repository.

Start husky with the following command:

npx husky-init

Verify that the husky information has been entered into your package.json:

{

  "scripts": {
    ...
    "prepare": "husky install"
  },
  "devDependencies": {
    ...
    "husky": "^6.0.0"
  }
}

Install husky in your project:

#yarn 
yarn; npx husky add .husky/commit-msg 'npx --no-install commitlint --edit ""'

#npm 
npm install; npx husky add .husky/commit-msg 'npx --no-install commitlint --edit ""'

Checking .husky/commit-msg file you might find the following bash script:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit ""

Let's add the commit-lint package to the lint confirmation messages:

#yarn 
yarn add @commitlint/config-conventional @commitlint/cli --dev

#npm 
npm install @commitlint/config-conventional @commitlint/cli --dev

Create the commitlint.config.js file in the root of your directory and insert the following contents:

module.exports = { extends: ['@commitlint/config-conventional'] };

Now we will install lint-staged:

#yarn 
yarn add lint-staged --dev

#npm 
npm install lint-staged --save-dev

In package.json insert the following script for running lint-staged into our project:

 {
   "scripts": {
     ...
     "pre-commit": "lint-staged",
     "prepare": "husky install"
   }
}

We will create the .lintstagedrc file to run eslint and prettier at commit time:

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

Inside .husky/pre-commit insert the following script:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run pre-commit

That's it! Now test everything we have installed.