Adding Static Analysis Tools to SSG

To maintain the quality of source code, I added a formatter and a linter for my project.

Prettier

I pick Prettier 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 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, 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