如何在 Create React App 中不显示警告

Question

我正在使用 Facebook 的 create-react-app，当它通过“npm start”启动时，它会向我显示警告列表，例如：

'Bla' 已定义但从未使用
预期 '===' 而看到的是 '=='

我不想看到任何这些警告，有没有办法抑制它们？

Answer 1

这些警告来自 eslint。 要禁用它们，请在您不想遵循 eslint 规则的文件顶部添加/* eslint-disable */ 。

Answer 2

对于本地 Eslint，将一个名为.eslintignore的文件添加到您的项目中，并添加您想要忽略的任何目录或文件：

build/
src/
*.js

尽管此时您最好将其完全删除。

---

但是，如果您使用的是create-react-app ，这不适用于构建或启动代码。 在不弹出的情况下无法禁用 Eslint，因为它内置于 react-scripts 中。 无论何时构建或启动服务器，它都会使用其内部配置运行 eslint，除了package.json定义的特殊情况。 解决此问题的唯一方法是使用其他地方提到的禁用注释弹出或添加每个文件。 有关更多信息，请参阅Github 上的此问题。

Answer 3

对于特定的eslint警告抑制，请在文件开头插入以下代码。

/* eslint-disable react/no-direct-mutation-state */

Answer 4

我的代表不够高，无法评论@fly 的出色答案，所以我将 C+P 改为添加以下内容：

对于任何正在寻找临时但快速有效的解决方法来禁用 DevTools 的控制台警告的人来说，这可能会奏效。

免责声明 - 这可能不适用于不是我的版本（react-scripts v3.0.1，react-dev-utils@^9.0.1），所以使用它需要您自担风险。

• 进入这个目录

node_modules/react-dev-utils/webpackHotDevClient.js

• 寻找这个函数（应该在第 114 行附近）

function handleWarnings(warnings) {

• 要么在function printWarnings()的开头添加return （第 124 行），要么在第 145 行注释掉对printWarnings()的调用。

• 重新启动，例如使用npm run start ，以使更改生效。

这样，热重载器继续工作，但我的编辑器中已经捕获的烦人警告不会在浏览器中输出。

Answer 5

最近添加了添加您自己的编辑器配置的功能，这可用于“部分”禁用 ESLint 的功能。 您只需要在根目录中创建一个配置文件。

.eslintrc :

{
  "parser": "babel-eslint"
}

.env

SKIP_PREFLIGHT_CHECK=true

如果你创建一个新的应用程序，它默认会在package.json带有一个预填充的eslintConfig对象

Answer 6

对于任何正在寻找临时但快速有效的解决方法来禁用 DevTools 的控制台警告的人来说，这可能会奏效。

免责声明 - 这可能不适用于不是我的版本（react-scripts v3.0.1，react-dev-utils@^9.0.1），所以使用它需要您自担风险。

1. 进入这个目录

   node_modules/react-dev-utils/webpackHotDevClient.js

2. 寻找这个函数（应该在第 114 行附近）

   函数句柄警告（警告）{

并在它后面添加一个 return 语句。

您的代码最终应如下所示（如果您使用的是 webstorm）

这应该关闭 webpackHotDevClient.js:{whateverLineIdontCare} 了。 干杯。

Answer 7

要完全删除 eslint 警告，您可以做的是创建一个名为.eslintignore add * 的文件并保存它。 您不会再看到任何警告。

*

从特定文件夹中删除警告意味着在.eslintignore文件中添加该文件夹名称

/folder_name
/folder_name/file_name.js

您也可以在文件级别执行此操作。 在文件开头添加以下内容

/* eslint-disable */ 

忽略文件中的下一行警告

// eslint-disable-next-line 

Answer 8

如果你想在 DevTools 中禁用警告

1. 打开控制台选项卡。
2. 默认级别/自定义级别 -> 取消选中警告

Answer 9

这是我在调试时避免看到未使用的变量警告的一种简单方法：

import someVariable from "./wherever"

// Prevent unused variable warnings
while (false) {
 console.log(someVariable)
}

Answer 10

添加一个.eslintignore文件并添加

src/*

你可以阅读更多关于这个

1. https://eslint.org/docs/user-guide/configuring/ignoring-code
2. https://eslint.org/docs/user-guide/configuring/rules

Answer 11

设置DISABLE_ESLINT_PLUGIN环境变量：

DISABLE_ESLINT_PLUGIN=true npm start

Answer 12

如果您使用的是 create-react-app，那么您可以进入 package.json 并编辑eslintConfig值。 我只是想禁用“eqeqeq”和“no-unused-vars”规则，所以我的看起来像这样：

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

您必须重新运行npm start才能生效。

Answer 13

例如，您可以使用craco并配置 craco.config.js

 module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const ignoreWarnings = [{ module: /some module/, message: /some message/ }]
      return { ...webpackConfig, ignoreWarnings }
    }
  }
}

更多细节在这里