Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save rimatla/a5a2c5dcf831c5744a656cfe81fadf52 to your computer and use it in GitHub Desktop.
Save rimatla/a5a2c5dcf831c5744a656cfe81fadf52 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

@clementgyimah
Copy link

Thank you very much.

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

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