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

4 min readMay 5, 2019

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”:

Choose the first option from the above, Preferences: Open Settings (JSON), and add the following rule to the settings.json:

“editor.formatOnSave”: true

If you open the workspace settings, you will see that the rule is reflected immediately after you save the changes to your settings.json file like so:

Add Prettier to your project

Prettier is a fully automatic “style guide” worth adopting.

“When you’re a beginner you’re making a lot of mistakes caused by the syntax. Thanks to Prettier, you can reduce these mistakes and save a lot of time to focus on what really matters.”