VSCode 中 Vue3 代码片段需存于用户 snippets 目录下的 vue.json 文件，且确保 .vue 文件 languageId 为 vue（由 Volar 插件识别），片段结构须为合法 JSON 对象，含 prefix、body（字符串数组）、description 字段，body 中缩进用空格，占位符用 $1/$2/$0 格式，不可加注释。
VSCode 里写 Vue 组件，靠手敲 <script setup>、<template>、<style> 三块结构太慢，也容易漏掉 defineProps 或 defineEmits 的类型声明。直接配好代码片段，输个前缀按 Tab 就出来，才是日常开发的合理节奏。
怎么让 vue3-setup 片段在 .vue 文件里真正生效
很多人把 JSON 写进 vue.json，保存后在 .vue 文件里输 vue3-setup + Tab 却没反应——大概率是语言模式没对上。
- VSCode 判断是否触发片段，看的是编辑器右下角显示的 languageId（比如
vue），不是文件后缀；如果显示的是Plain Text或HTML，片段永远不会弹 -
vue.json是正确的文件名，但必须放在用户 snippets 目录下：%APPDATA%\Code\User\snippets\（Windows）、$HOME/Library/Application Support/Code/User/snippets/（macOS）、$HOME/.config/Code/User/snippets/（Linux） - 确认当前 .vue 文件已由 Volar 插件正确识别：右下角 languageId 应为
vue；若不是，右键 → “Change Language Mode” → 选Vue - 片段内容里别加注释（
//或/* */），JSON 不支持，会导致整个文件静默失效
vue.json 里写什么才不踩坑
片段结构看着简单，但字段名、嵌套层级、字符串格式错一点就白忙活。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 顶层必须是对象
{}，不能是数组或带注释的 JSONC - 每个片段 key 名任意（如
"Vue3 Script Setup"），但值必须含"prefix"（全小写）、"body"（字符串数组）、"description"（建议写，不然 IntelliSense 不显示说明） -
"body"每一项是一行代码，缩进用空格写死，别混用 Tab；例如"const count = ref(0)"前加两个空格，就真会缩进两格 - 占位符用
$1、$2、$0，不要写成${1}或$1:；$0是最终光标位置，必须有且只能有一个 - 需要默认值时用
${1:ref}，比如const ${1:name} = ${2:ref}(0)
为什么 vrouter 或 vh 片段在某些项目里不工作
像 vrouter（Vue Router 配置）或旧版 vh（Vue 2 HTML 模板）这类片段，失效常因作用域冲突或路径错位。
立即学习“前端免费学习笔记（深入）”；
-
vh片段如果定义在html.json里，它只在.html文件生效；想在.vue里用，得挪到vue.json或加"scope": "vue"字段（但vue.json本身已隐式限定 scope） -
vrouter这类纯 JS/TS 逻辑片段，如果写在vue.json里，它不会在.ts文件中触发；要跨语言，得放进全局common.code-snippets，且删掉"scope"字段 - 路径放错一级就无效：比如把
vue.json放进~/.config/Code/User/而不是.../snippets/子目录，VSCode 完全读不到 - 改完记得在 .vue 标签页里按
Ctrl+Space手动唤出建议列表，搜你的prefix，看到带 snippet 图标才算加载成功
最易被忽略的一点：Volar 插件启用后，VSCode 对 .vue 文件的语言解析逻辑变了，旧的 javascript.json 或 typescript.json 片段默认不再继承到 vue 模式下。你得明确把 Vue 相关片段放在 vue.json 里，而不是指望“它应该能通用”。
