VSCode原生HTML补全仅支持W3C标准标签，自定义元素（如my-button）不提示是因为未通过html.customData注入JSON Schema；需手动配置路径指向custom-data.json文件并重载窗口。

不是所有 HTML 标签都能被 VSCode 原生补全，尤其自定义标签、Web Component 或非标准属性——这不怪设置错，而是默认语言服务根本没加载对应 Schema。

为什么 my-button、sl-button 这类标签不出现补全提示

VSCode 原生 HTML 补全只认 W3C 标准标签（div、input、section 等），对自定义元素（Custom Elements）或第三方组件库（如 Shoelace、Ionic）完全无感知。它不会扫描你项目里的 node_modules 或 custom-elements.json，也不会自动推断 是合法标签。

• 检查是否误以为 Emmet 缩写能覆盖：my-button 不是 Emmet 内置缩写，按 Tab 不会展开
• 确认语言模式是 HTML：右下角状态栏必须显示 HTML，不是 Plain Text 或 javascriptreact
• 自定义标签需手动注入描述文件：靠 html.customData 指向 JSON Schema，否则补全列表永远为空

如何让 sl-button 或 ion-input 出现在补全列表里

必须显式告诉 VSCode “这些标签是合法的”，不能靠猜或插件自动发现。核心是配置 html.customData 指向符合 Custom Data Schema 的 JSON 文件。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 最简方式：用官方生成器，如 @shoelace-style/cli 提供 sl generate-custom-data，输出 shoelace.custom-data.json
• 手动配置：在 settings.json 中添加：

  "html.customData": [
    "./shoelace.custom-data.json",
    "./ionic.custom-data.json"
  ]

• 路径必须是相对工作区根目录的，~/ 或绝对路径无效
• 改完后需重载窗口（Cmd+Shift+P → Developer: Reload Window），仅保存不生效

input 的 type="date" 为什么不提示枚举值

这不是标签补全问题，而是属性值语义补全缺失。VSCode 默认只对 class、id 等通用属性做补全，对 input.type、img.loading 这类强约束属性，原生不提供枚举建议——它把 type="|" 当作普通字符串处理，而非结构化字段。

• 启用实验性支持（部分 VS Code 版本）："html.suggest.experimental.customHtml5": true
• 更可靠方案：安装插件 HTML Boilerplate 或 Auto Rename Tag 无法解决此问题；真正有效的是 IntelliSense for CSS class names in HTML 类插件的思路——但目前无通用 HTML 属性值插件，只能靠自定义 Schema 或接受手动输入
• 验证是否生效：在 处按 Ctrl+Space，若仍无下拉，则说明语言服务未识别该属性上下文

Vue / JSX 文件里 或

不补全怎么办

VSCode 默认不把 .vue 或 .jsx 当 HTML 处理，即使里面写了

，语言 ID 也是 vue 或 javascriptreact，原生 html.* 设置全部失效。

• 对 .vue：优先用 Volar 插件，它接管 HTML 补全逻辑；确保 volar.autoInsertEmmetSupport 为 true
• 对 .jsx：在 settings.json 中加：

  "emmet.includeLanguages": {
    "javascriptreact": "html"
  }

  并确认 emmet.triggerExpansionOnTab 已启用
• 禁用冲突插件：比如 Auto Close Tag 在 Vue 文件中可能被 Volar 抑制，不必强行开启
• 别依赖 files.associations 粗暴映射："*.vue": "html" 会破坏 Vue 语法高亮和类型检查

真正卡住人的从来不是“怎么开开关”，而是没意识到 VSCode 的 HTML 补全是分层的：标签名靠 html.customData 注入，属性值枚举靠实验性开关或外部工具，而语言模式错配会让所有配置归零。最易忽略的是——改完 settings.json 后不重载窗口，或把路径写成绝对路径导致加载失败。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！