VS Code默认不为input type属性提供引号内语义补全,因其仅对class、id等通用属性主动提示,而type属强约束枚举值,需满足.html后缀、已保存、含三前提,并确保语言模式为HTML、未禁用html.suggest.html5、Emmet正确映射且无插件冲突。

默认开箱即用,但必须满足三个硬性前提:文件后缀为 .html、已保存、首行含 ;缺一不可,否则连 <code>section 都不会提示。
为什么 input type="|" 不弹出 text/email 等建议?
VS Code 默认不主动对 type 属性值做语义补全——它只识别标签和通用属性(如 class、id),而 type 是强约束枚举值,需显式启用 HTML5 语义支持。这不是 bug,是设计上的保守策略。
- 检查
settings.json是否误加了"html.suggest.html5": false(当前版本 1.92+ 默认为true,加了反而可能覆盖) - 确认语言模式右下角显示的是
HTML,不是Plain Text或Vue(未保存时易错判) - 不要依赖插件“开启 HTML5”,VS Code 原生靠
自动激活语义解析,没这行就退化为 HTML4 行为
emmet.includeLanguages 必须配,否则 html:5 + Tab 不生效
Emmet 缩写(如 html:5、div.container)在 HTML 文件中默认可用,但骨架命令(html:5)需要额外映射,否则按 Tab 没反应。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
- 打开
settings.json(Ctrl+Shift+P →Preferences: Open Settings (JSON)) - 添加这一行:
"emmet.includeLanguages": {"html": "html"} - 注意:
"html"是语言标识符,不是后缀;写成"htm"、"HTML"或漏掉引号都会失效 - 保存后新建一个
.html文件,输入html:5再按 Tab,立刻生成带<meta charset="UTF-8">的完整结构
Vue 单文件组件里 <input type="|"> 还是不补全?
Vue SFC 中的 template 区域默认走 vue-html 语言模式,原生 HTML 补全规则不自动继承,必须手动桥接。
立即学习“前端免费学习笔记(深入)”;
- 在
settings.json中添加:"files.associations": {"*.vue": "html"}(粗暴但有效) - 或更精准地映射 Emmet:
"emmet.includeLanguages": {"vue-html": "html", "vue": "html"} - 重启 VS Code 后,在
<template></template>内写<input type="|">,现在能弹出标准 <code>type值列表了 - 注意:若同时装了 Volar 插件,它会接管
vue-html模式,此时应优先配置 Volar 的 HTML 补全选项,而非强行切语言模式
最常被忽略的一点:补全触发有延迟,默认 200ms,光标停在引号内后别急着敲字母,等半秒再输,否则快速连击会打断建议弹出逻辑。这个延迟值可调,但改太小反而容易误触——留着默认就好。


















