OSD600 - Adding Static Analysis Tools
Tags: opensource
Published: 2021-11-06 02:18:23

#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](https://prettier.io/) 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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rektcuxw0jtcyuj62ov9.png)
 

* Add [ESlint](https://eslint.org/) 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](https://github.com/okonet/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](https://github.com/typicode/husky), [lint-staged](https://github.com/okonet/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9sdm3kp50wpw8qdkmv6m.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uuyst9ur947me76es7yi.png)  

View my commit at [8dfbe63b](https://github.com/hlavu/my-ssg/commit/8dfbe63b9a9478f4608c141b5367a442054cc7b6)

#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!