ESLint 报错：'window' is not defined

在前端开发中，我们经常会使用 ESLint 来规范代码风格和发现潜在的问题。然而，在使用 ESLint 的过程中，我们可能会遇到 'window' is not defined 的报错。这种报错通常是因为我们在使用浏览器全局变量时，没有在代码中声明它们，导致 ESLint 认为它们未定义。

问题分析

在 JavaScript 中，浏览器提供了一些全局变量，如 window、document、navigator 等。这些全局变量在浏览器中是默认存在的，我们可以直接使用它们。但是在 ESLint 中，默认情况下并不认为这些全局变量已经定义，所以当我们在代码中使用它们时，就会触发 'window' is not defined 的报错。

解决方案

为了解决这个问题，我们需要告诉 ESLint 这些全局变量已经定义了。ESLint 提供了多种方式来声明全局变量，下面是其中两种常用的方式。

1. 在配置文件中声明全局变量

在 .eslintrc 配置文件中，我们可以使用 globals 属性来声明全局变量。例如，我们要声明 window 和 document 两个全局变量，可以在配置文件中添加如下配置：

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

这样，ESLint 就会认为 window 和 document 已经定义了，不会再报错了。

2. 在代码中使用注释声明全局变量

我们还可以在代码中使用注释来声明全局变量。例如，我们要声明 window 和 document 两个全局变量，可以在代码中添加如下注释：

/* global window, document */

// 在这里可以直接使用 window 和 document 了
console.log(window.location.href);
console.log(document.title);

这样，ESLint 也会认为 window 和 document 已经定义了，不会再报错了。

总结

在使用 ESLint 进行代码规范和问题检测时，我们需要注意全局变量的声明。如果我们在代码中使用了浏览器全局变量，但是没有在代码中声明它们，就会触发 'window' is not defined 的报错。为了解决这个问题，我们可以在配置文件中声明全局变量，或者在代码中使用注释声明全局变量。这样可以告诉 ESLint 这些全局变量已经定义了，避免误报错。

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