Adding Static Analysis Tools to SSG
Tags: opensource, osd600
Published: 2021-11-04 19:15:27

To maintain the quality of source code, I added a formatter and a linter for [my project](https://github.com/minhhang107/mh-ssg).

### Prettier

I pick [Prettier](https://prettier.io/) as the project's formatter. Prettier will help fix any format issues and generates a neatly-formatted version of your code. That means a consistent style will be applied to the whole code and we can also add any addition styles that we want to apply.

I installed the plug-in with the following command:
```
npm install --save-dev --save-exact prettier
```
Then, I added an empty config file to let the editor and other tools know Prettier is used:
```
echo {}> .prettierrc.json
```
One thing I noticed when using this command was that running it from the terminal will generate the file encoded in UTF-16, which won't work. Instead, I had to run the command from `cmd` (Windows) so that the file is encoded in UTF-8.

If you have any style that you want to code to conform to, `.prettierrc.json` is the right place to put your styles into. For me, the default format is good enough for me so I keep the file blank as for now. Another file I created was `.prettierignore`, which stores the files/folders that I don't want to be processed by Prettier.

Right from the beginning of the project, I used the extension of Prettier in VSCode so after installing, there was no changes in the format of the code.

I also added scripts to run Prettier from the terminal so contributors who work on this project can quickly use the tool.

To format, run:
```
npm run prettier
```
To check if all files are already formatted, run:
```
npm run prettier-check
```


### ESLint

[ESLint](https://eslint.org/) was chosen as the linter for the project. ESLint will analyze the code to quickly find problems. It can also automatically fix many of them.

The tool can be installed with:
```
npm install eslint --save-dev
```
A configuration file called `.eslintrc` will be created with this command:
```
npx eslint --init
```
This command will prompt you to choose the file type you want - js, yml or json.

To include the basic rules marked with the tick on [rules page](https://eslint.org/docs/rules/), this line should be on the config file you just created.
```
"extends": "eslint:recommended"
```
ESLint also allows you to add any rules you want to implement. These additional rules should be put in `"rules"` property in the same file. 

Similar to Prettier, we can also add the `.eslintignore` file to define which files/folders we don't want to be linted.

To check for problems and automatically fix problems, you can use the following scripts respectively:
```
npm run eslint
```
```
npm run eslint-fix
```
After running the linting, I found some issues with my code:
```
PS C:\Users\hang0\Documents\CPD\S5\OSD\mh-ssg> npx eslint bin

C:\Users\hang0\Documents\CPD\S5\OSD\mh-ssg\bin\index.js
  51:3  error  Parsing error: 'return' outside of function

C:\Users\hang0\Documents\CPD\S5\OSD\mh-ssg\bin\utils\generateHTML.js
  16:23  error  Unnecessary escape character: \<  no-useless-escape
  16:45  error  Unnecessary escape character: \>  no-useless-escape
  16:20  error  Empty block statement  no-empty

✖ 4 problems (4 errors, 0 warnings)
```
The problem descriptions are very clear so it was easy to find and fix those issues.

### IDE Integration
To integrate the tools into the IDE, I installed the Prettier and ESLint extensions and created `.vscode` folder. Inside the folder are two items: `extensions.json` and `settings.json`.  

`extensions.json` indicates which extensions are used
```
{
  "recommendations": ["dbaeumet.vscode-eslint", "esbenp.prettier-vscode"]
}
```

`settings.json` defines the default formatter to be Prettier and the behavior on save to be auto format and auto fix linting
```
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
}
```

The commit for new changes can be found [here](https://github.com/minhhang107/mh-ssg/commit/cb420610496d510591b01dcc39be56dd564f714b)