Use of Static Analysis tooling
Tags: beginners, opensource, typescript
Published: 2023-11-01 19:59:25

**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:**
```typescript
{
  "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:**
```typescript
node_modules/
package.json
package-lock.json
```

4.**Add a `prettier` script to `package.json`:**
```typescript
...
  "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:**
```typescript
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`:**
```typescript
...
  "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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4wj1mpgbpw1vwseong8.png)

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

**ESLint**
![ESLint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84r1207paay17b1dhce8.png)

**Example of Change**
![change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x70qgfeo9rv057mzn9ai.png)

**After Fixing the Errors**
![after](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbvowxmknf6phgeuugw2.png)

**Integrating the Tools with VSCode:**

1. **Install [Prettier Extension for VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).**

2. **Create a directory called `.vscode` and add a `settings.json` file inside it with the following content:**
```json
{
  "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](https://github.com/avelynhc/til_tracker/commit/abb9bed9f4eb97f559e7ef8fce480cb6b2db2c7a)