Use Static Analysis tools to my Static Site Generator
Tags: opensource, javascript, git, vscode
Published: 2021-11-06 03:16:58

Static analysis tools help maintain the quality of your source code by fixing formatting issues, finding suspicious coding structures, and alerting you to common errors.
I added [Prettier](https://prettier.io/) and [ESLint](https://eslint.org/) to my Static Site Generator(SSG) using JavaScript, so I would like to show how I implemented them step by step.

## :one:Add a Source Code Formatter: Prettier
Prettier is one of the tools for applying a consistent code style throughout your code base.
First of all, I set it up as follows using npm.
`npm install --save-dev --save-exact prettier`
Second, I created a prettierignore file directly under the project and added the following files that do not need to be formatted.
```
# Ignore artifacts:
build
coverage
node_modules
```
I also created prettierrc.json file and added a Basic Configuration.
```
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}
```
Third, I added the following script inside my package.json so that Prettier can be executed in one step from the command line.
`"prettier": "npx prettier --write ."` 
Finally, I ran Prettier with `npm run prettier`, and it fixed my format based on the configurations above.
```sh
> node-ssg@1.0.0 prettier
> npx prettier --write .
dist\test.html 137ms
doc\test.md 84ms
index.html 471ms
package-lock.json 172ms
package.json 17ms
pajama-ssg.js 271ms
README.md 101ms
tempGenerator.js 11ms
yargsConfig.js 17ms
```
After I checked if my program still worked, and it was perfect! Yay!:innocent:

## :two:Add a Linter: ESList
ESLint aims to improve code consistency and avoid bugs. Open Source projects can involve multiple people in a project so it's a very useful tool.
Again, I started with the installation with npm.
`npm install eslint --save-dev`
Next, I set the configuration file using the --init flag(`npx eslint --init`).
```sh
PS C:\Users\Mizuho\Desktop\OSD600\pajama-ssg> npx eslint --init
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · none
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
Successfully created .eslintrc.js file in C:\Users\Mizuho\Desktop\OSD600\pajama-ssg
```
From  --init flag, it created .eslintrc.js file for me with the code below.
```js
module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true,
  },
  extends: "eslint:recommended",
  parserOptions: {
    ecmaVersion: 13,
  },
  rules: {
  },
};
```
I added this `"semi": ["error", "always"]` inside the `rules` to enforce consistent use of semicolons.

Like Prettier, by creating .eslintignore file in the root directory, I instructed ESLint to ignore certain files and directories.
```
# Ignore the build directories for next
build
coverage
package.json
package-lock
node_modules
```
And I added the following to the package.json file to easily run ESLint from the command line.
```
"eslint": "eslint --config .eslintrc.js",
"lint": "npm run eslint",
"eslint-fix": "eslint --config .eslintrc.js --fix"
```
I used the above options based on the official site, and a lecture by my professor. 
`--f`: "This option instructs ESLint to try to fix as many issues as possible. The fixes are made to the actual files themselves and only the remaining unfixed issues are output."
`-c, --config`: "This option allows you to specify an additional configuration file for ESLint (see Configuring ESLint for more)." There are many other options on the official site: [https://eslint.org/docs/user-guide/command-line-interface](https://eslint.org/docs/user-guide/command-line-interface)

I ran ESLint `npx eslint .`, and I got many errors...
```sh
   19:11  error  'removeDir' is not defined  no-undef
   49:5   error  'process' is not defined    no-undef
   64:5   error  'files' is not defined      no-undef
   89:17  error  'process' is not defined    no-undef
   97:13  error  'lines' is already defined  no-redeclare
   98:13  error  'title' is already defined  no-redeclare
    ...
   2:18  error  'tempGenerate' is not defined  no-undef
```
I didn't notice that I already declared 'lines' and 'title', so I deleted `var` for the error.
I added `/* global process, files process */` on top of the main JavaScript file. However, 'removeDir' became an error and my program had an error and couldn't run.
I've searched everywhere to fix the problem and I decided to add this instead `/* eslint-disable no-undef */`, and it ran without errors.

## :three:Editor Integration: adding .vscode folder
I created a .vscode folder that shares settings, task configurations, and debug configurations and integrates tools with the Visual Studio Code. I stored extensions.json and settings.json in it. In extensions.json, I added extensions inside the  Recommendation and added user and workspace settings to settings.json.(my .vscode folder[https://github.com/MizuhoOkimoto/pajama-ssg/tree/main/.vscode](https://github.com/MizuhoOkimoto/pajama-ssg/tree/main/.vscode))

## :four:Add a CINTRIBUTING.md and Update README.md
For future contributors, I added a CONTRIBUTING.md file and updated README.md file as well. 

## :five:Squash, Commit, Merge, Push
I checked if my project still worked and pushed it. However, I was working on this project after I finished 3 jobs and it was very late. My brain didn't work properly and I made mistakes again when I rebase and I even lost my changes :hear_no_evil: I have decided to watch some lectures again and check the documents as well. Phew... I had to make other commits and squash, but I could implement tools and configurations!:innocent:

## :white_check_mark:Conclusion
I installed Prettier and ESLint as a extension on my Visual Studio Code, but I didn't know how they work or how to use/share them with other people. I'm really enjoying to keep my project updated. I would like to add huskey(Git Pre-Commit Hook) too, at some point! 

Links:link:
[Pajama-ssg](https://github.com/MizuhoOkimoto/pajama-ssg) | [Prettier](https://prettier.io/) | [ESLint](https://eslint.org/)
[Configuring ESLint](Configuring ESLint) | [VSC:User and Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings)

(Photo by Dan-Cristian Pădureț on Unsplash)