!+Tab不生效需先检查三件事：文件已保存且后缀为.html或.htm；右下角语言模式显示HTML；emmet.triggerExpansionOnTab必须为true。

! + Tab 不生效，先检查这三件事

VSCode 生成 HTML 模板根本不需要插件，! + Tab 是内置 Emmet 功能，失效几乎全是环境配置问题。

• 文件必须已保存且后缀为 .html 或 .htm（index.txt 或未保存的 Untitled-1 都不触发）
• 右下角语言模式必须显示为 HTML（不是 Plain Text，点它手动切或按 Ctrl+Shift+P → Change Language Mode）
• emerald.emmetTriggerExpansionOnTab 必须为 true（默认开启，但有人在设置里关过）

html:5 和 ! 的行为差异在哪

两者都生成标准 HTML5 骨架，但触发逻辑和容错性不同：

• ! 是 Emmet 的文档缩写（document abbreviation），字符最短，但只在空行或行首生效；如果光标卡在已有文本中间，它可能只补局部标签
• html:5 更明确，兼容性略强——某些旧版自定义配置或禁用部分 Emmet 规则时，! 失效但 html:5 仍可用
• 注意：html:5 后必须按 Tab，按 Enter 会换行而非展开（VSCode 个别版本有此 bug）

自定义模板时 prefix 和 body 容易写错的点

改 html.json 写代码片段时，真正卡住人的不是语法，而是这些细节：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• prefix 只能是英文/数字组合，比如 myhtml 可以，我的模板 或 html-5（含短横线）会直接失效
• body 是字符串数组，每行一个 string；双引号内嵌双引号必须转义："<meta charset='\"UTF-8\"'>"
• $1、$2 表示跳转位置，顺序不能乱，$0 是最终光标停靠点；漏掉或重复会导致 Tab 后光标乱跳
• 如果模板含 <script></script> 或 <style></style>，确保闭合标签写全，否则插入后可能破坏语法高亮甚至报错

为什么改了 snippets 还是不走自定义模板

常见原因是语言模式没对上——VSCode 的代码片段是按语言绑定的。

立即学习“前端免费学习笔记（深入）”；

• 你改的是 html.json，那它只在语言模式为 HTML 且文件后缀为 .html 时才加载
• 如果文件是 .vue，即使里面写了 <template></template>，也要单独配 vue.json 或在设置里加 emmet.includeLanguages
• 改完 html.json 后不用重启 VSCode，但要确保当前编辑器焦点在 .html 文件里，再输 ! 测试

真正容易被忽略的是：自定义模板生效的前提，永远是文件已保存 + 语言模式正确 + 光标在可触发位置——不是代码写得不够漂亮，而是这三步没走稳。