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!