Static Analysis Tooling

Tools

Since I was working on JavaScript, I chose ESlint as linter and Prettier as formatter. I did so because they are popular, easily available, and quick to set up. Popular tools are more common accepted and well-known, so it makes collaboration easier.

ESLint helps you find problematic code pattern and common silly bugs in JavaScript, with rules you can customized for your need, including coding style. It's created by Nicholas C. Zakas.

Prettier helps you format your code so that it has a consistent style. Of course, you can customize the rules for your own use. This tool was created by James Long.

My ESlint Setup Steps on VS Code

(See official documentation for more details)

1. Make sure your node.js is more than version 16.0.0.
2. Make sure you are in the root of your project.
3. If you don't have a package.json, run npm init. Otherwise, Run npm init @eslint/config to install it, and choose the options that apply to you.
4. Create a file named .eslintignore and add anything you don't want ESlint to touch in your project, such as: node_modules
5. In .eslintrc.{js,yml,json}, set rules as you like. See ESlint documentation for how it works. If you are using node.js, you might need to manually add "node": true under env in there to make sure it knows.
6. Run ESlint on the entire project via command npx eslint ., in the project's root folder.
7. Fix errors reported by ESlint.
8. Test your program and make sure everything is fine.
9. For IDE integration, as you work on the project further in the future, go to extension tab and search for "ESlint" to install.

10. To make sure other devs on the project use the same extension, create .vscode folder with extensions.json file; Add the following to have ESlint be recommended to be installed as an extension:
    

    {
    "recommendations": [
        "dbaeumer.vscode-eslint"        
    ]
    }
    

My Prettier Setup Steps on VS Code

(See official documentation for more details)

1. Go to project's root folder and run npm install --save-dev --save-exact prettier.
2. Create a file named .prettierignore and add anything you don't want Prettier to touch in yoru project, such as: node_modules.
3. Created a file named .prettierrc.json. This can be empty, or you add things to configure rules.
4. Run Prettier on the entire project via command npx prettier --write ., in the project's root folder.
5. Check your code and test your program to make sure everything is fine.
6. For IDE integration, as you work on the project further in the future, go to extension tab and search for "Prettier" to install.

7. To make sure other developers on the project use the same extension, create .vscode folder with extensions.json file; Add the following to have Prettier be recommended to be installed as an extension:
   

    {
   "recommendations": [
       "esbenp.prettier-vscode"        
       ]
    }
   

8. Press ctrl+, to go to the setting and search for "Editor: Default Formatter" to set to Prettier, as well as searching for "Format On Save" to turn on. Now it will format on save using Prettier.

9. To make sure other developers use the same settings as the above step, in .vscode folder, create a settings.json file and write:
   

   {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   }
   

Experience with the Tools

What Did the Tools found in my code? For Prettier, it tried to format my code to keep with a style. Most of it was making sure there's at least one space between everything, instead having some of stick together like x==25.
It does space out some console.log() from one line to three lines, like:

  console.log(
    "No option used. Check README.md or use --help/-h option for details."
  );

It did also change spacing for an if construct to have the conditions separated by || line-up vertically for readability.

For ESlint, it found two unused values that I then deleted.

Overall, there's not much I needed to do manually, other than deletion the two unused values and making sure things still work after the changes.
It was easy to run the tool, as they come with commands to do so in one line. I learned some ways to format the code from observing how Prettier does it, like the changes made by Prettier I mentioned previously.