Last month, I had to work with different Static Analysis tooling like Prettier, Flake8, esLint as required by those open source projects to make their code style identical and at good quality.
This week, I have a chance implement them into my project as an author to ensure my code stay consistent when different people contribute. The extensions I chose to add to the workflow are:
Prettier
This code formatter is very popular in the Web-dev community as it:
- An opinionated code formatter
- Supports many languages
- Integrates with most editors
- Has few options
- Doesn't take long to configure
To install Prettier
, firstly run
npm install --save-dev --save-exact prettier
Create 2 files .prettierrc.json
and .prettierignore
. Add formatting options to .prettierrc.json
and choose what files/folders to ignore by editing .prettierignore
.
However, if you are using Windows, it's better to manually create these 2 files rather than using echo{}
like in the docs as the command will create UTF-16LE encoded files.
ESLint
ESLint is also a powerful to detect and fix linting problems in your JavaScript code. You can install ESLint running
npm isntall eslint --save-dev
npx eslint --init
Edit your .eslintrc.json
to your reference, it supports different plugins and configuration files aside from its normal options, you can take a look at mine
{
"env": {
"node": true,
"commonjs": true,
"es2021": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": "latest"
},
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"],
"require-atomic-updates": "error",
"max-len": ["warn", { "code": 200 }]
}
}
Editor Integration
Integrating these static analysis tools into the editor makes it smoother as we can see what changes and what is wrong while writing code rather in build time.
My approach is too create a .vscode/
folder containing settings.json
that configures the VSCode editor settings directly and recommendations.json
that has VSCode recommended extensions.
Adding a pre-commit hook:
Why husky
and lint-staged
? husky
a JS package for defining and executing git hooks and lint-staged
is used to run linters against your staged files, in our case we're using it with the pre-commit hook
npm install --save-dev lint-staged husky
npx husky-init
Add these your package.json
file
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"npx prettier --write",
"npx eslint"
]
}
.husky/pre-commit file
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx eslint .
husky
works according to the script hooks
we specify in the object we within in the package.json
file and lint-staged
will perform the 2 line scripts on files with js
extension. With these configurations, whenever you try to commit, the pre-commit hook will make sure to format the code and show you linting errors.
Top comments (2)
why do you need
husky
, you can tell git to use specific folder for hooks and distribute your hooks there.gitconfig:
I worked on some projects that use
husky
, so I decided to do so as well. Thank you so your suggestion, I will look into it! I've never set up any workflow before so it's my bad 😅