VSCode中HTML自动补全怎么调出来？简单设置教程-VSCode-PHP中文网

VSCode HTML自动补全失效主因是Emmet触发开关关闭或语言模式冲突；需启用"emmet.triggerExpansionOnTab": true、"html.suggest.enabled": true及"editor.quickSuggestions"对应配置，并确认文件语言模式正确。

vscode中html自动补全怎么调出来？简单设置教程

VSCode里HTML自动补全默认是开的，但多数人调不出来，根本原因不是没装插件，而是Emmet展开逻辑被关了，或者语言模式/设置项冲突了。

按 Tab 没反应？先确认 `emmet.triggerExpansionOnTab`

这是最常被关掉的开关。输入 div 后按 Tab 什么都没发生，大概率就是它设成了 false 或压根没配。

打开 settings.json（Ctrl+Shift+P → 输入 Preferences: Open Settings (JSON)）
确保有这一行："emmet.triggerExpansionOnTab": true
如果已有但值是 false，改成 true；如果整段 emmet 配置被注释或删了，补上也不影响
改完别忘了执行 Developer: Reload Window，部分设置不重启不生效

`html.suggest.enabled` 和 `editor.quickSuggestions` 必须同时为真

这两个控制的是“补全建议弹窗是否出现”，和 Emmet 展开是两套机制。哪怕 Emmet 正常，这俩关了，di 也不会提示

。


"html.suggest.enabled": true 是 HTML 语言服务的总开关

"editor.quickSuggestions": {"other": true, "strings": true} 表示在普通代码区和字符串内都弹建议（比如 class="|" 里也要提示）
注意："strings": true 才能让 type="|" 这类属性值中弹出枚举建议（如 text、email），原生就支持，不用插件

Vue / Svelte / JSX 文件里补全失效？加 emmet.includeLanguages

VSCode 默认只对 .html 文件启用 Emmet。你在 .vue 的  里输 ul 按 Tab 没反应，是因为 Emmet 根本没加载。

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

在 settings.json 中加入："emmet.includeLanguages": {"vue-html": "html", "svelte": "html", "javascriptreact": "html"}

如果用的是 Vue 单文件组件，还得加一行："files.associations": {"*.vue": "vue"}（否则语言模式可能识别成 plain text）
检查右下角状态栏：当前文件的语言模式必须是 HTML、Vue 或 Svelte，不是 Plain Text


补全出来了，但不自动闭合标签？看 html.autoClosingTag

输入 div → Tab 补成 
，这是 Emmet 干的；而输入  后自动补 
，靠的是另一个独立开关。

确认配置项："html.autoClosingTag": true

它不影响 div →  这种缩写展开，只管手写开始标签后的自动闭合
如果你装了 Prettier 或 ESLint 插件，它们可能劫持格式化流程，导致闭合延迟或失效；可临时禁用测试

真正卡住人的从来不是“怎么开”，而是多个开关互相覆盖、语言模式识别错位、改了设置不重启——尤其是 emmet.showExpandedAbbreviation 设成 "never" 时，连 di 都不会提示 
，这种细节最容易漏查。