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

Question

我为此找到了大量 "solutions"，从简单的 package.json 添加到自定义 hack 模块，但 none 对我有用。

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

即规则"no-unused-vars".

我正在使用 Visual Studio 代码。

Answer 1

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

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

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

Answer 2

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

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

Answer 3

我似乎是无意中修复了这个问题，只是尝试组合我在网上找到的东西。这似乎奏效了。

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

// .env file

EXTEND_ESLINT = true

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

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

Answer 4

在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

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

Override eslint settings in non-ejected create-react-app?

overriding

reactjs

eslint

create-react-app