在 React 项目中如何解决 ESLint 报告 no-restricted-globals
在使用 React 进行前端开发时，我们经常会遇到需要使用全局变量的场景，比如 window、document 等。然而，ESLint 报告 no-restricted-globals 错误提示我们应该避免使用这些全局变量。本文将详细介绍在 React 项目中如何解决这个问题，既能使用全局变量，又能不影响开发效率。
- 安装 eslint-plugin-react-hooks 插件
首先，我们需要安装 eslint-plugin-react-hooks 插件。这个插件可以帮我们检查和修复常见的 React Hooks 错误，其中就包括对全局变量的检查。在终端中输入如下命令进行安装：
npm install eslint-plugin-react-hooks --save-dev
- 配置 eslint
在项目根目录下找到 .eslintrc 文件，如果没有则新建一个。将下面的配置添加到 .eslintrc 文件中：
-- -------------------- ---- -------
-
---------------- -
-------------- -----
------------- ---------
--------------- -
------ ----
-
--
---------- -
-------------
--
-------- -
----------------------------- --------
------------------------------ -------
------------------------ -
--------
-
------- ---------
---------- ---- --- -------- ------ ------- -- -------- -- ---- ---------
-
-
-
-这个配置中，react-hooks/rules-of-hooks 和 react-hooks/exhaustive-deps 是针对 React Hooks 的检查和修复规则，我们可以忽略；而 no-restricted-globals 是针对全局变量的检查和修复规则，我们需要重点关注。
在 no-restricted-globals 中，我们设置了 name 为 window，表示不允许使用 window 全局变量。同时，我们设置了 message，提示使用 global 对象替代 window 变量。
除了 window，我们还可以根据需要禁止使用其他全局变量，如 document、navigator、history 等。
- 使用 global 对象
在 React 项目中，可以通过 global 对象来代替 window、document 等全局变量。例如，我们可以通过如下方式获取全局对象：
const globalObject = global || window || {};这个代码通过判断 global、window 是否存在来获取全局对象。当在 node.js 环境下使用时，global 会存在；而在浏览器环境下，window 会存在。如果都不存在，我们可以使用一个空对象 {}。
- 示例代码
下面是一个 React 组件的示例代码，演示如何通过 global 对象访问全局变量：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ------------- -
----- ------------ - ------ -- ------ -- ---
-------------------------------- -----------------------
------ -
-----
-- ---------
------
--
-在这个代码中，我们通过 global || window || {} 获取了全局对象，然后打印了 window 和 document 变量。这样，在不影响开发效率的情况下，我们解决了 ESLint 报告 no-restricted-globals 的问题。
总结
本文介绍了在 React 项目中如何解决 ESLint 报告 no-restricted-globals 的问题。通过安装 eslint-plugin-react-hooks 插件和修改 eslint 配置，我们可以禁止使用全局变量，同时使用 global 对象来代替。这样，我们既保证了代码质量，又不影响开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b47211add4f0e0ffd5cca8