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.
Top comments (0)