Adding Static Analysis Tooling
Published: 2023-11-05 01:48:18

For this week in [Topics in Open Source Development](https://github.com/Seneca-CDOT/topics-in-open-source-2023), I was tasked with adding Static Analysis Tooling to an existing project.

Project: [til-to-html](https://github.com/paulkim26/til-to-html/commits/main)
Commit: https://github.com/paulkim26/til-to-html/commit/c34a0b61c28847822f6a7467f68eeaf54e08ca03

## Tools Used

To automatically format and lint code in this project, I used:

- [Prettier](https://prettier.io/)
- [ESLint](https://eslint.org/)

I chose these as I am familiar with them and have enjoyed using them for previous projects. They are commonly used by many projects and integrate well with Visual Studio Code. Prettier is an opiniated automatic code formatter that formats all code in the same way. ESLint is a linting tool for JavaScript that is able to detect code smells and can automatically fix them too (if configured to do so).

## Setting up Prettier

Note: this project is using [Bun](https://bun.sh/).
The following instructions are adapted from https://prettier.io/docs/en/install.html.

To setup Prettier, I ran the following to install Prettier:
```bash
bun install --save-dev --save-exact prettier
node --eval "fs.writeFileSync('.prettierrc','{}\n')"
```

Then I added a `.prettierignore` file, using the same contents of my existing `.gitignore` file. To format the project, I ran:

```bash
bun prettier . --write
```

This command is then added to the [package.json](https://github.com/paulkim26/til-to-html/blob/c34a0b61c28847822f6a7467f68eeaf54e08ca03/package.json#L9) file as a runnable script.

## Setting up ESLint

The following instructions are adapted from https://eslint.org/docs/latest/use/getting-started.

To setup ESLint, I installed the `eslint package`.

```bash
bun install eslint
```

Then I created a [.eslintrc.json](https://github.com/paulkim26/til-to-html/blob/c34a0b61c28847822f6a7467f68eeaf54e08ca03/.eslintrc.json) file. It extends the following templates to be compatible with typescript and Prettier:

- `eslint:recommended`
- `plugin:@typescript-eslint/eslint-recommended`
- `plugin:@typescript-eslint/recommended`
- `prettier`

I customized the linting rules to fit the preset coding conventions I set in my project; I disabled the following rules:

- `no-useless-catch`
- `@typescript-eslint/no-explicit-any`

Then I added a `.eslintignore` file, using the same contents of my existing `.gitignore` file. To format the project, I ran:

```bash
bun eslint .
```

This command is then added to the [package.json](https://github.com/paulkim26/til-to-html/blob/c34a0b61c28847822f6a7467f68eeaf54e08ca03/package.json#L10C14-L10C14) file as a runnable script.

## Editor Integration

To integrate with Visual Studio Code, I setup a VS Code configuration file under [.vscode/settings.json](https://github.com/paulkim26/til-to-html/blob/c34a0b61c28847822f6a7467f68eeaf54e08ca03/.vscode/settings.json). This file ensures that:

- Prettier is set as the default formatter for the project.
- On save:
	- Files are formatted.
	- Files are linted with ESLint.

The following VS Code plugins are required:

- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

## Takeaways

After running Prettier and ESLint, I found many issues in my existing code, including:

- Declared arguments that were unused
- Extraneous whitespace
- Improperly indented blocks
- Missing commas

I have been using Prettier and ESLint for a while now in my own projects, but its a good idea to set it up for each project rather than globally so that:

- All contributors use it
- A specific version and configuration is used

Instructing and encouraging all contributors to follow the same standards I do in a programmatic, consistent way will help out immensely with the maintainability of the project.

Thanks for reading!