Adding Static Analysis Tooling

For this week in Topics in Open Source Development, I was tasked with adding Static Analysis Tooling to an existing project.

Project: til-to-html
Commit: https://github.com/paulkim26/til-to-html/commit/c34a0b61c28847822f6a7467f68eeaf54e08ca03

Tools Used

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

• Prettier
• ESLint

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.
The following instructions are adapted from https://prettier.io/docs/en/install.html.

To setup Prettier, I ran the following to install Prettier:

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:

bun prettier . --write

This command is then added to the package.json 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.

bun install eslint

Then I created a .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:

bun eslint .

This command is then added to the package.json file as a runnable script.

Editor Integration

To integrate with Visual Studio Code, I setup a VS Code configuration file under .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
• 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!