VSCode中需配置用户代码片段（vue.json）并设scope为"vue"，配合Volar插件启用，文件后缀必须为.vue，输入vue按Tab才可触发模板；常见失效原因包括scope错误、Volar未启用、后缀非.vue或未重启编辑器。
VSCode 里不能靠插件“一键新建 .vue 文件”就完事——真正起作用的是用户代码片段（snippets），且必须配对 scope: "vue" 才能在 .vue 文件内触发。
为什么输入 vue 按 Tab 没反应
常见错误不是代码写错了，而是根本没生效：
-
scope值填成了"html"或"javascript"，必须是"vue"—— 这是 VS Code 决定“该不该展开”的唯一依据 - Volar 插件未启用或被禁用：VS Code 本身不识别
vuescope，Volar 启用后才注入该语言支持 - 文件没保存为
.vue后缀：哪怕内容全是 Vue 语法，只要后缀不是 .vue，scope: "vue"就不会激活 - 配置文件名写错：必须是
vue.json（全局）或项目级.vscode/snippets/vue.code-snippets，不是vue-template.json等随意命名
vue.json 中必须写的最小可用结构
别抄网上带几十行生命周期的旧模板，Vue 3 + setup 场景下，够用且无兼容风险的配置长这样：
{
"Vue 3 SFC": {
"scope": "vue",
"prefix": "vue",
"body": [
"<template>",
" <div>$1</div>",
"</template>",
"",
"<script setup lang="ts">",
"import { ref } from 'vue'",
"",
"const $2 = ref<string>('')",
"</script>",
"",
"<style scoped>",
"$3",
"</style>"
],
"description": "Minimal Vue 3 SFC with TS"
}
}
注意几点：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
-
lang="ts"是默认值，若项目用 JS，删掉即可，别硬写lang="js"（无效） -
$1/$2/$3是 tab 切换焦点位置，$0表示最终光标停靠点，没写就默认在末尾 - 空行必须用
""表示，不能省略，否则结构错位 - 所有 HTML 标签尖括号要转义为
<和>，否则 JSON 解析失败
Vue 2 和 Vue 3 模板不能混用
同一个 vue.json 里可以共存多个 snippet，但 prefix 要区分清楚：
- 给 Vue 2 项目用：
prefix: "vue2"，body里写export default { data() { return {} } } - 给 Vue 3 项目用：
prefix: "vue3"，body里用<script setup>，别塞beforeMount那套 Options API - 别用一个
prefix: "vue"想兼顾两者——项目类型一变，模板立刻失效或报错 - 如果项目同时存在 Vue 2 和 Vue 3 组件（如迁移中），建议按目录分 scope，但 VS Code 不支持目录级 snippet，只能靠 prefix 区分并手动输
和 Prettier、ESLint 共存时的格式冲突点
模板生成后第一次保存，常出现样式“跳动”，根源不在 snippet 本身，而在格式化链路：
- Prettier 默认不处理
<template>中的缩进，但若开了prettier.vueIndentScriptAndStyle: true，它会强行缩进 script/style 块，和你 snippet 里的空格数打架 - ESLint 的
vue/multi-word-component-names等规则，在模板刚生成、还没写name时就会报错，属于正常，别因此怀疑 snippet 失效 - 最稳妥做法：生成模板 → 手动删掉所有空行和占位符（如
$1）→ 再保存，让格式化器从干净状态开始工作
真正难搞的从来不是怎么写 snippet，而是改完之后忘记重载窗口，或者误以为 Volar 没装好——其实只是没重启 VS Code。
