ESLint 报告 'fs-extra' is not defined

ESLint 报告 'fs-extra' is not defined

在前端开发过程中，我们经常会用到 Node.js 模块，比如 fs-extra 模块，用于文件系统操作。然而，在使用 ESLint 进行代码检查时，我们可能会遇到 fs-extra 模块未定义的问题。

问题描述

假设我们在 JavaScript 代码中使用了 fs-extra 模块：

const fs = require('fs-extra');

当我们在终端运行 ESLint 命令进行检查时，可能会看到以下错误提示：

'fs-extra' is not defined.

这是因为 ESLint 默认情况下只会检查浏览器环境下的全局变量和函数，并没有考虑 Node.js 环境下的模块，因此需要增加额外的配置。

解决方案

解决此问题的方法有两种，分别是全局配置和局部配置。

全局配置

全局配置是将额外的配置添加到 .eslintrc 文件中，以适用于所有项目。

假设我们已经正确安装了 fs-extra 模块，并且 .eslintrc 文件已经存在，我们可以按照以下步骤在 .eslintrc 文件中增加对 fs-extra 模块的定义：

1. 添加 env 字段及 node 属性

{
    "env": {
        "node": true
    }
}

1. 添加 extends 字段及 eslint-config-node 插件

{
    "extends": [
        "eslint:recommended",
        "plugin:node/recommended"
    ]
}

1. 添加 plugins 字段及 eslint-plugin-node 插件

{
    "plugins": [
        "node"
    ]
}

1. 添加 rules 字段及 no-undef 属性

{
    "rules": {
        "no-undef": "off"
    }
}

最后，将 no-undef 属性设置为 off，表示关闭检查未定义的变量或函数。

局部配置

局部配置是将额外的配置添加到文件的头部或代码块的前面，以适用于某个文件或某个代码块。

假设我们仍然在 JavaScript 代码中使用了 fs-extra 模块，但是我们不想全局更改 .eslintrc 文件，我们可以按照以下步骤在代码中增加对 fs-extra 模块的定义：

1. 在代码块的前面添加 /* global */ 注释

/* global require */
const fs = require('fs-extra');

1. 在文件的头部添加 /* eslint-env node */ 注释

/* eslint-env node */

const fs = require('fs-extra');

总结

以上就是解决 ESLint 报告 'fs-extra' is not defined 的方法。通过全局配置或局部配置，我们可以让 ESLint 支持 Node.js 模块，并且能够正确识别 fs-extra 模块。

学习要点：

1. ESLint 默认只检查浏览器环境下的全局变量和函数，需要额外配置才能支持 Node.js 环境下的模块。

2. 全局配置可以适用于所有项目，局部配置可以适用于某个文件或某个代码块。

示例代码

全局配置：

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

局部配置：

/* eslint-env node */

/* global require */
const fs = require('fs-extra');

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