Eslint 不使用 TypeScript 语法

Question

I am trying to configure eslint for my REACT-TypeScript project. It was previously using tslint which is going to deprecate soon. I have gone through the web and finally was able to create my .eslintrc.json :

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "project": "./tsconfig.json",
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "jest/globals": true
  },
  "extends": [
    "airbnb",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/typescript",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": ["@typescript-eslint", "react-hooks", "jest", "prettier"],
  "ignorePatterns": ["src/serviceWorker.ts", "src/enums.ts", "node_modules/"],

  "rules": { },
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "prettier/prettier": [
    "error",
    {
      "singleQuote": true,
      "semi": "error"
    }
  ]
}

When I run the lint command, it throws errors about the TypeScript syntax. Here are few:

All links on google are now purple and still, I can't seem to figure out what's wrong. Please help me to see this through.

Answer 1

To me your configuration seems good. If it is a Typescript error there is nothing you can do with ESLint. Just upgrade Typescript.

Just in case check this ESLint Prettier Typescript configuration which is a reference to me https://levelup.gitconnected.com/setting-up-eslint-with-prettier-typescript-and-visual-studio-code-d113bbec9857 ? it is close to yours

Answer 2

You don't need to specify parser , parserOptions , settings for TS or react. You can just extend airbnb TS config, and add the other plugins like (jest, prettier, ...) only:

So your .eslintrc will look like:

{
  "extends": ["airbnb-typescript", "plugin:jest/recommended"],
  "plugins": ["jest", "prettier"]
}

to install airbnb TS config

npm install eslint-config-airbnb-typescript \
            eslint-plugin-import@^2.18.2 \
            eslint-plugin-jsx-a11y@^6.2.3 \
            eslint-plugin-react@^7.15.1 \
            eslint-plugin-react-hooks@^1.7.0 \
            @typescript-eslint/eslint-plugin@^2.7.0 \
            --save-dev

or refer to the package docs