Static Analysis Tooling
Tags: javascript, beginners, opensource, too
Published: 2022-11-03 16:31:31

## Tools
Since I was working on JavaScript, I chose [ESlint](https://eslint.org/) as linter and [Prettier](https://prettier.io/) 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](https://eslint.org/docs/latest/user-guide/getting-started) 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](https://eslint.org/docs/latest/user-guide/getting-started#configuration) 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](https://prettier.io/docs/en/install.html) 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](https://prettier.io/docs/en/configuration.html).
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.