DEV Community

Vivian
Vivian

Posted on

OSD600 - Adding Static Analysis Tools

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

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
Enter fullscreen mode Exit fullscreen mode

Create configuration file

echo {}> .prettierrc.json
Enter fullscreen mode Exit fullscreen mode

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 ."
Enter fullscreen mode Exit fullscreen mode

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.
Image description

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
Enter fullscreen mode Exit fullscreen mode

Create configuration file

npx eslint --init
Enter fullscreen mode Exit fullscreen mode

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"],
  },
};
Enter fullscreen mode Exit fullscreen mode

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 ."
Enter fullscreen mode Exit fullscreen mode

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">',
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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.
Image description
Image description

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)