背景
ESLint 是一个非常流行的 JavaScript 代码检查工具，它可以帮助我们发现代码中的潜在问题并保证代码的质量。然而，在使用 ESLint 进行代码检查时，有时候会遇到一个常见的问题，即 "document is not defined"。这个问题通常出现在前端项目中，因为在前端项目中，我们经常会使用浏览器提供的 DOM API，例如 document、window 等。
问题原因
在 ESLint 中，一些默认的规则会防止使用全局变量，例如 document、window 等。这是因为在一些情况下，全局变量可能会导致代码的不可预测性和可维护性降低。因此，ESLint 会将这些全局变量视为未定义的变量，并给出警告。
解决方法
解决 "document is not defined" 问题的方法有很多种，下面介绍一些常用的方法。
1. 在 .eslintrc 文件中添加全局变量
在 .eslintrc 文件中，我们可以通过 globals 字段来定义全局变量。例如，我们可以添加以下代码：
{
"globals": {
"document": "readonly"
}
}这样，ESLint 就会认为 document 是一个只读的全局变量，不会再给出 "document is not defined" 的警告。
2. 在代码中使用注释来忽略警告
我们可以在代码中使用注释来告诉 ESLint 忽略特定的警告。例如，我们可以在使用 document 的地方添加以下注释：
/* eslint-disable no-undef */
document.getElementById("myElement");
/* eslint-enable no-undef */这样，ESLint 就会忽略这个地方的 "document is not defined" 警告。
3. 使用 eslint-plugin-dom 插件
eslint-plugin-dom 是一个针对 DOM API 的 ESLint 插件，它提供了一些规则来帮助我们检查 DOM 相关的代码。例如，它提供了一个规则 no-document-query，用于检查是否使用了 document.querySelector 和 document.querySelectorAll，我们可以通过以下代码来安装和使用 eslint-plugin-dom：
npm install eslint-plugin-dom --save-dev
{
"plugins": ["dom"],
"rules": {
"dom/no-document-query": "error"
}
}这样，ESLint 就会检查代码中是否使用了 document.querySelector 和 document.querySelectorAll，如果使用了，就会给出警告。
总结
在前端项目中，我们经常会使用浏览器提供的 DOM API，然而，在使用 ESLint 进行代码检查时，我们可能会遇到 "document is not defined" 的问题。为了解决这个问题，我们可以在 .eslintrc 文件中添加全局变量、使用注释来忽略警告，或者使用 eslint-plugin-dom 插件。选择合适的方法可以使我们更好地使用 ESLint 来保证代码的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/661a000bd10417a222ac1324