1. Lab7 requirement
In this lab, I will make use of Static Analysis Tools which help me maintain the quality of the source code by formatting the code, spotting and warning suspicious errors. Additionally, when other programmers contribute to this project, they can use these tools to ensure a consistent coding style.
2. Adding process
- Add Prettier Formatter
Prettier is an opinionated code formatter which will automatically format the source code. As a result, programmers do not have to waste their time to format each code snippet. Moreover, prettier keeps a consistent coding style when there are a lot of contributors who have different coding styles working in the same project.
Install prettier
npm install --save-dev --save-exact prettier
Create configuration file
echo {}> .prettierrc.json
Create .prettierignore which bases on .gitignore and .eslintignore
Create scripts for prettier
In package.json
file, add these two lines inside scripts
.
"prettier": "npx prettier --write .",
"prettier-check": "npx prettier --check ."
By doing so, I can run npm run prettier
to format all files with Prettier and npm run prettier-check
to check whether all files are formatted with Prettier.
Initially, I tended to write a statement in a single after using prettier, a statement has been stretched across two more lines.
- Add ESlint Linter
ESLint helps analyze the code to quickly find problems and it is able to fix some errors automatically.
Install ESLint
npm install eslint --save-dev
Create configuration file
npx eslint --init
After completing the initiation .eslintrc.js
might look some how like below:
module.exports = {
env: {
browser: true,
node: true, // without this, process is undefined
commonjs: true,
es2021: true,
},
extends: "eslint:recommended",
parserOptions: {
ecmaVersion: 13,
},
rules: {
quotes: ["error", "double"], // using double quotes
semi: ["error", "always"],
},
};
Create .eslintignore which contains files/folders which don't need to be checked
Create scripts for ESLint
In package.json
file, add these two lines inside scripts
.
"eslint": "eslint .",
"eslint-fix": "eslint --fix ."
By doing so, I can run npm run eslint
to find errors in all files with Eslint and npm run eslint-fix
to fix fixable errors.
After using ESLint, I got some errors about not using double quote
. To solve the problem, I had added a comment above the line containing error to disable the rule.
// eslint-disable-next-line quotes
head: '<meta name="viewport" content="width=device-width, initial-scale=1">',
- Editor/IDE Integration
To integrate formatter and linter into the editor, I created .vscode
folder which has setting.json
file to provide the default formatter and extentions.json
file to share the extensions.
- Add Pre-commit Hook
There are some options available for me to choose, my final pick is using lint-staged.
Lint-staged will require you to have Prettier installed and put into devDependencies
before installing it.
Install lint-staged
npx mrm@2 lint-staged
This command will install husky, lint-staged and add proper configuration to package.json
file. Then, all supported files will be checked and formatted before I commit new change.
It will display error if there exists one.
View my commit at 8dfbe63b
3. Overall
Static analysis tools help programmers save a lot of time to format and check for vulnerabilities while validating the code. They plays a critical role in keeping code style consistency in large projects.
All in all, thank you for reading the post.
Happy coding!
Top comments (0)