typescript - Eslint 在我的 React 应用程序中不起作用

Question

我正在尝试将 eslint 添加到我的 typescript create-react-app 应用程序中。我正在使用 Visual Studio Code。

我做到了:

1. 以可视化代码下载 Eslint 包
2. 下载 Eslint 包
3. 我安装了 3 个 eslint 插件

    "eslint:recommended", 
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"

1. 在应用程序的根文件夹中创建一个如下所示的 .eslintrc 文件

{
  "plugins": [
    "react"
  ],
  "extends": [
    "eslint:recommended", 
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "settings": {
    "import/resolver": {
      "node": {},
      "babel-module": {
        "root": ["./src"]
      }
    }
  }
}

1. 启动 eslint 并重启 vs code

现在，我尝试做一些 linting 问题，比如尾随空格或不是 pascalCase，但我从来没有收到 Eslint 的警告，我只看到 typescript 错误，但从来没有看到一些 linting 问题，比如。

是否需要进行一些额外的配置才能使其在我的工作区中运行？

Answer 1

遇到了类似的问题。原来我没有指定任何规则，所以从技术上讲，Eslint 正在工作，但没有设置任何规则。首先，尝试扩展 Airbnb 规则:

"extends": [
    "eslint:recommended", 
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "airbnb"
  ],

您还应该为您的文件指定一个 TypeScript 解析器:

module.exports = {
  parser: '@typescript-eslint/parser',
  ...
}

不要忘记安装上面的:npm i --save-dev @typescript-eslint/parser

最后检查您是否为您的编辑器设置了 Eslint 扩展!