VSCode中HTML属性怎么自动补全？高效编码小技巧-VSCode-PHP中文网

需启用 "html.suggest.html5": true 并配置 files.associations 和 html.customData，才能在 type="|" 等属性引号内显示标准及自定义值建议。

vscode中html属性怎么自动补全？高效编码小技巧

input type="|" 引号内不提示？先确认 HTML5 补全已启用

VS Code 默认不会在 type、autocomplete、inputmode 等属性的引号内弹出合法值列表，除非显式开启 HTML5 语义补全。这不是 bug，是语言服务的默认保守策略。

打开 settings.json，确保包含这一行：

"html.suggest.html5": true

这个配置告诉 VS Code 的 HTML 语言服务器：别只认 class/id，要按 W3C HTML5 规范解析 input、button、textarea 等标签的属性值域。比如 type="|" 光标停在引号中时，会列出 text、email、date、color 等 18 个标准值，而非空列表或仅匹配你已输过的字母。

如果用了 Vue 单文件组件，还需加 "files.associations": { "*.vue": "html" }，否则里的 input 不走 HTML 语言服务
禁用冲突插件（如某些“HTML Tools”旧版）——它们可能劫持 onDidProvideCompletionItems 钩子，导致标准补全被吞掉
重启 VS Code 后，新开一个 .html 文件测试，不要在未保存的 Untitled-1 中验证，那里语言模式可能仍是 plain text

Emmet 补全和语言服务补全不是一回事

很多人混淆了两种补全：一种是输入 div.container 按 Tab 展开为

（Emmet），另一种是输入 type="|" 后弹出取值菜单（HTML 语言服务）。它们触发机制、配置项、甚至底层协议都不同。

关键区别：

Emmet 补全靠 emmet.triggerExpansionOnTab 控制，只响应 Tab 键；语言服务补全默认响应 .、=、引号内空格等上下文，且支持鼠标悬停查看 MDN 文档链接
Emmet 对 type="text" 这类已有值不干预；语言服务会在你删掉 text、光标回到引号中间时立刻刷新建议列表
若关闭 editor.suggest.snippetsPreventQuickSuggestions（设为 false），Emmet 片段才不会压制语言服务的属性值建议

Vue / JSX 中 HTML 补全失效？检查 language ID 和嵌套层级

在 .vue 文件里写 没反应，大概率是语言模式没对上，或者光标位置不在语言服务能解析的 AST 节点内。

验证步骤：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

把光标放在 type="|" 引号中，按 Ctrl+Shift+P 输入 Developer: Inspect Editor Tokens and Scopes，看右下角显示的 languageId 是不是 html（不是 vue 或 vue-html）
如果显示 vue-html，说明 Emmet 已接管，但 HTML 语言服务没挂载——此时必须配 "files.associations": { "*.vue": "html" }，强制整个文件走 HTML 服务
JSX 中（如 .tsx）更麻烦： 可能被 TypeScript 语言服务拦截，需安装 ESLint + Prettier 插件并启用 typescript.preferences.includePackageJsonAutoImports，否则 AST 解析会跳过 JSX 属性值

自定义补全值（比如团队私有 type="search-bar"）怎么加？

W3C 标准里没有 search-bar，但你项目里用了，又不想每次手打，就得扩展语言服务的值域。VS Code 不支持直接改内置 schema，但可通过插件注入。

最轻量的做法是用 html.customData：

"html.customData": ["./html-data.json"]

然后在项目根目录建 html-data.json，内容类似：

{
  "version": 1.1,
  "tags": [],
  "attributes": [
    {
      "name": "type",
      "valueSet": "input-type"
    }
  ],
  "valueSets": [
    {
      "name": "input-type",
      "values": [
        { "name": "search-bar", "description": "自定义搜索组件" },
        { "name": "range-slider", "description": "带刻度的范围选择器" }
      ]
    }
  ]
}

注意：html.customData 只影响当前工作区，且必须是相对路径；如果路径错、JSON 格式错、或 valueSet 名拼错，补全就静默失败，不会报错提示。

真正容易被忽略的是：这类自定义值不会出现在 Emmet 补全里，也不会触发 onDidChangeTextDocument 的校验逻辑——它纯粹是语言服务的“只读词典”，拼错照样能保存、编译、运行，只是 IDE 不提醒。