VS Code 中输入 ! + Tab 可快速生成 HTML5 骨架，但高频局部结构需自定义 snippet
相信很多前端开发者都熟悉这个操作：在 VS Code 的 HTML 文件里，输入一个感叹号 !，然后按下 Tab 键，一套标准的 HTML5 文档骨架就瞬间生成了。这确实是提高效率的绝佳起点。
但问题在于，这个默认片段只是解决了“从零到一”的问题。真正决定你日常开发速度的，其实是那些高频使用的局部结构。比如一个标准的 的主内容区，或者一个已经预设好 Tailwind CSS 类名的容器 。这些重复性代码，指望默认片段是覆盖不到的，必须靠自定义代码片段（snippet）来解决。
顺带提一句，你可能也见过用 html:5 来触发相同骨架的旧方法。在某些 VS Code 版本里，这个语法可能会响应迟缓甚至被禁用。相比之下，直接用 ! 触发更加稳定可靠，建议优先采用。
自定义 snippet 必须设对 language 和文件后缀
配置自定义片段，第一步就走对地方。在 VS Code 中，你需要打开「文件 > 首选项 > 用户代码片段」，然后务必选择 html.json。这里有个常见的坑：如果错配到了 ja vascript.json 或者全局的 snippets 文件夹，那么即使你的片段内容写得完全正确，在 .html 文件里也永远不会触发。
配置时，有几个关键项必须显式地写清楚：
立即学习“前端免费学习笔记（深入）”；
"language": "html"—— 这是指定片段生效语言的灵魂字段，缺失了就不会触发。"prefix": "h5-main"—— 这是你输入的触发词。起名有讲究，尽量避免使用像main这样过于通用的单词，以防和 Emmet 缩写或其他扩展冲突。"body"字段里，所有标签都必须完整闭合。别指望 VS Code 会帮你自动补全你没写的。- 使用
$1$、$2$作为占位符来实现光标跳转。注意格式，写成${1}可能会导致跳转功能失效。
含
正确的处理方式应该是这样：
- 所有出现在字符串内部的双引号，都必须转义为
\"。 - 标签符号
<和>可以保持原样，但&符号必须写成\&。 - 如果希望插入动态内容，比如页面标题，就用
$1$占位符，而不是把"My Site"这样的文字硬编码进去。 - 尽量避免在
body里写代码注释，因为 JSON 本身不支持行内注释，很容易引发解析错误。
改完 snippet 没反应？先关文件再重启 VS Code
这可能是最让人头疼的一步了：明明按照教程修改并保存了 html.json 文件，回到编辑器输入触发词，却什么反应都没有。
问题往往出在 VS Code 对代码片段的缓存机制上。这个缓存相当“顽固”，只要你之前打开过任何一个 .html 文件，新添加或修改的片段就可能无法被加载识别。
这时候，你需要执行一个完整的“刷新”操作链，顺序不能乱：
- 首先，关闭所有已经打开的 HTML 文件（不仅仅是当前正在编辑的那一个）。
- 然后，彻底退出 VS Code 进程。最好在任务管理器里确认一下，
Code.exe或Electron相关的进程已经全部结束。 - 接着，重新启动 VS Code。
- 最后，新建一个
.html文件，输入你设定的 prefix 进行测试。
这个步骤基本绕不开。很多人调试了半天，反复检查 JSON 格式和语法，却忽略了编辑器进程残留的问题，白白浪费了大量时间。记住，重启大法在这里往往是最高效的解决方案。
