VSCode编写HTML代码自动补全的详细设置-VSCode-PHP中文网

必须启用 html.suggest.html5、editor.quickSuggestions 和 html.suggest.enabled 三项设置，并重载窗口；Emmet 需开启 triggerExpansionOnTab 和 showExpandedAbbreviation；属性枚举需 experimental.customHtml5；自定义标签需配置 html.customData。

vscode编写html代码自动补全的详细设置

html.suggest.html5 必须为 true，否则不会提示

，也不会提示 ——这不是插件坏了，是开关关了。

检查语言模式和基础补全开关

右下角状态栏显示的不是 HTML？那所有补全行为都会失效。点击它 → 选择 Configure File Association for '.html' → 设为 HTML。别信文件后缀，VS Code 只认当前语言模式。

确保以下三项在 settings.json 中明确启用：

"html.suggest.html5": true —— 控制语义化标签（、）是否出现在补全列表
"editor.quickSuggestions": {"html": true} —— 允许在 HTML 文件中自动弹出建议框
"html.suggest.enabled": true —— 全局 HTML 补全总开关，关了就彻底没提示

改完别忘了执行 Developer: Reload Window，部分设置不重启不生效。

Emmet 是补全主力，不是可选项

输入 ul>li*3 按 Tab 没反应？大概率是 Emmet 被禁用了。VS Code 的 HTML 补全 80% 靠 Emmet 驱动，不是语言服务。

确认以下配置：

"emmet.triggerExpansionOnTab": true —— 关掉后 Tab 只缩进，不展开任何缩写
"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFiles" —— 设为 "never" 时，连都不会提示
在 .vue 或 .svelte 文件中写，需额外加："emmet.includeLanguages": {"vue-html": "html"}


输一半想补全（比如刚打完 nav），按 Ctrl+Space 手动唤出建议，再选 Emmet 项——不能只等自动弹。

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										
属性值枚举补全要单独开实验性开关
 光标在引号里，期望弹出 text、email、date？原生不支持。这是语义级补全，得靠实验性功能。
目前唯一有效方式是启用：


"html.suggest.experimental.customHtml5": true —— 此项控制 type、autocomplete、loading 等属性的枚举值提示
注意：该设置仅在 VS Code 1.88+ 版本稳定可用，旧版即使开了也无效
它不补 class="" 里的 CSS 类名——那是另一个插件的事，原生 HTML 服务根本不读你的 CSS 文件

自定义标签/属性没提示？靠 html.customData

 这种 Web Component 标签，或者 data-testid 这类项目私有属性，VS Code 原生完全不认识。
必须手动注入 Schema：

准备一个 JSON Schema 描述你的自定义元素（如 custom-data.json）
在 settings.json 中添加："html.customData": ["./custom-data.json"]

路径必须是工作区相对路径，不能用 ~ 或绝对路径
改完后同样需要 Reload Window，缓存不刷新不会生效

最常被忽略的是：这个机制只对标准 HTML 属性扩展有效，无法让 class="" 补全你项目里的 Tailwind 类名——那得换专用插件，且要配好 css.styleSheets 路径。