禁用create-react-app提供的ESLint

Question

create-react-app v3.0.0已经发布，它内部支持TypeScript的linting（挺不错的！）。我认为我理解了启用TSLint的情况，并计划将其替换为ESLint，但目前还没有做到。

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

/* eslint-disable */等方法并不是我要找的方法。

- Ginpei

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

- sargunv

---

.env 的解决方案仍然可行，但 package.json 的不行。 - Daniyal Malik

在添加 package.json 时，我遇到了这个错误 -“DISABLE_ESLINT_PLUGIN”不被识别为内部或外部命令。 - Jay Momaya

如果你遇到了这个错误（比如在Windows上运行时），请尝试使用以下代码替代： "start": "set DISABLE_ESLINT_PLUGIN=true && react-scripts start", - i-know-nothing

正是我所需要的。我在我的monorepo中有一个共享的eslint配置，它与CRA eslint配置存在冲突，通过使用.env变量禁用它拯救了我。 - Cajotafer

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

- kodemi

---

这并不禁用 eslint。这只是将 eslint 排除在所有文件之外。从技术上讲，它们并不完全相同。 - zhuhang.jasper

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脚本中将react-script替换为craco。

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

这将禁用ESLint。请参考Craco文档以获取如何扩展ESLint配置的示例。

- Gajus

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

- Nitin Jadhav

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

- Michael Chan

Answer 6

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

对于TypeScript，需要在覆盖数组中添加更多规则，示例如下：

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

- Chirag Rupani

---

发生在我身上的一件有趣的事情是，尽管它隐藏了我想要的那一个，但它也产生了以前从未见过的新的。 - Max Carroll

Answer 7

我的解决方法：

添加一个 .eslintignore 文件：

*

并运行 eslint 时加上 --no-ignore。这样您就能够设置自己的 eslint。如果您需要一个忽略文件，可以使用 --ignore-path 定义它，而不是使用 --no-ignore 选项。

- ranzwertig

Answer 8

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

但请注意，弹出应谨慎进行，并在弹出之前应考虑其他选项。请阅读不要弹出您的Create React App以了解其含义，以及您不应该这样做的原因。

请查看此分支：create-react-app closer look，特别是eject-tic_tac_toe目录，在其中有scripts/start.js - 在yarn start / npm start之后发生魔法的脚本 - 和config/webpack.config.dev.js - 在start.js中使用的webpack配置。这是您可能感兴趣编辑的部分：

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

- pawel-schmidt

Answer 9

也许你只需要在编译时禁用它，而不是在控制台中检查它？

然后，要么替换 start 脚本，要么使用一个新的脚本，例如 start-force

{
  "scripts": {
    "start-force": "ESLINT_NO_DEV_ERRORS=true react-scripts start",
  }
}

- kosiakMD

Answer 10

在 package.json 中，您可以找到 eslintConfig 规则，它可能已经有一些内容，就像这样：

  "eslintConfig": {
"extends": [
  "react-app",
  "react-app/jest"
]
},

在这里，您可以禁用想要禁用的规则：

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

- Ashu