如何在VSCode中获得类似Chrome控制台的对象属性智能提示

出现提示杂乱的核心原因是：VSCode内置的JS/TS语言服务默认无法自动推导document.querySelector、getElementById等DOM API返回值的具体元素类型，只会匹配宽泛的Element基类，甚至会混入其他环境（比如Node.js）、全局作用域的无关API，最终出现无参考价值的冗余提示。

按照以下步骤配置即可达到和DevTools一致的提示效果：

• 为项目添加正确的类型环境配置
  在项目根目录新建jsconfig.json（纯JS项目）或确认tsconfig.json（TS项目）包含以下配置，让语言服务正确加载DOM标准库、识别项目内的JS/HTML文件：

  {
    "compilerOptions": {
      "target": "ESNext",
      "lib": ["ESNext", "DOM", "DOM.Iterable"],
      "checkJs": true
    },
    "include": ["**/*.js", "**/*.ts", "**/*.html"]
  }
  

• 对获取到的DOM元素做显式类型标注
  不需要额外安装插件，使用原生JSDoc语法标注变量对应的具体元素类型即可，语言服务会自动过滤出该类型专属的属性、方法：

  // 未标注时提示杂乱
  const untypedBtn = document.querySelector('#submit')
  
  // 标注后提示和DevTools完全一致
  /** @type {HTMLButtonElement} */
  const btn = document.querySelector('#submit')
  btn. // 输入点后仅展示button元素的所有原生属性、方法
  

  常用DOM元素对应类型参考：

  • div、p、span等通用标签：HTMLDivElement、HTMLParagraphElement、HTMLSpanElement
  • 输入框、下拉选择框：HTMLInputElement、HTMLSelectElement
  • 画布、媒体标签：HTMLCanvasElement、HTMLVideoElement、HTMLAudioElement
  • 所有页面通用元素的基类：HTMLElement

  如果是写TypeScript，可以直接用类型断言实现同样效果：

  const btn = document.querySelector('#submit') as HTMLButtonElement
  

• 调整补全优先级
  如果你安装了AI补全类插件，可在VSCode设置中调整建议排序规则，将原生语言服务的类型提示优先级调高，避免AI生成的无关内容覆盖精准的原生DOM提示。

效果对比：

• 期望实现的DevTools级精准提示效果：
• 默认配置下VSCode的杂乱无效提示：

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