ESLint 警告事件已定义但从未使用过

Question

我在这段简单的代码中遇到 ESLint 错误：

var trigger = document.getElementById("hello");
var audio = new Audio('audio/hello.mp3');

window.addEventListener('DOMContentLoaded', (event) => {
    trigger.addEventListener("click", function(event) {
        event.preventDefault();
        audio.play();
    }, false);
});

我得到的错误是： 'event' is defined but never used.

我读过我可以通过在左括号后添加注释来禁用此错误，其中“事件”是这样使用的： // eslint-disable-line no-unused-vars 。

但我的问题是，这段代码实际上有什么问题吗？应该修复或改进吗？ 而不是被忽略警告的评论所掩盖？ 还是这种方法实际上没有任何问题，只是 ESLint 迂腐？

Answer 1

但我的问题是，这段代码实际上有什么问题吗？应该修复或改进吗？

您永远不会使用您在DOMContentLoaded事件侦听器中定义的event参数（您只使用在click处理程序中定义的参数），因此您应该删除它：

window.addEventListener('DOMContentLoaded', () => {
// No `event` here −−−−−−−−−−−−−−−−−−−−−−−−−−^

---

话虽如此，但如果您控制加载代码的script标记，则无需使用DOMContentLoaded 。 如果这样做，只需使用type="module"或defer以确保代码在构建 DOM 之前不会运行。

Answer 2

Linters 可能很烦人，但尝试让它们开心通常是个好主意。 但是，您可以通过以下划线开头的参数名称来指示您故意忽略该参数，而不是禁用该警告。

var trigger = document.getElementById("hello");
var audio = new Audio('audio/hello.mp3');

window.addEventListener('DOMContentLoaded', (_event) => {
    trigger.addEventListener("click", function(event) {
        event.preventDefault();
        audio.play();
    }, false);
});

您也可以只为参数名称使用下划线，或者完全不使用它。