Use of Static Analysis tooling

What is Prettier?

• Prettier is one of the code formatting tools that ensures a consistent code style.
• I have used it before, so I might as well use it again to become familiar with it.
• https://prettier.io/

What is TypeScript-ESLint?

• It helps in identifying and fixing potential problems in the code.
• I've only used ESLint with JavaScript, but I haven't used TypeScript-ESLint with TypeScript before. So, I decided to use this.
• https://typescript-eslint.io/

Prettier Set-up
1.Installation:
Run npm install --save-dev --save-exact prettier.

2.Create a .prettierrc file:

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "insertPragma": false,
  "proseWrap": "preserve",
  "requirePragma": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "printWidth": 100
}

3.Create a .prettierignore file:

node_modules/
package.json
package-lock.json

4.Add a prettier script to package.json:

...
  "scripts": {
    ...
    "prettier": "prettier . --write",
    ...
  }

5.How to run Prettier from the command line?
$ npm run prettier

ESLint Set-up

1.Installation:
Run npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript.

2.Create a .eslintrc.cjs file:

module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
};

3.Add a lint script to package.json:

...
  "scripts": {
    ...
    "lint": "eslint --ignore-path .gitignore ."
    ...
  }

4.How to run ESLint from the command line?
$ npm run lint

What Prettier and ESLint Found:

Prettier

Prettier formatted the code based on the rules specified in the .prettierrc file.

ESLint

Example of Change

After Fixing the Errors

Integrating the Tools with VSCode:

1. Install Prettier Extension for VSCode.

2. Create a directory called .vscode and add a settings.json file inside it with the following content:
   

{
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "files.eol": "\n",
  "files.insertFinalNewline": true
}

After completing these steps, Prettier should automatically format the code for you, saving a significant amount of time for everyone involved.

Learning Opportunity
Even if it takes some time to set up static analysis tools, including ESLint and Prettier, it is so worth it since it saves so much time for both maintainers and contributors. I was lazy to set up these tools, so I always did not use them even though I knew they work amazingly. I think I need to make it a habit to set up these static analysis tools first from now on whenever I start a new project.

You can find the whole commit here: abb9bed