VSCode HTML5模板片段需创建html.json文件，设prefix为html5，body含带${n:default}占位符的结构化代码，保存后重载窗口生效。
vscode 的代码片段（snippets）不是“写完再补”，而是“打几个字母就自动展开成结构化模板”——关键在触发词设计和变量占位控制。
如何创建一个全局可用的 HTML5 模板片段
全局片段对所有 .html 文件生效，适合基础骨架。需编辑用户级 snippet 文件：html.json，路径通常为：~/.vscode/snippets/html.json（macOS/Linux）或 %USERPROFILE%\AppData\Roaming\Code\User\snippets\html.json（Windows）。
内容示例：
{
"html5 boilerplate": {
"prefix": "html5",
"body": [
"<!DOCTYPE html>",
"<html lang=\"${1:zh-CN}\">",
"<head>",
" <meta charset=\"${2:UTF-8}\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>${3:Document}</title>",
"</head>",
"<body>",
" ${4:<!-- content -->}",
"</body>",
"</html>"
],
"description": "HTML5 basic template with tabstops"
}
}
注意点：
-
prefix是触发关键词，输入html5后按Tab即展开 -
${1:zh-CN}表示第一个跳转位置，冒号后是默认值，可直接回车跳过 - 多个
${n:...}按数字顺序跳转，${0}是最终光标停留位 - 文件必须是合法 JSON，末尾不能有多余逗号
如何让片段只在特定语言或文件夹中生效
片段作用域由文件名决定：全局片段放 html.json，项目级片段则放在工作区根目录的 .vscode/snippets/ 下，并命名为 javascript.json、typescript.json 等。VSCode 会自动识别对应语言。
若需更细粒度控制（比如仅在 src/components/ 下的 .vue 文件中启用），目前无原生支持——只能靠命名区分，例如定义 prefix 为 vc-comp，靠团队约定使用。
常见误区：
- 把
vue.json放进用户 snippets 目录，但未安装官方 Vue 扩展，VSCode 不识别.vue语言，片段不会出现 - 在工作区启用
"editor.suggest.snippetsPreventQuickSuggestions": false，否则输入 prefix 后可能不显示片段建议
为什么输入 prefix 后没反应？排查这三处
最常卡在这几个环节，不是配置错，而是环境没对上：
- 当前文件后缀是否匹配片段所在 JSON 文件名？例如在
index.tsx中输log，但片段只定义在javascript.json里 → 需复制到typescriptreact.json或改用typescript.json - 是否误将 snippet 写在了错误的 JSON 字段下？正确结构是外层为对象，key 是片段名，value 是含
prefix/body的对象，不是直接写body数组 - VSCode 是否已重载窗口？修改 snippet 文件后，需按
Ctrl+Shift+P（或Cmd+Shift+P）→ 输入Developer: Reload Window才生效
进阶：用变量和嵌入逻辑生成动态内容
VSCode 原生不支持条件判断或函数调用，但可组合内置变量提升效率：
-
$TM_FILENAME_BASE→ 当前文件名（不含后缀），适合生成组件名：const ${TM_FILENAME_BASE} = () => { ... } -
$CURRENT_YEAR和$CURRENT_MONTH→ 自动生成版权头注释 -
$1～$9可重复使用：比如console.log('$1', $1);，填入user后自动变成console.log('user', user);
注意：$1 和 ${1:default} 不兼容混用；同一数字编号的占位符会同步更新，但不同编号之间无联动。
真正难的是平衡复用性与上下文感知——比如一个 React 组件模板，既要适配 .tsx 又要兼容 .jsx，还得预留 props 类型插入点。这时候与其堆变量，不如拆成 rc-fc（函数组件）、rc-cc（类组件）两个 prefix，手动选更稳。
