Set Up TSLint and Prettier in VS Code for React App with Typescript
Tags: Typescript, React, Vscode, Linter, Tslint

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

npm install prettier --save-dev

Specify the formatting rules you want in a .prettierrc file, which you create at the root level of your project, same as package.json:

{

"printWidth": 80,

"tabWidth": 2,

"singleQuote": true,

"trailingComma": "es5",

"semi": true,

"newline-before-return": true,

"no-duplicate-variable": [true, "check-parameters"],

"no-var-keyword": true

}

Add TSLint dependencies to your React project

npm i --save-dev tslint tslint-react

TSLint will be deprecated some time in 2019. See this issue for more details: Roadmap: TSLint → ESLint.

So, in case if you are interested in migrating from

tslint-react . Lint rules related to React & JSX for TSLint.

Adding Linter Configuration

Now, let’s configure our linter, TSLint, by adding a file called tslint.json at the root level (same as package.json ) of your project.

Below follows the configuration that I am currently using in my CRA project. Feel free to copy and adjust the “rules” (on line 9) according to the needs of your project.

Adding TypeScript-specific configuration

Another file that you have in your CRA-based project is tsconfig.json , which contains TypeScript-specific options for your project.

Also, there are tsconfig.prod.json and a tsconfig.test.json in case you want to make any tweaks to your production or test builds.

Add the rest of the dependencies

To make Prettier compatible with TSLint, install the tslint-config-prettier rule preset:

npm i --save-dev tslint-config-prettier

Usage

Now, to actually lint your .ts and .tsx files, run tslint -c tslint.json 'src/**/*.{ts,tsx}' command in your terminal.

Additional plugins

In case you want to add tslint-plugin-prettier to your project, and it will run Prettier as a TSLint rule and report differences as individual TSLint issues.

npm i --save-dev tslint-plugin-prettier

You will then have to add few lines to the TSLint configuration file tslint.json like below:

{

"extends": [

"tslint:recommended",

"tslint-react",

"tslint-config-prettier"

],

"rulesDirectory": [

"tslint-plugin-prettier"

],

"rules": {

"prettier": true,

"interface-name": false

}

}

However, I did not try using it in my own project, so this is just additional info.

Finally

I created the following script in my package.json , and named it lint:ts . You can name it whatever you want.

"scripts": { "lint:ts": "tslint 'src/**/*.{ts,tsx,js}'", },

By adding this configuration you can now run linting on your project files in terminal like so:

➜ my-app git:(feature/new-feature) ✗ npm run lint:ts

Running this command and fixing errors (if any) before pushing your code to the repo will help you avoiding failed Jenkins builds. 👌 🎊