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

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

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

--

--

theUnknown

Everything is unknown until it’s known. Self-learner.