如何在 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 中定义的特殊情况。解决这个问题的唯一方法是弹出或在每个文件前面添加禁用注释，如其他地方所述。有关详细信息，请参阅 this issue on Github。

Answer 3

最近添加了添加您自己的编辑器配置的功能，这可用于 "partially" 禁用 ESLint 的功能。你只需要在根目录下创建一个配置文件即可。

.eslintrc:

{
  "parser": "babel-eslint"
}

.env

SKIP_PREFLIGHT_CHECK=true

如果您创建一个新应用程序，它会默认在package.json

中带有一个预填充的eslintConfig对象

Answer 4

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

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

进入这个目录

node_modules/react-dev-utils/webpackHotDevClient.js
寻找这个函数（应该在114行左右）

函数句柄警告（警告）{

并在其后添加一个 return 语句。

你的代码应该看起来像这样（如果你使用的是 webstorm）

那应该立即关闭 webpackHotDevClient.js:{whateverLineIdontCare}。干杯。

Answer 5

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

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

Answer 6

我的代表不够高，无法评论@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 7

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

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

/folder_name
/folder_name/file_name.js

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

/* eslint-disable */

忽略文件中的下一行警告

// eslint-disable-next-line

Answer 8

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

import someVariable from "./wherever"

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

Answer 9

如果您想在 DevTools 中禁用警告

打开控制台选项卡。
默认 levels/Custom 级别 -> 取消选中警告

Answer 10

添加一个.eslintignore文件并添加

src/*

您可以在

阅读更多相关信息

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

more details here

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

How to not show warnings in Create React App

reactjs

webpack

create-react-app