在非弹出的 create-react-app 中覆盖 eslint 设置？

Question

我为此找到了大量“解决方案”，从简单的 package.json 添加到自定义 hack 模块，但没有一个对我有用。

我只是想覆盖一个开箱即用的、非弹出的 create-react-app 的 eslint 设置。

即规则“no-unused-vars”。

我正在使用 Visual Studio Code。

Answer 1

我似乎只是尝试组合我在网上找到的东西时偶然解决了这个问题。这似乎奏效了。

1) 我在项目根目录（package.json 文件所在的位置）中创建了一个 .env 文件。在里面我有：

// .env file

EXTEND_ESLINT = true

2) 然后我在我的项目根目录中创建了一个 .eslintrc 文件（无扩展名）并添加了这个：

// .eslintrc file (no extension)
{
  "extends": [
    "react-app"
  ],
  "rules": {
    "no-unused-vars": "off"
  }
}

Answer 2

该库现在支持原生扩展预定义的 ESLint 规则，请参阅 the relevant docs。

---

它的要点是你必须设置 EXTEND_ESLINT 环境变量，然后将你自己的 ESLint 配置添加到项目根目录，可选择扩展 create-react-app 的：

{
  "eslintConfig": {
    "extends": ["react-app"],
    "overrides": [
      {
        "files": ["**/*.js"],
        "rules": {
          "no-unused-vars": "warn"
        }
      }
    ]
  }
}

Answer 3

在create-react-app项目中package.json已经准备好了，你只需要添加rules字段。

package.json

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ],
+ "rules": {
+    "react/self-closing-comp": 1
+  }
},

It's important to note that any rules that are set to "error" will stop the project from building.

create-react-app 使用 eslint-config-react-app，它包含了几乎所有流行的 eslint 包。

• eslint-plugin-flowtype
• eslint-plugin-import
• eslint-plugin-jest
• eslint-plugin-jsx-a11y
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-testing-library

eslint-config-react-app github https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app

eslint-config-react-app npm https://www.npmjs.com/package/eslint-config-react-app

Answer 4

并不难，只需按照以下步骤操作：

1. npm i -D eslint eslint-plugin-react
2. npx eslint --init
3. 编辑生成的配置文件，例如.eslintrc.json
4. 将您的规则放在"rules": { ... } 部分