禁用 create-react-app 提供的 ESLint答案

【问题标题】：Disable ESLint that create-react-app provides禁用 create-react-app 提供的 ESLint
【发布时间】：2019-09-13 05:18:26
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs typescript eslint create-react-app

【解决方案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

【讨论】：

工作正常，谢谢

【解决方案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

【讨论】：

这不会禁用 eslint。这只是将 eslint 排除在所有文件中。技术上不一样。

【解决方案3】：

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

需要 4 次更改：

npm install @craco/craco --save
创建 craco.config.js（与 package.json 在同一文件夹中）
用：填充craco.config.js：

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

最后，在 package.json 脚本中将 react-script 替换为 craco，即

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

这将禁用 ESLint。扩展 ESLint 配置的示例参考Craco documentation。

【讨论】：

【解决方案4】：

步骤 1

在你的项目根目录中创建.env 文件（如果它不存在）并将这一行添加到它

EXTEND_ESLINT=true

第二步

将.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 部分：添加带有“off”标志的规则以禁用它们。

【讨论】：

【解决方案5】：

我没有弹出的解决方法：

像这样在 .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
    }
}

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

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

发生在我身上的一件有趣的事是，虽然这隐藏了我想要的那个，但它也产生了以前从未见过的新的。

【解决方案7】：

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

请注意，尽管弹出不应轻率地进行，并且应在弹出之前考虑其他选项。请阅读Don’t eject your Create React App 以了解它的含义，或许还有一些你不应该这样做的原因

请看一下这个fork：create-react-app closer look，尤其是在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,
      }
    ]
  }
  // …
};

【讨论】：

【解决方案8】：

我的解决方法：

添加 .eslintignore 文件：

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

【讨论】：