深入剖析 ESLint 中的 globals：配置指南（二）

2023-10-28 23:58:09

前言

在上一篇文章中，我们探讨了 ESLint 中 globals 配置的基础知识。在本文中，我们将深入研究其高级用法，帮助您配置更灵活和强大的 ESLint 环境。

深入理解 globals

globals 配置允许您为特定的全局变量指定预定义的类型，这些变量可以在整个项目中使用，而不会触发 ESLint 规则。这对于在诸如浏览器或 Node.js 等运行时环境中工作的 JavaScript 应用程序尤为重要，其中存在大量预定义的全局变量。

配置 globals：高级技巧

除了在 globals 对象中直接指定变量名和类型之外，还有以下高级配置选项：

值别名： 您可以使用 "as" 为全局变量指定值别名。例如：json { "globals": { "jQuery": "jquery", } }
对象类型： 对于复杂的对象类型，您可以使用 "类型注解" 指定它们的结构。例如：json { "globals": { "moment": { "type": "moment", }, } }
数组类型： 对于数组类型，您可以使用 "[]" 语法指定元素类型。例如：json { "globals": { "React": { "type": "array", "elements": "react", }, } }
避免冲突： 如果您配置的全局变量与现有的 ESLint 规则冲突，可以使用 "readonly" 属性将该规则标记为只读，从而防止它报告错误。例如：json { "globals": { "XMLHttpRequest": "readonly", }, "rules": { "no-restricted-globals": ["error", "XMLHttpRequest"], } }

代码示例：浏览器环境配置

以下是针对浏览器环境的示例 globals 配置：

{
  "globals": {
    "window": true,
    "document": true,
    "navigator": true,
    "alert": true,
    "confirm": true,
    "prompt": true,
    "fetch": true,
    "XMLHttpRequest": "readonly",
    "jQuery": "jquery",
    "moment": {
      "type": "moment",
    },
    "React": {
      "type": "array",
      "elements": "react",
    },
  }
}