VSCode中HTML自定义标签自动补全的配置方法-VSCode-PHP中文网

html.customData是唯一可靠路径，必须通过配置合法JSON Schema文件（version: 1.1）显式定义自定义标签名、属性及valueSet枚举值，并确保路径正确、语言模式为html、editor.quickSuggestions.strings启用，否则VS Code完全静默不提示。

vscode中html自定义标签自动补全的配置方法

html.customData 配置是唯一可靠路径

VS Code 原生不识别非标准 HTML 标签（比如、），也不会在输入 时弹出补全建议。想让它“认识”你的自定义标签，必须通过 html.customData 显式注入一份 JSON Schema 描述文件——这不是可选项，是强制要求。

这个配置指向一个或多个 .json 文件，每个文件定义一组标签名、属性、属性值类型和文档说明。VS Code 的 HTML 语言服务会在光标进入标签名或属性位置时，按顺序加载这些 Schema 并合并建议。

必须是合法 JSON 格式，且顶层为对象（不能是数组）
文件路径支持相对路径（相对于工作区根目录）或绝对路径
多个文件用数组写法："html.customData": ["./custom-tags.json", "./web-components.json"]
如果路径写错或 JSON 解析失败，VS Code 完全静默，不会报错也不会提示，只会“假装没看见”

自定义 Schema 文件怎么写才有效

Schema 文件不是自由发挥的文档，它必须严格遵循 VS Code 定义的 html-data 格式。常见错误是照搬 OpenAPI 或 JSON Schema v7 规范，结果补全完全不触发。

最小可用结构示例（保存为 custom-tags.json）：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

{
  "version": 1.1,
  "tags": [
    {
      "name": "my-button",
      "description": "自定义按钮组件",
      "attributes": [
        {
          "name": "size",
          "valueSet": ["small", "medium", "large"]
        },
        {
          "name": "variant",
          "valueSet": ["primary", "outline", "ghost"]
        }
      ]
    }
  ]
}

version 必须是 1.1（目前最新且稳定支持的版本）
tags 是数组，每个对象至少含 name 字段；attributes 可选，但加了才能补属性和属性值
valueSet 是字符串数组，不是正则或类型描述；写 "number" 没用，得写 ["1", "2", "3"] 或枚举字面量
如果只想要标签名补全（不关心属性），可以删掉 attributes 段，但 name 和 description 仍需保留

Vue / Web Components 场景下特别注意语言模式

在 .vue 文件中，即使你配好了 html.customData，在里依然不补全，大概率是因为 VS Code 当前语言模式不是 html，而是 vue 或 vue-html。HTML 语言服务默认只在 html 模式下加载 customData。

右下角点击语言标识，手动切换为 HTML（临时验证是否生效）
长期方案：在 settings.json 中添加映射："files.associations": {"*.vue": "html"}（粗暴但有效）
更精准做法（推荐）："emmet.includeLanguages": {"vue-html": "html"} + 确保 html.suggest.enabled 为 true
Web Components（如 Lit、Stencil）若用 .ts 注册自定义元素，Schema 无法自动发现；必须手写 custom-tags.json 并维护更新