如何扩展 Eslint 以使用 create-react-app

Question

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

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

我在我的.env.dev文件中添加了EXTEND_ESLINT=true并且我还创建了一个.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".

我错过了什么？

Answer 1

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

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", "shared-config"],
    "rules": {
      "additional-rule": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }

Answer 2

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