解决 ESLint 的 require() 错误-JavaScript中文网-JavaScript教程资源分享门户

解决 ESLint 的 require() 错误

什么是 ESLint？

ESLint 是一个开源 JavaScript 代码检查工具，用于发现代码中的问题，并且尽可能自动的通过插件扩展规则，支持各种代码风格的检测。通过统一项目代码风格，提高代码的可维护性，减少代码缺陷和错误，从而为团队开发提供更好的协作利器。

什么是 require()？

Node.js 中提供了全局变量 require()，用来加载模块或其他 JavaScript 文件。require() 的工作原理是在全局作用域下执行指定的 JavaScript 文件，并且获取该文件输出的模块接口对象。换言之，require() 是 Node.js 的核心模块，并且对于 Node.js 应用程序开发至关重要。

为什么在使用 ESLint 时会出现 require() 错误？

在使用 ESLint 进行代码检查时，如果使用了 require() 函数引入 jQuery、React、Vue 等第三方库，就会出现以下错误，例如：

Error: 'React' is not defined. (no-undef)

原因是 ESLint 默认无法识别全局变量，如果未正式声明这些全局变量，就会产生左侧的错误提示。而且，这种 require() 错误会导致代码质量分数下降，降低检测报告的可靠性和可读性。

怎样解决 ESLint 的 require() 错误？

方式一：使用 `eslint-plugin-require-path-exists`

可以使用 eslint-plugin-require-path-exists 插件对 require() 语句的路径验证做进一步处理，从而消除这种错误。具体步骤如下：

安装 eslint-plugin-require-path-exists 插件，全局安装或项目安装均可：
```
npm install eslint-plugin-require-path-exists --save-dev
```

在 .eslintrc 文件中添加 "require-path-exists/no-unresolved": 2 配置：

{
  "plugins": [
    "require-path-exists"
  ],
  "rules": {
    "require-path-exists/no-unresolved": 2
  }
}

重新执行 ESLint 命令，等待提示信息出现即可。

方式二：配置 .eslintrc 中的 global

可以在 .eslintrc 中配置 global 项，声明全局变量，并让 ESLint 忽略这些全局变量，从而消除 require() 错误。具体步骤如下：

编辑 .eslintrc 文件，在 rules 属性下添加以下内容：

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

在 globals 中列出需要声明的全局变量即可，$ 代表 jQuery，其他类似。
重新执行 ESLint 命令，等待提示信息出现即可。

示例代码

以 React 为例，展示 require() 错误的解决方法：

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

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

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

以上代码中，ESLint 会报出以下错误：

Error: 'React' is not defined. (no-undef)

因为忘记显式地声明 React 变量。

解决方法：

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

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

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

或者

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

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

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

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

总结：

通过使用 ESLint 检测 JavaScript 代码，可以提高代码质量和可读性，增强开发协作的有效性。在遇到 require() 错误时，可以使用 eslint-plugin-require-path-exists 插件或在 .eslintrc 文件中配置 global 变量来解决。

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

解决 ESLint 的 require() 错误