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

问题描述

我已经在项目根目录中创建了一个.env文件，但是我刚接触环境/变量，因此我不确定如何集成该文件，因此可以覆盖未弹出的常规应用程序.护航设置.

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

推荐答案

在项目根目录中，可以将EXTEND_ESLINT设置为true来创建.env文件，以扩展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"
    }
  },
...

现在运行lint，例如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屋！