Use ESLint and Prettier to format your code in TypeScript

I think ESLint[1] is an essential thing when you try to create a project using JavaScript/TypeScript. That would be an excellent tool to parse the potential issues in your code.

Let’s check the philosophy of ESLint:

• Everything is pluggable:
  • Rule API is used both by bundled and custom rules
  • Formatter API is used both by bundled and custom formatters
  • Additional rules and formatters can apply at runtime
  • Rules and formatters don’t have to be bundled to combine
• Every rule:
  • Is standalone
  • Can be turned off or on (nothing can be deemed “too important to turn off”)
  • Can be set to a warning or error individually
• Additionally:
  • Rules are “agenda-free” - ESLint does not promote any particular coding style
  • Any bundled rules are generalizable
• The project:
  • Values documentation and clear communication
  • Is as transparent as possible
  • Believes in the importance of testing

Setup ESLint

First of all, let’s install the ESLint first.

1
2
3

npm install eslint --save-dev
npm install @typescript-eslint/parser --save-dev
npm i @typescript-eslint/eslint-plugin --save-dev

The first one is the ESLint library for JavaScript, and the rest of them are ESLint plugins for TypeScript. Next, you will need to create a .eslintrc.yaml configuration file to set up the rules and related parser for your TypeScript project.

1
2
3
4
5
6
7
8
9
10

env:
  jest: true
  node: true
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: 9
  project: ./tsconfig.json
plugins:
  - '@typescript-eslint'
  - 'jest'

Put this file in the project directory. Please note that we don’t add any rules. You can read more about the rules here. A better way is to enable the recommended set of rules that the plugin provides.

1
2
3
4
5
6
7
8
9
10
11
12

env:
  jest: true
  node: true
extends:
  - plugin:@typescript-eslint/recommended
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: 9
  project: ./tsconfig.json
plugins:
  - '@typescript-eslint'
  - 'jest'

It’s the primary setting of ESLint. If you want to get more detail, I will recommend reading the ESLint GitHub.

Setup Prettier

Install Prettier

1
2
3

npm install prettier --save-dev
npm install eslint-config-prettier --save-dev
npm install eslint-plugin-prettier --save-dev

Create a .prettierrc.yaml and put into your project directory

1
2
3

trailingComma: "es5"
tabWidth: 2
singleQuote: true

Integrate Prettier with ESLint, in the .eslintrc.yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14

env:
  jest: true
  node: true
extends:
  - plugin:@typescript-eslint/recommended
  - prettier/@typescript-eslint
  - plugin:prettier/recommended
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: 9
  project: ./tsconfig.json
plugins:
  - '@typescript-eslint'
  - 'jest'

Then you’re all set.

Integrate with VS Code

So far, we just set up all rules and plugins for this TypeScript project. There’s one thing we can do in the IDE to make our life easier. Open VSCode settings,

1
2
3
4
5
6
7
8

"editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
"prettier.disableLanguages": ["js"],
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"files.autoSave": "onFocusChange",

This setting will automatically format your code when you save the changed in the file. That means we don’t wait to submit the PR to Github and then get the error.

[Reference]

1. ESLint - Pluggable JavaScript linter
2. Prettier · Opinionated Code Formatter