create-react-app — 如何将 EXTEND_ESLINT 设置为 true? [英] create-react-app — how to set EXTEND_ESLINT to true?

问题描述

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

I have created a .env file in my project root but I'm new to working with environments / variables and so I'm unsure how to integrate the file so I can override the stock, non-ejected react-app eslint settings.

// My .env file has just this

EXTEND_ESLINT = "true"

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

The c-r-a docs explain what the variable is, but not now to set it to true. Also, the section on 'Extending the ESLint config' is helpful only for once the var is set to true.

// stock create-react-app package.json

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

推荐答案

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

In the project root directory, you can create the .env file with EXTEND_ESLINT set to true so as to extend the ESLint config:

EXTEND_ESLINT=true

这也有效:

EXTEND_ESLINT = "true"

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

Tried with create-react-app version 3.4.1, the latest version at the time of writing.

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

As an example, you can override the no-unused-vars rule in the package.json, as below:

...
  "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，即使您已为变量赋值但从未在应用程序中使用过它，您也不会看到任何警告，这种警告是您通常会在默认设置下看到.例如:

Now run the linter, e.g., npm run lint, you will not see any warning even if you have assigned a value to a variable but never used it in your application, kind of warning which you would normally see by the default settings. For example:

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

注意:npm start和npm run build等，也会遵守扩展规则.

Note: npm start and npm run build, etc., will also honour the extended rules.

顺便说一下，原来的package.json是这样的:

By the way, the original package.json looks like this:

...
  "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 在项目根目录下如下:

Note: Another way to configure ESLint is to remove the eslintConfig entry from the package.json file and create .eslintrc or .eslintrc.json in the project root directory as below:

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

---

[更新] 如果您发现 react-scripts 不遵守您对 ESLint 规则的更改，则很可能是由缓存引起的.目前它是项目的公开问题.您可以在 node_modules/react-scripts/config/webpack.config.js 中手动禁用缓存，如下所示:

---

[Update] If you find that react-scripts is not honouring your change to the ESLint rules, it is most likely caused by the cache. It is an open issue of the project at the moment. You can manually disable the cache in node_modules/react-scripts/config/webpack.config.js like below:

          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
              },

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

Note that this workaround would only be for your local development. You don't need to do anything for your build pipeline most likely, as the pipeline usually builds from scratch; so there is no such cache issue out there.

这篇关于create-react-app — 如何将 EXTEND_ESLINT 设置为 true?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！