DEV Community

Avelyn Hyunjeong Choi
Avelyn Hyunjeong Choi

Posted on • Edited on

Use of Static Analysis tooling

#opensource #beginners #typescript

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
}
Enter fullscreen mode Exit fullscreen mode

3.Create a .prettierignore file:

node_modules/
package.json
package-lock.json
Enter fullscreen mode Exit fullscreen mode

4.Add a prettier script to package.json:

...
  "scripts": {
    ...
    "prettier": "prettier . --write",
    ...
  }
Enter fullscreen mode Exit fullscreen mode

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,
};
Enter fullscreen mode Exit fullscreen mode

3.Add a lint script to package.json:

...
  "scripts": {
    ...
    "lint": "eslint --ignore-path .gitignore ."
    ...
  }
Enter fullscreen mode Exit fullscreen mode

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

What Prettier and ESLint Found:

Prettier
Prettier

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

ESLint
ESLint

Example of Change
change

After Fixing the Errors
after

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
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)