How To Use ESLint and Prettier Together With TypeScript

This article mainly focuses on the configuration in VSCode.

The way Prettier handles closing tags in HTML in Angular
Before Prettier
After Prettier
settings.json in your VSCode

1- Make sure to install these extensions on your VS Code:

2- Install these packages:

yarn add eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

eslint-config-prettier

eslint-plugin-prettier

@typescript-eslint/eslint-plugin, @typescript-eslint/parser

3- You need to configure your .eslintrc.json file:

4- In your user settings.json add these configurations:

you can open your user settings.json this way

5- If you use mono repo there is one more step you should configure. In your workspace settings.json add this configuration:

Frontend Engineer @ Backbase