eslint for typescript

.eslintrc.json

{
    "env": {
      "browser": true,
      "es6": true
    },
    "parser": "@typescript-eslint/parser",
    "extends": [
      "plugin:@typescript-eslint/recommended", 
      "plugin:react/recommended",
      "plugin:prettier/recommended",
      "prettier/@typescript-eslint"
    ],
    "parserOptions": {
      "ecmaVersion": 8,
      "ecmaFeatures": {
        "experimentalObjectRestSpread": true,
        "jsx": true
      },
      "sourceType": "module"
    },
    "plugins": ["react", "react-hooks", "@typescript-eslint"],
    "rules": {
      "indent": ["error", 2],
      "linebreak-style": ["error", "unix"],
      "quotes": ["error", "single"],
      "semi": ["off", "never"],
      "no-console": "off",
      "react/display-name": ["off"],
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn",
      "@typescript-eslint/explicit-function-return-type": "off"
    },
    "globals": {
      "describe": false,
      "beforeEach": false,
      "global": false,
      "process": false,
      "test": false,
      "expect": false
    }
  }

dependencies.install.sh

yarn add eslint \
         @typescript-eslint/eslint-plugin \
         @typescript-eslint/parser \
         eslint-plugin-react \ 
         eslint-config-airbnb \
         eslint-plugin-react-hooks \
         eslint-plugin-prettier \
         eslint-plugin-typescript \      // prettier plugin, prettier need both install in global or both in local, they need to be in same scope(global or local)
         prettier  \
         -D

vscode settings.json

// set this in the vscode config file to make vscode eslint extension will work when we write our code

// ....and many other settings
"eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
  ],

The future of TypeScript on ESLint
如何用 ESLint 检查 TypeScript 代码
Using ESLint and Prettier in a TypeScript Project
TypeScript | 當 TypeScript 遇上 React 的超級聯名 TSX 款

note:

this setup may not suitable for an application that has not not ejected from create-reacta-app template,
because CRA use its own eslint and has config that for their user.