如何使用ESLint在JS/TS中检测本地类与全局类的命名冲突？

现有检测规则失效的核心原因 #

ESLint核心规则的检测范围存在明确设计边界：

• 核心版no-shadow规则的builtinGlobals参数，仅硬编码识别ECMAScript语言标准定义的内置全局对象（如Object、undefined、Array等），不会将浏览器环境下由Web IDL定义的DOM API全局构造函数（如Node、Attr等）纳入检测范围
• 核心版no-redeclare规则仅检测同作用域下的重复声明，不会识别跨作用域的全局变量遮蔽行为
• 旧版本typescript-eslint重写的同规则，默认仅识别TS核心lib声明的全局，不会自动加载lib.dom.d.ts中定义的DOM全局名做匹配，因此无法触发对应检测

可落地的规避方案 #

• 手动配置受限全局名检测
  直接使用ESLint内置的no-restricted-globals规则，把团队约定不允许被本地代码遮蔽的全局名加入校验列表，配置示例：

  {
    "rules": {
      "no-restricted-globals": ["error", "Node", "Attr", "CustomEvent", "HTMLElement"]
    }
  }
  

  该规则会直接检测所有作用域下与列表同名的本地变量、类、函数声明，无论是否存在全局同名对象，只要本地做了重名声明就会触发报错。它完全不依赖builtinGlobals的内置硬编码列表，配置成本低，适合中小型项目快速落地。
• 配合TypeScript实现全量自动检测
  升级到最新版本的typescript-eslint插件后，在typescript-eslint/no-shadow规则配置中开启从TS配置文件解析全局声明的选项，规则会自动拉取tsconfig.json中lib字段声明的所有全局类型（包括DOM、WebWorker等环境定义的全局构造函数）作为检测范围，不需要手动枚举所有DOM全局名。同时TS本身的语义检查也会对顶层作用域的重名定义给出即时警告，从编辑器层面提前发现问题。
• 落地统一命名约定
  对容易引发遮蔽的常用全局名做统一规避，比如需要定义DOM节点相关的类时，使用DOMNode、XmlAttr这类带明确语义前缀的命名，从编码规范层面从根源避免重名。

内容的提问来源于stack exchange，提问作者mizkichan