ESLint 报告 'url' is not defined

前言

前端开发中，我们经常使用一些全局变量，例如 window、document 等。然而在使用 ESLint 时，遇到了这样的问题：url is not defined。这是因为 ESLint 默认不支持一些浏览器环境中常见的全局变量，需要额外导入相应的 ESLint 插件或配置。

需要解决的问题

遇到下面这段代码，ESLint 会给出 url is not defined 的错误提示：

const url = "https://www.example.com";

这是因为 ESLint 默认不认识 url 这个全局变量，需要额外配置以支持使用。

解决方法

方法一：安装并配置特定的 ESLint 插件

例如，对于 url 这个全局变量，可以安装对应的 ESLint 插件 eslint-plugin-node：

npm install eslint-plugin-node --save-dev

在 .eslintrc.js 文件中添加相应的配置：

module.exports = {
  plugins: [
    "node"
  ],
  env: {
    "node": true
  }
};

在上面的配置中，plugins 字段中指定了需要使用的插件，env 字段指定了检查的环境为 Node.js，这样就能够识别 url 这个全局变量了。

方法二：在 .eslintrc.js 文件中添加全局变量

如果需要使用其他的全局变量，可以在 .eslintrc.js 文件的 globals 字段中添加：

module.exports = {
  globals: {
    "url": true
  }
};

在上面的配置中，我们指定了允许使用全局变量 url。

总结

通过以上两种方法，我们可以解决 ESLint 报告 "'xxx' is not defined" 的问题。但同时，我们也应该注意代码规范和编写规约，尽量避免使用全局变量。优秀的代码应该是具有可读性、可维护性和可扩展性的，滥用全局变量是一种反面的代码习惯。

示例

/* eslint-disable */
const url = "https://www.example.com";

console.log("URL is: ", url);

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