禁用 create-react-app 提供的 ESLint

Question

create-react-app v3.0.0 已发布。 它在内部支持 TypeScript linting。 （太好了！）我想我了解 TSLint 开启的情况，并计划用 ESLint 替换它，但现在不行。

如何禁用react-scripts start中的 linting 步骤？

/* eslint-disable */和其他不是我要找的。

Answer 1

从react-scripts v4.0.2 开始，您现在可以使用环境变量选择退出 ESLint。 你可以通过将它添加到你的.env文件中，或者在你的 package.json 文件中为你的脚本添加前缀来做到这一点。

例如在.env中：

DISABLE_ESLINT_PLUGIN=true

或者在你的 package.json 中：

{
  "scripts": {
    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
    "test": "DISABLE_ESLINT_PLUGIN=true react-scripts test"
  }
}

https://github.com/facebook/create-react-app/pull/10170

Answer 2

您可以将 EXTEND_ESLINT 环境变量设置为true ，例如在.env文件中：

EXTEND_ESLINT=true

现在您可以在package.json文件中扩展 eslint 配置：

...
"eslintConfig": {
    "extends": "react-app",
    "rules": {
      "jsx-a11y/anchor-is-valid": "off"
    }
  },
...

要禁用 eslint，您可以添加一个包含以下内容的文件.eslintignore ：

*

有关详细信息，请参阅文档： https ://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config

Answer 3

您可以使用Craco禁用eslint （并覆盖其他配置）。

它需要4个更改：

1. npm install @craco/craco --save
2. 创建craco.config.js （在与 package.json 相同的文件夹中）
3. 用以下内容填充craco.config.js ：

module.exports = {
  eslint: {
    enable: false,
  },
};

最后，在你的package.json脚本中用craco替换react-script ，即

"scripts": {
  "build": "craco build",
  "start": "craco start",
}

这将禁用 ESLint。 有关如何扩展 ESLint 配置的示例，请参阅Craco 文档。

Answer 4

步骤1

如果项目根目录不存在，则在项目根目录中创建.env文件并将此行添加到其中

EXTEND_ESLINT=true

第2步

使用以下内容将.eslintrc.js添加到您的项目根目录

module.exports = {
  "extends": ["react-app"],
  "rules": {
  },
  "overrides": [
    {
      "files": ["**/*.js?(x)"],
      "rules": {
// ******** add ignore rules here *********
        "react/no-unescaped-entities": "off",
        "react/display-name": "off",
        "react/prop-types": "off",
      }
    }
  ]
}

请注意override > rules部分：添加带有“关闭”标志的规则以禁用它们。

Answer 5

我没有弹出的解决方法：

1. 在.eslintrc.js中使用环境变量，如下所示：

module.exports = {
    "extends": process.env.REACT_APP_DEV_DISABLE_ESLINT ? [] : [
      "eslint:recommended",
      "plugin:import/errors",
      "plugin:import/warnings",
      "plugin:json/recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:jsx-a11y/recommended",
      "plugin:react/recommended",
    ],
    "rules": process.env.REACT_APP_DEV_DISABLE_ESLINT ? {} : {
      // ...rules for production CI
    }
}

2. 在package.json的启动脚本中设置变量：

{
      "scripts": {
          "eslint:disable": "REACT_APP_DEV_DISABLE_ESLINT=true",
          "start": "npm run eslint:disable  react-scripts start"
      }
}

Answer 6

首先确保EXTEND_ESLINT环境变量设置为 true。 可以在.env文件中设置。

对于 Typescript，应在 overrides 数组中添加更多规则，如下例所示：

{
  "eslintConfig": {
    "extends": ["react-app"],
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "eqeqeq": "warn"
        }
      }
    ]
  }
}

Answer 7

我的解决方法：

添加 .eslintignore 文件：

*

并使用--no-ignore运行 eslint。 因此，您可以设置自己的 eslint。 如果你需要一个忽略文件，你可以使用--ignore-path来定义它，而不是使用--no-ignore选项。

Answer 8

一种方法是eject react-scripts - 通过运行yarn eject injection / npm run eject runeject - 并手动关闭eslint配置文件中的webpack 。

请注意，不应轻率地进行弹出，并且在弹出之前应考虑其他选项。 请阅读不要弹出您的 Create React 应用程序以了解它的含义以及您不应该这样做的某些原因

请看一下这个分支： create-react-app 仔细看看，尤其是在eject-tic_tac_toe目录中，你有scripts/start.js - 在yarn start / npm start和config/webpack.config.dev.js - 你有 webpack 的配置，在start.js中使用。 这是您可能有兴趣编辑的部分：

// …
module.exports = {
  // …
  module: {
    preLoaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'eslint',
        include: paths.appSrc,
      }
    ]
  }
  // …
};