vue.json必须放在VSCode配置目录的snippets子目录下，Windows路径为C:\Users{用户名}\AppData\Roaming\Code\User\snippets\vue.json，macOS为~/Library/Application Support/Code/User/snippets/vue.json；推荐通过命令面板“Configure User Snippets”选择vue自动生成，确保路径和文件名正确。
vue.json 文件必须放在正确路径才能生效
VSCode 的用户代码片段不是随便放个 vue.json 就能用的。它必须存放在 VSCode 配置目录下的 snippets 子目录里，Windows 路径是 C:\Users\{用户名}\AppData\Roaming\Code\User\snippets\vue.json，macOS 是 ~/Library/Application Support/Code/User/snippets/vue.json。手动新建文件时如果路径错了，输入 vue 完全没反应——不是插件问题，是文件根本没被加载。
更稳妥的做法是：用 Ctrl+Shift+P（Win）或 Cmd+Shift+P（Mac）打开命令面板，输入 Configure User Snippets，再选 vue（不是新建普通 JSON 文件），VSCode 会自动创建并打开正确的 vue.json。这个动作确保路径和文件名都合规。
prefix 值区分大小写，且不能含空格或特殊符号
prefix 是触发代码片段的关键字，比如设成 "prefix": "vh"，那必须在 .vue 文件里**连续、无空格**地敲出 vh，然后按 Tab 或 Enter 才能展开。敲成 v h、VH、vue! 都不会匹配。
常见误操作：
立即学习“前端免费学习笔记（深入）”；
- 把
prefix设为"Vue"，但在文件里输小写vue→ 不触发 - 加了中文标点或空格，如
"prefix": "vue "→ 无效 - 用
vue作为 prefix，但当前文件右下角语言模式显示为HTML而非Vue→ 片段不出现（需点击右下角手动切为Vue）
Vue 2 和 Vue 3 模板不能混用同一 prefix
Vue 2 的 Options API 和 Vue 3 的 <script setup> 结构完全不同，强行用一个 prefix 绑定两种模板会导致内容错乱。建议分开定义：
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
在同一个 vue.json 里写两个独立片段：
{
"vue2": {
"prefix": "vue2",
"body": ["<template>", " <div>$0</div>", "</template>", "", "<script>", "export default {", " data() {", " return {}", " }", "}</script>"]
},
"vue3": {
"prefix": "vue3",
"body": ["<script setup lang=\"ts\">", "$0", "</script>", "", "<template>", " <div></div>", "</template>"]
}
}
这样输入 vue2 得到 Options 模板，输入 vue3 得到 Setup 模板，互不干扰。别图省事只留一个 vue，后期项目升级或多人协作时容易踩坑。
tabStop 编号（$1 $2 $0）决定光标跳转顺序，$0 是最终停留位
模板里的 $1、$2 是占位符，按 Tab 键可依次跳转填充。比如这段：
"<div class=\"$1\">$2</div>"
生成后光标先停在 class="" 引号内（$1），再按一次 Tab 跳到 <div> 和 </div> 中间（$2）。而 $0 是终点，比如写成 "<script setup>$0</script>"，光标最后就落在 script 标签内部，不用再手动定位。
容易忽略的细节：
- 多个相同编号（如两个
$1）会同步更新，适合复用名称 - 没写
$0时，光标默认停在模板末尾，可能离你真正要写代码的位置很远 - 如果模板里有
$1但漏写了$2，按第二次Tab会直接跳出模板，无法继续填空
