Vue模板Tab补全需同时满足：文件语言模式为Vue且代码片段scope设为"vue"；须安装Volar、禁用Vetur、正确配置files.associations、使用.vue后缀、将vue.code-snippets放至用户snippets目录、重载窗口生效。
为什么输入 vue 按 Tab 没反应
根本就不是插件没装全，而是两个条件缺一不可：当前文件语言模式必须是 vue，且代码片段的 scope 字段必须严格设为 "vue"。
右下角状态栏显示的是 HTML 或 Plain Text？点它 → 手动选 Vue（前提是已安装 Volar）；vue.code-snippets 里写了 "scope": "html" 或漏掉 scope 字段？VS Code 会直接忽略整个片段。
- 禁用
Vetur—— 它不支持scope: "vue"，和 Volar 共存还会让defineProps类型失效 - 检查
files.associations设置，确保有"*.vue": "vue" - 新建空文件后缀必须是
.vue，仅靠内容识别语言模式不可靠
vue.code-snippets 文件该放哪、怎么命名
别碰 vue.json —— 它容易被其他插件覆盖或误写成语法错误（比如末尾多一个逗号），VS Code 会静默跳过整个文件。
推荐新建独立的全局片段文件：vue.code-snippets，路径在用户 snippets 目录下：
立即学习“前端免费学习笔记（深入）”；
- Windows：
%APPDATA%\Code\User\snippets\vue.code-snippets - macOS：
~/Library/Application Support/Code/User/snippets/vue.code-snippets - Linux：
~/.config/Code/User/snippets/vue.code-snippets
文件名带 .code-snippets 后缀，VS Code 才能正确识别为片段配置，而不是普通 JSON。
prefix 和 body 怎么写才适配 Vue 3 + TS 项目
抄 Vue 2 的 export default { data() { } } 模板？运行时直接报错 Component is missing template or render function。Vue 3 script setup 模板必须匹配项目实际语法。
以下是最小可用模板（含 TypeScript 基础导入）：
{
"Vue SFC (setup + TS)": {
"scope": "vue",
"prefix": "vue3",
"body": [
"<template>",
" <div>$1</div>",
"</template>",
"",
"<script setup lang="ts">",
"import { ref, reactive, onMounted } from 'vue'",
"",
"const props = defineProps<{",
" msg?: string",
"}>()",
"",
"const count = ref(0)",
"const state = reactive({",
" name: ''",
"})",
"</script>",
"",
"<style scoped>",
"$2",
"</style>"
],
"description": "Vue 3 SFC with script setup and TS"
}
}
-
prefix推荐用vue3或sfc，避免和旧插件的vue前缀冲突 -
$1放在<template>内，$2放在<style>内，光标跳转才符合直觉 - 删掉所有注释行（JSON 不支持）和 trailing comma，否则片段加载失败
保存后为啥还要重载窗口
VS Code 不会热更新用户代码片段配置。改完 vue.code-snippets 文件后，必须执行 Developer: Reload Window（Ctrl+Shift+P → 输入并回车），否则新片段永远不生效。
这不是 bug，是 VS Code 的设计机制：片段注册发生在窗口启动阶段。只重启编辑器标签页、甚至关掉再开 .vue 文件都没用。
重载后，打开任意 .vue 文件，确认右下角是 Vue，输入 vue3 再按 Tab —— 这才是唯一有效的验证方式。别信“装了插件就自动好”，Vue 模板这件事，从头到尾都是手动配出来的。
