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

Question

我正在开发一个 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".

我缺少什么？

Answer 1

您可以使用以下语法在文件夹.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", "shared-config"],
    "rules": {
      "additional-rule": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }