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

Usage

Additional plugins

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

Finally

"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