ESLint 开启报错：'document' is not defined

ESLint 开启报错：'document' is not defined

在前端开发中，我们经常使用到 document 变量，但是有时候在使用 ESLint 进行代码检查时，会出现 'document' is not defined 的报错，这是因为 ESLint 默认不认识浏览器全局对象，需要我们手动配置一些规则来解决。

1. 解决方法

首先，我们需要在 ESLint 配置文件中添加 env 属性，告诉 ESLint 我们正在使用浏览器环境：

{
  "env": {
    "browser": true
  }
}

如果我们需要使用一些特定的全局对象，比如 document、window 等，可以在 globals 属性中添加：

{
  "globals": {
    "document": true,
    "window": true
  }
}

1. 示例代码

下面是一个包含 'document' is not defined 报错的示例代码：

function setInnerText(element, text) {
  element.innerText = text;
}

const button = document.querySelector('button');
setInnerText(button, 'Click me!');

我们可以通过上述方法解决这个问题，使代码能够顺利通过 ESLint 的检查：

/* eslint-disable */
function setInnerText(element, text) {
  element.innerText = text;
}

const button = document.querySelector('button');
setInnerText(button, 'Click me!');
/* eslint-enable */

需要注意的是，在代码中添加 /* eslint-disable / 注释可以禁止任何 ESLint 校验，如果我们只是想禁止特定的校验规则，可以使用 / eslint-disable no-undef */ 的方式禁止 'document' is not defined 报错。

1. 总结

通过上述配置，我们就可以顺利解决在使用同构 JavaScript 渲染时经常遇到的 'document' is not defined 报错问题。同时，这也是一个很好的学习机会，让我们更深入地理解了 ESLint 的工作原理和如何进行配置。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f434ebf6b2d6eab3d4f9dc