vscode 自带代码片段功能，无需插件或在线生成器；应手动创建合法 json 格式的 vue.json 文件，选对语言 id（vue）、保存文件、用 tab 键触发，避免换行未转义、引号缺失、prefix 错误等常见问题。
VSCode 自带代码片段功能，不需要额外安装生成器网站或插件——那些在线 snippet 生成工具反而容易导出格式错误、缺少转义或不兼容的 JSON，直接手写更稳。
为什么别用 snippet-generator.app 这类网站
这类网站生成的 JSON 常见问题包括：body 中换行没转义成 \n、引号未双写、prefix 被包成数组、默认值写法 ${1:foo} 被错误转义成 \$\{1:foo\}。VSCode 对 JSON 格式极其敏感，任一语法错误都会导致整个文件失效，且不报错，只静默忽略。
- 所有片段必须保存为合法 JSON 对象，不能有 trailing comma
-
prefix必须是字符串，比如"vue"，不是["vue"]或vue（无引号） - 语言专属片段（如
vue.json）只在对应语言模式下生效，和文件后缀无关，而和编辑器右下角显示的语言 ID 一致（Vue 单文件对应语言 ID 是vue，不是html或vue-html）
如何正确创建 vue.json 片段实现输入 vue + Tab
这是最常被卡住的一步：必须选对语言文件，而不是随便粘贴进 html.json 或全局 snippets.json。
- 按
Ctrl+Shift+P（Win）或Cmd+Shift+P（Mac），输入Configure User Snippets - 在弹出列表中**明确选择
vue**（不是html、javascript或new global snippets file） - 粘贴如下结构（注意
body每行用双引号包裹，逗号分隔，$0放在最后）：
{
"vue template": {
"prefix": "vue",
"body": [
"<template>",
" <div>$0</div>",
"</template>",
"<script>",
"export default {",
" name: '${1:ComponentName}',",
" data() {",
" return {",
" $2",
" }",
" }",
"}",
"</script>",
"<style scoped>",
"$3",
"</style>"
],
"description": "Vue 2/3 SFC template structure"
}
}
保存后，新建一个 test.vue 文件，输入 vue 再按 Tab（不是 Enter），即可展开。
常见触发失败原因与验证步骤
写了却没反应？不是 VSCode 坏了，而是以下某个环节断了链路：
- 当前文件语言模式不是
vue：看右下角状态栏，如果不是vue，点击它 → 选择Vue（不是HTML） -
vue.json文件没保存：VSCode 不会热加载未保存的修改，务必按Ctrl+S - 用了
Enter而非Tab触发：VSCode 默认只响应Tab键，Enter是确认补全项，不是展开片段 - 前缀冲突：比如同时存在
"vue"和"vue3"，且vue3的prefix写成了"vue"，会导致匹配混乱
全局片段 vs 语言专属片段怎么选
通用日志、TODO、HTTP 请求模板这类跨语言内容，适合放全局；组件结构、钩子函数、生命周期这些强语言绑定的，必须走语言专属文件。
- 全局片段路径：用户目录下
~/.vscode/snippets/（Windows 是%USERPROFILE%\AppData\Roaming\Code\User\snippets\），文件名任意，如common.code-snippets - 语言专属片段路径：同上，但文件名固定为
language-id.json，比如javascript.json、typescript.json、vue.json - 项目级片段可放
.vscode/vscode.code-snippets，但仅对该工作区生效，且需手动启用（VSCode 1.89+ 支持）
真正难的不是写 JSON，而是确保语言 ID 匹配、保存动作完成、触发键位正确——这三个点漏掉任何一个，片段就等于不存在。
