VSCode怎么开启HTML自动补全？基础设置教学-VSCode-PHP中文网

VS Code HTML补全失效主因是配置未对齐：需确认语言模式为HTML、emmet.triggerExpansionOnTab为true、html.suggest.enabled和editor.quickSuggestions.strings均开启，并执行Reload Window生效。

vscode怎么开启html自动补全？基础设置教学

VS Code 默认已启用 HTML 基础补全，但多数人遇到“不补全”，其实是关键开关被关了、语言模式错了，或 Emmet 没触发——不是功能坏了，是配置没对齐。

右下角状态栏显示的语言模式决定 VS Code 用哪套规则解析当前文件。哪怕文件名是 index.html，如果状态栏显示 Plain Text，所有补全都会失效。

点击右下角语言标识（如 “Plain Text”），选 HTML；或者按 Ctrl+K Ctrl+M（macOS 是 Cmd+K Cmd+M）快速切换
.vue 文件默认走 Vue 语言模式，原生 HTML 补全不生效；需在 settings.json 中加："files.associations": {"*.vue": "html"}，再配合 "emmet.includeLanguages": {"vue-html": "html"}
新建空文件未保存时，默认是 Plain Text，必须先保存为 .html 后缀，或手动切语言模式

Emmet 是 VS Code 实现 div →

这类缩写展开的核心机制。它默认只响应 Tab 键，且仅在正确上下文里生效。

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

下载

检查 settings.json 是否有这一行："emmet.triggerExpansionOnTab": true；若为 false 或缺失，div + Tab 就不会展开
输入缩写后，必须以 > 或空格结尾再按 Tab，比如 div> 或 div （空格），直接输 div 回车是无效的
验证是否正常：新建 test.html，输入 ! + Tab，应生成完整 HTML5 模板；失败则说明 Emmet 链路断了

这是控制属性值、标签名等语义化建议是否弹出的关键组合。单独开一个，往往没效果。

"html.suggest.enabled": true 是全局总开关，关了就啥都不提示
"editor.quickSuggestions": {"other": true, "strings": true} 中的 strings: true 决定双引号内是否触发建议——比如 type="|" 或 class="|" 里能不能出列表
"html.suggest.html5": true 要打开，否则 header、nav 等语义标签不会出现在补全列表里
改完记得执行 Developer: Reload Window，部分设置热更新不生效

输入

 后自动补

是独立功能，和 Emmet 展开、语言服务提示完全无关。很多人混淆这点，反复调错配置。

只需确保 "html.autoClosingTag": true，且 "editor.autoClosingBrackets": "languageDefined"
如果用了 Prettier 或 ESLint，在保存时重格式化，会掩盖实时闭合效果；可临时禁用测试
在 .vue 文件中，Volar 插件接管后，这个设置基本失效，得靠 volar.autoInsertEmmetSupport 或插件自身闭合逻辑

最容易被忽略的是：补全建议是否在引号内弹出，取决于 strings: true，而不是标签本身有没有写对；而 input type="|" 这种语义值补全，还额外依赖 html.suggest.html5 开启——缺一不可。别只盯着 Emmet，那只是冰山一角。