VSCode怎么开启HTML自动补全提示？小白配置教程
轻芳酱_6906
发布时间：2026-11-07 07:36:30
|
348人浏览过
|
来源于php中文网
原创
VSCode HTML补全失效主因是关键设置关闭或语言模式错误：需开启html.suggest.html5、确认emmet.triggerExpansionOnTab为true、右下角语言模式设为HTML，实验性属性值补全需手动添加html.suggest.experimental.customHtml5:true并重启。
VSCode 默认就开了 HTML 补全，但多数人遇到的“不提示”，其实是几个关键开关被关了，或语言模式没识别对——不是插件没装、也不是版本问题。
html.suggest.html5 关掉后语义标签全消失
这个设置直接决定 <header></header>、<nav></nav>、<main></main> 这类 HTML5 标签会不会出现在补全列表里。关掉它，只剩 <div> <code><span></span> 这些老标签可选。
- 打开设置（
Ctrl+, 或 Cmd+,），搜 html.suggest.html5，确保勾选
- 或者手动编辑
settings.json，加这一行："html.suggest.html5": true
- 别和
html.autoClosingTag 搞混：后者管自动闭合（输 <div> 后自动加 <code>
），跟提示无关
Emmet 缩写不展开？检查触发键和语言模式
Emmet 是 VS Code 里 HTML 缩写补全的核心，但它只响应 Tab 键，且必须当前文件被识别为 html 语言模式。
- 看右下角状态栏，如果显示的是
Plain Text 或 Vue，点它 → 选 Configure File Association for '.xxx' → 设为 HTML
- 确认
emmet.triggerExpansionOnTab 是 true（默认就是，但某些禁用插件会把它改成 false）
- 输入
ul>li*3 后按 Tab 才展开；按 Enter 就换行，Space 会中断缩写
- 想中途补全（比如输到
nav 就想看到 <nav></nav>），得先按 Ctrl+Space 唤出菜单，再选 Emmet 项
input type="|" 不提示 date/email/number？那是实验性功能
标准 HTML 属性值枚举补全（比如 type、autocomplete、inputmode 的合法取值）目前由 html.suggest.experimental.customHtml5 控制，仍属实验性，且仅部分 VS Code 版本支持。
立即学习“前端免费学习笔记（深入）”；
- 它不是默认开启的，也不在图形设置界面暴露，只能手动加进
settings.json：
"html.suggest.experimental.customHtml5": true- 加完要重启 VS Code 才生效
- 即使开了，也只覆盖 W3C 规范定义的枚举值，自定义属性（如
<my-input mode="|"></my-input>）还是不会提示——那得靠 html.customData 注入 JSON Schema
改标签名时前后不联动？装 Auto Rename Tag 插件
VS Code 原生不支持修改开始标签后自动同步结束标签，比如把 <div> 改成 <code><section></section>，结尾的
