Use Static Analysis tools to my Static Site Generator

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 and ESLint to my Static Site Generator(SSG) using JavaScript, so I would like to show how I implemented them step by step.

1️⃣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.

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

2️⃣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).

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.

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

I ran ESLint npx eslint ., and I got many errors...

   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.

3️⃣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 folderhttps://github.com/MizuhoOkimoto/pajama-ssg/tree/main/.vscode)

4️⃣Add a CINTRIBUTING.md and Update README.md

For future contributors, I added a CONTRIBUTING.md file and updated README.md file as well.

5️⃣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 🙉 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!😇

✅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🔗
Pajama-ssg | Prettier | ESLint
Configuring ESLint | VSC:User and Workspace Settings

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

Blog