ESLint 报错：'document.body' is not defined

在前端开发中，我们经常使用 ESLint 来规范我们的代码风格和语法错误。然而，有时候我们会遇到一些奇怪的报错，比如 'document.body' is not defined，这个错误可能会让我们感到困惑。那么，这个错误是什么意思呢？如何解决它呢？

错误原因

这个错误的原因是因为在 ESLint 中，document 和 window 这些全局变量默认是未定义的。因此，当我们在代码中使用它们时，ESLint 就会报错。

例如，在以下代码中：

// main.js
const body = document.body;

ESLint 就会报错 'document' is not defined，因为它默认情况下并不知道 document 这个全局变量。

解决方法

为了解决这个问题，我们需要告诉 ESLint 这些全局变量是已定义的。有两种方法可以实现这个目的。

方法一：使用配置文件

我们可以在 ESLint 的配置文件中添加全局变量，比如 .eslintrc.js：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  globals: {
    document: "readonly",
    window: "readonly",
  },
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {
    // ...
  },
};

在这个配置文件中，我们使用了 globals 属性来定义全局变量，将 document 和 window 定义为 readonly 即可。

方法二：使用注释

我们也可以在具体的代码行上使用注释来告诉 ESLint 这些变量是已定义的。例如：

// main.js
/* global document, window */

const body = document.body;

在这个例子中，我们使用了注释 /* global document, window */ 来告诉 ESLint document 和 window 是已定义的全局变量。

总结

在前端开发中，ESLint 是一个非常有用的工具，可以帮助我们规范代码风格和语法错误。然而，有时候我们会遇到一些奇怪的报错，比如 'document.body' is not defined。这个错误的原因是因为在 ESLint 中，document 和 window 这些全局变量默认是未定义的。为了解决这个问题，我们可以使用配置文件或注释的方式告诉 ESLint 这些变量是已定义的。希望这篇文章对你有所帮助！

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