DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Use Static Analysis tools to my Static Site Generator
MizuhoOkimoto
MizuhoOkimoto

Posted on

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
Enter fullscreen mode Exit fullscreen mode

I also created prettierrc.json file and added a Basic Configuration.

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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: {
  },
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!