Create React App with ESLint, TypeScript, Prettier

.eslintignore

src/serviceWorker.ts

.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "env": {
    "browser": true,
    "jasmine": true,
    "jest": true
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  },
  "parser": "@typescript-eslint/parser"
}

README.md

Create the React App

npx create-react-app my-app --typescript
cd my-app

Install ESLint and Prettier

npm i -D @types/react @types/react-dom @types/node @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-config-react eslint-plugin-prettier prettier

Download eslint config

curl https://gist.githubusercontent.com/nnance/7278e4db2254186af1278a4d928adb5e/raw/1fc30b48d901b5acd6cdbf233341baa6be6ce735/.eslintrc.json -o .eslintrc.json
curl https://gist.githubusercontent.com/nnance/7278e4db2254186af1278a4d928adb5e/raw/1fc30b48d901b5acd6cdbf233341baa6be6ce735/.eslintignore -o .eslintignore

Add Lint Script to package.json

"lint": "eslint './src/**/*.{ts,tsx}'",
"lint:fix": "eslint './src/**/*.{ts,tsx}' --fix"

Configure vscode to use eslint.

1. Open settings with command ,
2. type eslint: validate in the search box
3. click edit in settings.json and add the following lines

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "typescript",
        "autoFix": true
    },
    {
        "language": "typescriptreact",
        "autoFix": true
    }
],

Did you make a mistake with this or is it intentional?

yarn create react-app my-app --template=typescript