Working on a project with Git and GitHub is relatively simple. When a project starts to grow however, it is crucial to write clean code that other developers can read. Follow this article to learn how to set up linting and pre-commit hooks for your repository.
Let’s walk through the steps for a one-time setup to configure husky pre-commit and pre-push hooks, ESLint with code styles conventions, prettier code formatter, and lint-staged. Husky automatically runs a script on each commit or push. This is useful for linting files to enforce code styles that keeps the entire code base following conventions.
Walkthrough
Install the dependencies:
Package.json Updates
Add the following to your package.json to configure all three packages:
“name”: “@spencer/example-package”,
// …
“scripts”: {
“format”: “prettier –write .”
},
“prettier”: {
“printWidth”: 180,
“tabWidth”: 2,
“singleQuote”: true,
“semi”: true,
“trailingComma”: “es5”,
“bracketSpacing”: true,
“arrowParens”: “avoid”,
“proseWrap”: “always”,
“requirePragma”: false,
“insertPragma”: false,
“endOfLine”: “lf”,
“jsxBracketSameLine”: true
},
“husky”: {
“hooks”: {
“pre-commit”: “lint-staged”
}
},
“lint-staged”: {
“**/*.(js|jsx|ts|tsx|json|css|md)”: [
“prettier –write”
]
}
}
Configure ESLint (optional)
First, install this package
Then, run npm init @eslint/config to create a config file and choose preferred code styles.
Alternatively, use this example file. In the root directory, create .eslintrc:
“extends”: [
“eslint:recommended”
],
“plugins”: [
“prettier”
],
“parserOptions”: {
“ecmaVersion”: 2017
},
“env”: {
“es6”: true
},
“rules”: {
“no-console”: “off”,
“no-unused-vars”: “off”,
“react/prop-types”: “off”,
“quotes”: [
2,
“double”,
{
“avoidEscape”: true
}
]
}
}
Everything in action
After making changes, commit the files, and see lint-staged automatically run, triggered by the pre-commit hook.
✔ Preparing lint-staged…
✔ Running tasks for staged files…
✔ Applying modifications from tasks…
✔ Cleaning up temporary files…
[example-branch 4bc4030] add new husky setup
4 files changed, 59 insertions(+), 44 deletions(–)
All files have been linted and automatically fixed with prettier, or denied if too many errors were thrown. Now we can push the “clean” code.
# npx lint-staged
# … (no errors found)
# npm test
# … (PASS)
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 8 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 375 bytes | 375.00 KiB/s, done.
Total 4 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
To https://github.com/spencerlepine/my-project.git
4bc4030..b558038 example-branch -> example-branch
Boilerplate
See a working example here: GitHub repository.
Notes
A useful trick is the -–no-verify flag to SKIP the pre-commit or pre-push hook.
Use this option to skip the husky script in case you force a commit/push.
# husky will not run “npm test”
… pushing to GitHub
When husky released v7, it had some major changes to the configuration. There are many articles and Stack Overflow answers about husky, but some of them are misleading if they were using v4.
Hope this article helped! Interested in more, check out more articles here.
Follow my journey or connect with me here:
LinkedIn: /in/spencerlepine
Email: spencer.sayhello@gmail.com
Portfolio: spencerlepine.com
GitHub: @spencerlepine
Twitter: @spencerlepine
