在前端开发中，我们常常会使用 ESLint 对 JavaScript 代码进行语法检查。但是，有时我们可能会遇到类似 'document' is not defined 这样的报错，这是因为 ESLint 默认情况下并不会理解浏览器环境中的全局对象，因此会对 document 对象等常见的全局对象发出警告。
在本文中，我们将介绍如何解决 ESLint 报错 'document' is not defined，使得我们可以更好地使用 ESLint 来提高代码的质量和可读性。
解决方法
解决此问题有两种方法：
方法一：在配置文件中添加全局变量
我们可以通过在配置文件 .eslintrc 或者 .eslintrc.js 中添加 env 配置项来告诉 ESLint 当前代码运行的环境，比如是浏览器环境还是 Node.js 环境。
以下是示例配置文件 .eslintrc.js 的示例：
-- -------------------- ---- ------- -------------- - - ---- - -------- ----- ------- ---- -- -------- - --------------------- -------------------------- -- -------------- - ------------- - ---- ---- -- ------------ --- ----------- -------- -- -------- - ------- -- ------ - ------------------- - -- -------- - -- --------- --------- ----------- ------- ----------- ------------- ---------- - --展开代码
在上面的配置文件中，我们添加了三个全局变量：document、window 和 localStorage，它们的值都为 'writable'，表示我们可以在代码中修改这些全局变量的值。这样做可以让 ESLint 不再对这些变量进行警告，从而避免 'document' is not defined 这样的报错。
在上述配置文件中，其他的配置项完全可以根据项目需求进行调整。
方法二：使用 ESLint 插件
另外，我们还可以使用 ESLint 插件来解决这个问题。常见的插件有 eslint-plugin-browser 和 eslint-plugin-no-undef。
eslint-plugin-browser
如果我们安装了 eslint-plugin-browser 插件，那么我们就可以在配置文件中添加 browser 配置项，从而让 ESLint 理解浏览器环境中的全局对象。
以下是示例配置文件 .eslintrc.js 的示例：
-- -------------------- ---- ------- -------------- - - ---- - -------- ----- ------- ---- -- -------- - --------------------- -------------------------- -- -------------- - ------------- - ---- ---- -- ------------ --- ----------- -------- -- -------- - ------- -- ------ - ------------------- - -- -- -- --------------------- -- -------- ------------ -- - ------- --- ------- --- -------- ------------------------------ --展开代码
在上面的配置文件中，我们添加了 eslint-plugin-browser 插件，并在 plugins 配置项中添加了 browser。然后我们在 extends 配置项中使用了 plugin:browser/recommended，从而使用了该插件提供的推荐配置。
eslint-plugin-no-undef
如果我们使用的是 eslint-plugin-no-undef 插件，那么我们就可以在配置文件中添加 globals 配置项来告诉 ESLint 全局变量的存在。
以下是示例配置文件 .eslintrc.js 的示例：
-- -------------------- ---- ------- -------------- - - ---- - -------- ----- ------- ---- -- -------- - --------------------- -------------------------- -- -------------- - ------------- - ---- ---- -- ------------ --- ----------- -------- -- -------- - ------- -- ------ - ------------------- - -- -- -- ---------------------- -- -------- ------------- -- - ------- --- -------- --- -------- -------------------------------- -- - ------- ------- -------- - --------- ----------- ------- ----------- ------------- ---------- - --展开代码
在上面的配置文件中，我们添加了 eslint-plugin-no-undef 插件，并在 plugins 配置项中添加了 no-undef。然后我们在 extends 配置项中使用了 plugin:no-undef/recommended，从而使用了该插件提供的推荐配置。最后我们在 globals 中添加了全局变量。
总结
在本文中，我们介绍了两种解决 ESLint 报错 'document' is not defined 的方法：一种是在配置文件中添加全局变量，另一种是使用 ESLint 插件。这两种方法均可以让我们更好地使用 ESLint 对 JavaScript 代码进行语法检查，提高代码的质量和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664838e1d3423812e46c7ded
