直接在vscode用户snippets目录下创建html.json文件即可，路径需正确、json格式严格、scope设为"html"，重启后输入prefix+tab生效。
怎么把 HTML 片段存成 VSCode snippet
直接在 VSCode 里建一个 html.json 文件，放用户 snippets 目录下就行。不是复制粘贴到编辑器里运行，也不是装插件——VSCode 原生支持，路径对、格式对，重启（或重载窗口）就生效。
常见错误现象：snippets 文件夹名写错（比如写成 snippet 或 Snippets）、JSON 格式少逗号或引号、"scope": "html" 没加或写成 "html5"（无效值）。
- Windows 路径：
%APPDATA%\Code\User\snippets\html.json - macOS 路径：
$HOME/Library/Application Support/Code/User/snippets/html.json - Linux 路径：
$HOME/.config/Code/User/snippets/html.json
html.json 里 snippet 的基本结构长什么样
每个 snippet 是一个键值对，key 是触发词（比如 doc），value 是包含 prefix、body、description 的对象。别套用 JavaScript 对象写法，必须是标准 JSON：双引号、无尾逗号、字符串里换行用 \n。
示例：输入 doc + Tab 补全一个基础 HTML5 结构
{
"HTML5 boilerplate": {
"prefix": "doc",
"body": [
"",
"",
"",
" <meta charset="${2:utf-8}">",
" <title>${3:Document}</title>",
"",
"",
" $0",
"",
""
],
"description": "Basic HTML5 structure"
}
}
-
$1、$2是 tabstop，按 Tab 键依次跳转；$0是最终光标位置 -
${1:zh-CN}表示默认值为zh-CN，可直接回车跳过 - 所有 HTML 尖括号必须转义为
和 <code>>，否则 JSON 解析失败
为什么写了没反应？检查 scope 和语言模式
VSCode 不是全局匹配 snippet，它严格按当前文件的语言模式（language mode）决定是否激活。即使你写了 html.json，如果当前文件右下角显示的是 Plain Text 或 JavaScript React，doc 就不会弹出来。
- 确保文件后缀是
.html，且右下角语言标识确实是HTML - 临时切换语言模式：Ctrl+Shift+P → 输入
Change Language Mode→ 选HTML - 想在
.vue或.svelte里也用，得额外配"scope": "html, vue, svelte"（注意是英文逗号+空格分隔，不是数组） - 别信“自动识别”，.htm、.xhtml、无后缀文件默认不走
html.json
常用结构怎么写 body 才不翻车
body 是字符串数组，每行一项。别拼成单个长字符串，也别漏掉引号或逗号。缩进用空格（VSCode 默认 2 空格），别混用 tab —— 否则补全后格式错乱。
几个高频结构的写法要点：
-
<img>标签：记得加alt占位符，"<img src="%24%7B1:./img/%7D" alt="${2:}">" - 表单控件：用
${1:text}设默认 type，避免手敲时删多 - class 多值场景：
class="${1:btn} ${2:btn-primary}"，两个 tabstop 分开，方便单独改 - 嵌套结构（如列表）：用缩进对齐逻辑层级，但数组本身不体现缩进，靠字符串里的空格控制
容易被忽略的一点：VSCode snippet 不做 HTML 语法校验，<div><p></p></div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
