DEV Community

Neil An
Neil An

Posted on

Adding static analysis to my SSG

Hi everyone,

This week I added some static analysis tools to my SSG. The tools I added are Prettier and ESLint. Prettier is a code formatter to make code consistent and ESLint checks your code for any common errors/warnings.

It was easy to set both tools up. Since I was using nodejs, all I had to do was install the tools using npm. For Prettier, I used:
npm install --save-dev --save-exact prettier
and for ESLint I used:
npm init @eslint/config

Prettier changed a lot of stuff in my code. I usually put curly braces after a function or control statement like this:

if (...)
{

}
Enter fullscreen mode Exit fullscreen mode

but Prettier changed to format to this:

if (...) {

}
Enter fullscreen mode Exit fullscreen mode

Prettier also changed my indentation spacing and made everything look more compact.

For ESLint, it found a bunch of errors/warnings in my code. For example, a common warning was that I had unused variables in my code. There was also a warning telling me not to use async in a promise object.

To get the tools to run in the command line, I edited the package.json file and added some scripts to run Prettier and ESLint. Here is what I added:

    "lint": "npx eslint src",
    "prettier": "npx prettier --write .",
    "prettier-check": "npx prettier --check ."
Enter fullscreen mode Exit fullscreen mode

To integrate these tools into my IDE (VSCode), I just added the Prettier and ESLint extensions. For people contributing to my project, I added a .vscode/extensions.json file so that these extensions would be recommended to them on opening the project.

Overall, I learned a lot about formatters and linters and why they are important when working in a shared repo.

Top comments (0)