javascript - 如何扩展 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"
        }
      }
    ]
  }