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

Posted 2023-02-24

技术标签:

【中文标题】create-react-app — 如何将 EXTEND_ESLINT 设置为 true？【英文标题】：create-react-app — how to set EXTEND_ESLINT to true? 【发布时间】：2020-06-03 01:31:15 【问题描述】：

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

// My .env file has just this

EXTEND_ESLINT = "true"

c-r-a docs 解释了变量是什么，但不是现在将其设置为 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"
,

【问题讨论】：

你想做什么？您是否尝试过您想做的事情并遇到错误？ @azium 我正在尝试覆盖 create-react-app 中的 eslint 设置（未弹出）。文档说您必须将 EXTEND_ESLINT 设置为 true，但我不知道该怎么做。之后我 [认为] 我可以创建自己的 .eslintrc.js 文件并添加规则。文档说要更新您拥有的.env ..您是否尝试过覆盖任何内容？不行吗？我似乎偶然发现了答案。我创建了一个 .eslintrc 文件（无扩展名）并添加了我的覆盖并且它起作用了。我认为使用 .env 文件中设置的 EXTEND_ESLINT var 现在可以使用。哈哈。不知道我是怎么做到的，只是不断尝试。你从一开始就没有说过它坏了。无论如何，文档很清楚，我会按照他们所说的去做，你应该擅长这个和其他 CRA 相关问题 【参考方案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 规则的更改，则很可能是由缓存引起的。目前是an open issue of the project。您可以手动禁用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
              ,

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

【讨论】：

这不起作用。当我运行npm run eslint 命令时，它可以工作。但是当我运行npm run dev 时，错误仍然出现。 @EnZo 感谢 cmets。请参阅我更新的答案中的注释，它应该适用于您的设置中的npm run dev，并将环境变量 EXTEND_ESLINT 设置为 true。还是不行，我在.env 的EXTEND_ESLINT=true 行有完全相同的配置。还有package.json 中的 "extends": ["react-app"], "rules": "no-unused-vars": "off" 。也试过 .eslintrc 或 .eslintrc.json 您使用哪个 create-react-app 版本？ @EnZo 或有关您的反应版本、反应脚本版本等的更多信息？ @EnZo，是关于eslint缓存的，看我的回复：github.com/facebook/create-react-app/issues/9007【参考方案2】：

在挣扎了几个小时后，感谢@Yuci，我的 eslint 终于了解了我的配置。

我没有直接修复node_modules/react-scripts/config/webpack.config.js 中的包文件，而是添加了npm 脚本以始终在npm run start 和npm run build 的开头清除缓存。这样您就不必担心将来 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"
  ,

【讨论】：

【参考方案3】：

一个简短的答案就是在script 命令中内联


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