ESLint 报错：'document' is not defined

在前端开发中，我们经常会使用 ESLint 工具来检查代码的规范性和错误，但有时候会遇到 'document' is not defined 这样的错误提示，这是怎么回事呢？

问题原因

这个错误提示的原因是因为在 ESLint 的默认配置中，它不认识浏览器环境中的全局变量，比如 window、document 等。所以当我们在代码中使用这些全局变量时，ESLint 就会报错。

解决方法

解决这个问题的方法有两种。

方案一：使用插件

我们可以使用 eslint-plugin-browser 这个插件来解决这个问题。这个插件可以让 ESLint 知道浏览器环境中的全局变量，这样就不会报错了。

首先，我们需要安装这个插件：

npm install eslint-plugin-browser --save-dev

然后在 .eslintrc.js 配置文件中添加插件：

{
  "plugins": [
    "browser"
  ],
  "rules": {
    // 其他规则...
  }
}

接着，我们可以在代码中使用浏览器环境中的全局变量了，比如：

console.log(window.innerWidth);
console.log(document.getElementById('app'));

方案二：使用全局变量声明

另外一种解决方法是使用全局变量声明，在代码中告诉 ESLint 这些变量是全局变量，不要报错。

我们可以在 .eslintrc.js 配置文件中添加 globals 属性，声明我们要使用的全局变量：

-- -------------------- ---- -------
-
  ---------- -
    --------- -----
    ----------- ----
  --
  -------- -
    -- -------
  -
-

这样，在代码中使用浏览器环境中的全局变量时，ESLint 就不会报错了，比如：

console.log(window.innerWidth);
console.log(document.getElementById('app'));

总结

ESLint 报错 'document' is not defined 是因为默认配置不认识浏览器环境中的全局变量，我们可以使用插件或全局变量声明来解决这个问题。正确地处理这个问题可以让我们写出更规范、更健壮的代码。

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