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

Question

我正在尝试将 eslint 添加到我的打字稿create-react-app应用程序中。我正在使用 Visual Studio 代码。

我做了：

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

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

4. 在应用程序的根文件夹中创建一个.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"]
      }
    }
  }
}

5. 启动 eslint 并重新启动 vs code

现在，我尝试做一些 linting 问题，例如尾随空格或不是 pascalCase，但我从未收到 Eslint 的警告，我只看到打字稿错误，但从未看到类似的 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 扩展！