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

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

“editor.formatOnSave”: true

Add Prettier to your project

npm install prettier --save-dev
"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

Adding Linter Configuration

Adding TypeScript-specific configuration

Add the rest of the dependencies

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


Additional plugins

npm i --save-dev tslint-plugin-prettier
"extends": [
"rulesDirectory": [
"rules": {
"prettier": true,
"interface-name": false


"scripts": {"lint:ts": "tslint 'src/**/*.{ts,tsx,js}'",},
➜  my-app git:(feature/new-feature) ✗ npm run lint:ts

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store