VS Code 自带的用户代码片段（vue.json）才能实现新建 .vue 文件时自动生成 template/script/style 结构，插件仅负责前缀补全；需正确配置 scope 为 "vue"、文件名为 vue.json，并设置 prefix 如 "vuel" 避免冲突。
Vue VSCode Snippets 插件能直接补全 vuel、vue 等前缀生成标准 Vue 单文件组件，但**它不负责新建空 .vue 文件时的初始结构**——这点常被误以为“装了就自动有模板”，结果新建文件还是空白。真正解决“一键创建带 template/script/style 的 .vue 文件”的，是 VS Code 自带的「用户代码片段」机制，不是插件。
新建 .vue 文件时没模板？问题出在 scope 配置
很多人装了 Volar 或 Vue Language Features，以为它们该管文件模板，其实它们只增强语法高亮和类型检查，不提供文件级模板。VS Code 本身从不自动生成新文件内容，必须靠代码片段（snippets）+ 正确的 scope 触发。
常见错误现象：
- 新建
test.vue后全是空行，得手动敲三块结构 - 在用户片段里写了
"scope": "vue"，但输入vue+ Tab 没反应 - 复制别人配置，却把
scope写成"html"或漏写
正确做法是：打开命令面板（Ctrl+Shift+P），搜 Configure User Snippets → 选 vue（不是全局或 javascript）。生成的 vue.json 文件里，每个片段必须显式指定 "scope": "vue"，且文件名必须是 vue.json（VS Code 严格按文件名匹配语言）。
vue.json 片段怎么写才真正生效
片段 body 要覆盖完整单文件组件结构，且占位符位置合理。比如 vuel 前缀应生成含 <template>、<script setup>、<style scoped> 的三段式结构，光标默认落在 <template> 内部。
关键点：
-
prefix设为"vuel"，别用"vue"（容易和插件冲突） -
body数组每行一个字符串，用$1标记第一个光标位置（通常在<template>里），$2放在<script>内部，$0表示最终光标停留处 - 必须包含
"scope": "vue"字段，否则即使文件是 .vue，也不会触发 - 不要用
$TM_FILENAME_BASE这类变量在<script>里生成组件名——Vue 3setup不需要命名导出，留空更安全
示例片段节选：
{
"Vue SFC with setup": {
"prefix": "vuel",
"scope": "vue",
"body": [
"<template>",
" <div>$1</div>",
"</template>",
"",
"<script setup>",
"$2",
"</script>",
"",
"<style scoped>",
"$0",
"</style>"
],
"description": "Vue 3 single file component with script setup"
}
}
全局模板如 README.md 怎么配
这类非语言专属模板走的是全局代码片段路径，不依赖 scope，而是靠 prefix 在任意文件中触发。比如 readme 前缀，在新建 README.md 后输入 readme + Tab 就能展开。
操作步骤：
- 命令面板输
Configure User Snippets→ 选New Global Snippets file - 文件名建议叫
global.code-snippets，避免覆盖默认 global -
prefix用短小易记的词（如readme、lic），body直接写 Markdown 结构 - 注意
body中的反引号要转义：写成"```bash"，不是"\`\`\`bash"
一个易踩坑点：$tm_filename_base 在全局片段里不可用——它只在对应语言的片段中解析。想动态插入文件名，得用 $1 手动填。
插件和片段混用时的优先级问题
Vue VSCode Snippets 和你自定义的 vue.json 可共存，但触发逻辑不同：插件靠前缀（如 v-if）补全语句，你的片段靠 prefix（如 vuel）生成整个结构。两者不冲突，但要注意命名别重叠。
真正麻烦的是调试阶段：改完 vue.json 必须保存文件，且当前编辑的 .vue 文件要处于焦点状态，Tab 才会触发；如果正在编辑 .js 文件，哪怕内容是 Vue 组件，scope: "vue" 也无效。
最后提醒：项目级片段（放在 .vscode/vue.code-snippets）优先级高于用户级，但需手动维护同步。日常开发，直接配用户级 vue.json 最省事——毕竟没人想每次新建项目都重新配一遍。
