create-react-app — 如何将 EXTEND_ESLINT 设置为 true？

Question

我在我的项目根目录中创建了一个.env文件，但我不熟悉环境/变量，所以我不确定如何集成该文件，以便我可以覆盖库存的、未弹出的 react-app eslint 设置。

// My .env file has just this

EXTEND_ESLINT = "true"

cra 文档解释了变量是什么，但不是现在将其设置为 true。 此外，“扩展 ESLint 配置”部分仅在 var 设置为 true 时有用。

// stock create-react-app package.json

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

Answer 1

在项目根目录下，您可以创建.env文件并将EXTEND_ESLINT设置为true以扩展 ESLint 配置：

EXTEND_ESLINT=true

这也有效：

EXTEND_ESLINT = "true"

尝试使用create-react-app版本 3.4.1，即撰写本文时的最新版本。

例如，您可以覆盖package.json的no-unused-vars规则，如下所示：

...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src"
  },
  "eslintConfig": {
    "extends": ["react-app"],
    "rules": {
      "no-unused-vars": "off"
    }
  },
...

现在运行 linter，例如npm run lint ，即使您已将值分配给变量但从未在应用程序中使用它，您也不会看到任何警告，这是您通常会在默认设置中看到的警告。 例如：

const App = () => {
  let myVar = 1; // Never used
  ...
}

注意： npm start和npm run build等也将遵守扩展规则。

---

顺便说一下，原来的package.json看起来是这样的：

...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
...

注意：另一种配置 ESLint 的方法是从package.json文件中删除eslintConfig条目，并在项目根目录中创建.eslintrc或.eslintrc.json如下：

{
 "extends": ["react-app"],
 "rules": {
   "no-unused-vars": "off"
 }
}

---

[更新]如果您发现 react-scripts 不遵守您对 ESLint 规则的更改，这很可能是由缓存引起的。 目前这是该项目的一个未决问题。 您可以在node_modules/react-scripts/config/webpack.config.js手动禁用缓存，如下所示：

          use: [
            {
              options: {
                cache: true, // You can set it to false
                formatter: require.resolve('react-dev-utils/eslintFormatter'),
                eslintPath: require.resolve('eslint'),
                resolvePluginsRelativeTo: __dirname,
                // @remove-on-eject-begin
                ignore: isExtendingEslintConfig,
                baseConfig: isExtendingEslintConfig
                  ? undefined
                  : {
                      extends: [require.resolve('eslint-config-react-app')],
                    },
                useEslintrc: isExtendingEslintConfig,
                // @remove-on-eject-end
              },

请注意，此解决方法仅适用于您的本地开发。 您很可能不需要为构建管道做任何事情，因为管道通常从头开始构建； 所以没有这样的缓存问题。

Answer 2

经过几个小时的努力，感谢@Yuci，我的 eslint 终于理解了我的配置。

我没有直接修复node_modules/react-scripts/config/webpack.config.js的包文件， node_modules/react-scripts/config/webpack.config.js添加了 npm 脚本，以始终在npm run start和npm run build npm run start清除缓存。 这样您就不必担心将来会“意外”通过rm -rf node_modules; npm install rm -rf node_modules; npm install未来的我没那么聪明。

在packages.json ，更改脚本实体，如下所示：

  "scripts": {
    "start": "npm run clear_cache:eslint && react-scripts start",
    "build": "npm run clear_cache:eslint && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "clear_cache:eslint": "rm -rf node_modules/.cache/eslint-loader"
  },

Answer 3

一个简短的答案是在script命令中内联，例如

{
  "scripts": {
    "start": "EXTEND_ESLINT=true react-scripts start"
  }
}

但这不太理想，因为您还必须将EXTEND_ESLINT=true添加到所有其他react-script命令