应直接修改用户级 html.json 文件配置 html 代码片段，避免安装插件导致冲突或失效；prefix 需语义化避开默认值和 emmet 冲突；占位符用 ${1:default} 等变量提升复用性；确保文件为合法 json、语言模式为 html 且启用代码片段建议。
直接改 html.json，别装插件
VS Code 原生的代码片段（snippets）机制足够稳定、轻量，且不依赖插件更新或兼容性适配。装所谓“HTML 模板插件”反而容易覆盖你已配置的 prefix，或在 VS Code 升级后失效。所有自定义 HTML 片段都应写入用户级 html.json 文件——路径是：~/.vscode/snippets/html.json（macOS/Linux）或 %USERPROFILE%\AppData\Roaming\Code\User\snippets\html.json（Windows）。文件不存在就手动创建，确保是合法 JSON（末尾不能有逗号，字符串用双引号）。
prefix 设计要避开冲突，比如不用 !
VS Code 默认在 .html 文件中输入 ! + Tab 就展开基础 HTML5 结构。如果你自定义一个 "prefix": "!" 的片段，会直接覆盖默认行为，且无法回退。实际开发中更推荐语义化前缀：
-
html5：用于新建空白页，含<meta charset="UTF-8">和<meta name="viewport"> -
form：插入带required和novalidate的表单骨架 -
img-resp：响应式<img>标签，含srcset占位和loading="lazy"
避免用单字符或常见缩写（如 div、ul），它们可能和 Emmet 冲突，触发时只展开一半就卡住。
占位符 ${1:default} 要按需设，默认值别硬编码
HTML 片段里语言、标题、编码这些值，项目间差异大，硬写死反而增加修改成本。正确做法是用变量占位：
-
：光标首次停在这里，回车跳过即用默认，也可手动改 -
<title>${2:Document}</title>：第二跳位置，常需手动填 -
${0}放在内容区末尾，保证 Tab 一遍后光标落在可编辑区域
别写 这种固定值——中文项目每次都要删改，漏改还会导致 SEO 问题。
片段不生效？先查这三处
输对 prefix 却没反应，大概率不是语法错，而是环境配置问题：
- 确认当前文件后缀是
.html，且右下角语言模式显示为 “HTML”（不是 “Plain Text”） - 检查设置里是否启用了
editor.suggest.snippetsPreventQuickSuggestions，如果是true，关掉它 - 重启 VS Code 或执行命令
Developer: Reload Window，片段变更不会热加载
真正容易被忽略的是：片段只对 .html 文件生效，哪怕你把 Vue 单文件组件的 <template></template> 部分复制进纯文本文件，也不会触发 HTML 片段——那是 vue.json 的事，得另配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
