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

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 也不会提示 <div>。
<ul>
<li>
<code>"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 的 <template></template> 里输 ul 按 Tab 没反应,是因为 Emmet 根本没加载。
立即学习“前端免费学习笔记(深入)”;
- 在
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 补成 <div></div>,这是 Emmet 干的;而输入 <div> 后自动补 <code>



















