Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Durairaj/ff93f3d4d047184838b865a6c93d3639 to your computer and use it in GitHub Desktop.
Save Durairaj/ff93f3d4d047184838b865a6c93d3639 to your computer and use it in GitHub Desktop.
Create React App + TypeScript Linting with TSLint and Prettier setup on VSCode

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,
}
  1. npx create-react-app [project-name] --typescript

  2. cd into [project-name]

  3. 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
  1. 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
  }
}
  1. Create a .prettierrc file and add your desired rules i.e ๐Ÿ‘‡
{
    "trailingComma": "es5",
    "printWidth": 100,
    "semi": false,
    "singleQuote": true
}
  1. 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment