ESLint Disallow Use of Alert (no-alert)答案

【问题标题】：ESLint Disallow Use of Alert (no-alert)ESLint Disallow Use of Alert (no-alert)
【发布时间】：2016-05-20 09:35:21
【问题描述】：

如何将以下警报转换为 ESLint 可接受的警报？

svg.onerror = function() {
    alert("File cannot be loaded");
};

我的构建失败，因为显然我不能使用“警报”。当加载某些内容出现问题时，我想调用此警报。此代码成功运行，但不符合 ESLint。

如何修改我的代码以使其成功构建？

提前致谢:)

【问题讨论】：

【解决方案1】：

如果你认为你有充分的理由不遵守 eslint 设置，那么你可以通过在有问题的行的注释中指定 eslint-disable-line 来禁用该特定行的特定规则，如下所示：

svg.onerror = function() {
    alert("File cannot be loaded");  // eslint-disable-line no-alert
};

更好的解决方案可能是实现模态或以另一种侵入性较小的方式向用户显示错误（例如：切换错误元素的可见性，或使用类似 Bootstrap 的模态）。

【讨论】：

有没有办法让警报符合 eslint 标准？他们在我上面给出的链接中举了一个例子，但我不明白。
是的！这些文档的相关部分是：“此规则旨在捕获应该删除的调试代码和弹出 UI 元素，应该用不太显眼的自定义 UI 替换。”在这种情况下，您可以在您正在使用的元素附近放置类似<div id="svg-error" class="warning" style="display: none;">Couldn't load SVG!</div> 的东西。然后，在 svg 的 onerror 事件中，您将执行类似 $('#svg-error').show() 的操作来显示错误而不是发出警报。有意义吗？
但实际上不可能弹出对话框？它是否正确？因为我想弹出一个框来说明错误。
我不确定在你的具体情况下有什么可用的，但你可以使用或实现类似于Bootstrap's modal component 的东西。这将为您提供您正在寻找的 UI 反馈，并满足 ESLint。
是的，我考虑过引导程序，但我不能使用它。如果有帮助，我可以使用 jquery。

【解决方案2】：

有些 ESLint 规则并不适合包含在每个项目中，no-alert 绝对是其中之一。虽然批评者可能会说 alert 很突兀，但这并不能说明 突兀可以是好的事实！

要禁用此规则，请在您的 ESLint 配置文件中通过将其设置为“关闭”来禁用它。

...
"rules": {
    ...
    "no-alert": "off",
    ...
}

【讨论】：