Create React App + TypeScript Linting with TSLint and Prettier setup on VSCode

TSLInt-Prettier-CreateReactApp-TypeScript-setup.md

Ps: The current setup was done on 01-04-19

Project Dependency Versions at the time 👇

  "react": "^16.7.0",
  "react-dom": "^16.7.0",
  "react-scripts": "2.1.3",
  "typescript": "^3.2.2"
  "tslint": "^5.12.0",
  "tslint-config-prettier": "^1.17.0",
  "tslint-plugin-prettier": "^2.0.1",
  "tslint-react": "^3.6.0"

Directions:

1. Install Prettier and TypeScript TSLint Plugin extensions on your VSCode

2. Edit (per your desire) the following on your VSCode settings 👇

{
  "editor.formatOnSave": false,
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  },
  "prettier.tslintIntegration": true,
  "prettier.eslintIntegration": true,
  "prettier.jsxSingleQuote": false,
  "prettier.singleQuote": true,
}

3. npx create-react-app [project-name] --typescript

4. cd into [project-name]

5. Install the following dependecies to package.json 👇

yarn add --dev typescript 
yarn add @types/node @types/react @types/react-dom @types/jest
yarn add --dev tslint
yarn add --dev tslint-config-prettier
yarn add --dev tslint-plugin-prettier
yarn add --dev tslint-react

6. Create a tslint.json file with the following config 👇

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

7. Create a .prettierrc file and add your desired rules i.e 👇

{
    "trailingComma": "es5",
    "printWidth": 100,
    "semi": false,
    "singleQuote": true
}

8. Quit and restart VSCode again

Note: tslint-config-prettier is shipped with a little CLI tool to help you check if your configuration contains any rules that are in conflict with Prettier. (require tslint installed
In order to execute the CLI tool, first add a script for it to package.json:

{
  "scripts": {
    "tslint-check": "tslint-config-prettier-check ./tslint.json"
  }
}

Then run yarn tslint-check or npm run tslint-check

You may also run TS lint directlly as a script on your package.json

"scripts": { 
     "lint": "tslint -c tslint.json src/**/*.{ts,tsx} --fix --format verbose"
 }

Then run yarn lint or npm run lint

"lint": "tslint -c tslint.json src/**/*.{ts,tsx} --fix --format verbose"

Might not work. I Can see thhe errors when run npx tslint -c tslint.json src/**/*.{ts,tsx} --fix --format verbose. But npm run lint not work

"lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}' --fix --format verbose",

Use this instead

thanks very much

Thank you!

Thank you.

Much appreciated, thank you!

Thanks.

And for me, I also need to install prettier while run tslint -c tslint.json src/**/*.{ts,tsx}, like:

yarn add -D prettier

thank you very much

Thank you very much.

In case anyone faces an error that says, Can't find module prettier, run:
yarn add --dev prettier