Set Up TSLint and Prettier in VS Code for React App with Typescript

It is very useful to add linting to your project as it keeps your code more readable, clean, standardized and maintainable.

Below you will find full configuration of the files that I am currently using in my working React project, and you can use it as a point of reference of your own.

First, install the following VS Code extensions:

• Prettier — Code formatter. VS Code package to format your JavaScript / TypeScript / CSS using Prettier.
• TSLint. Adds tslint to VS Code using the TypeScript TSLint language service plugin.

After you have installed this plugin you need to enable it in tsconfig.json:

{
 “compilerOptions”: {
 …,
 “plugins”: [{“name”: “typescript-tslint-plugin”}]
 },
 …
}

In case, you might want to format your code using the Prettier extension after saving a file, you will need to configure VS Code Workspace Settings.

You can quickly get there through the Command Palette… (cmd + shift + P, by default on MacOs) and type “>settings”: