如何扩展Eslint与create-react-app一起使用

问题描述

我正在开发一个React应用程序，我想设置一个linter，以便可以在控制台中看到所有警告/错误。

文档并没有说太多：https://create-react-app.dev/docs/setting-up-your-editor/

我在EXTEND_ESLINT=true文件中添加了.env.dev，并且还创建了一个.eslintrc.json文件，其内容如下（摘自文档）：

{
  "eslintConfig": {
    "extends": ["react-app","shared-config"],"rules": {
      "additional-rule": "warn"
    },"overrides": [
      {
        "files": ["**/*.ts?(x)"],"rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }
}

我尝试添加的每条规则都不会做任何事情，在控制台中我仍然看不到任何警告，最重要的是，如果我尝试从命令行运行linter：

npx eslint ./src

我收到以下错误：

ESLint configuration in .eslintrc.json is invalid:
    - Unexpected top-level property "eslintConfig".

我想念什么？

解决方法

您只需在package.json中添加插件规则和配置，而无需创建.eslintrc.json和env变量

,

您可以使用以下语法在.eslintrc.js文件夹中创建src文件：

module.exports = {
    extends: ["react-app","shared-config"],rules: {
      "additional-rule": "warn"
    },overrides: [
      {
        "files": ["**/*.ts?(x)"],"rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }

或将其添加到您的package.json（不是.eslintrc.json文件）：

"eslintConfig": {
    "extends": ["react-app","rules": {
      "additional-rule": "warn"
    },"overrides": [
      {
        "files": ["**/*.ts?(x)"],"rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }