不用装额外插件，vs code 原生代码片段功能+工作区级配置即可满足90% vue3组件模板生成需求；需在项目根目录创建.vscode/snippets/vue.json，配置prefix、body（含$1/$0占位符）和description，保存后在.vue文件中输入前缀按tab展开。
直接结论：不用装额外插件，VS Code 原生的代码片段（snippets）功能 + 工作区级配置，就能满足 90% 的模板生成需求；真正需要插件的场景，只在「跨项目复用模板」或「动态参数注入」时才出现。
如何用原生 snippets 快速创建 Vue 3 组件模板
很多人以为要装 Vetur 或 Vue Peek 才能生成组件骨架，其实 vue 语言内置支持 snippets，只需在项目根目录下建 .vscode/snippets/vue.json：
{
"Vue 3 Script Setup": {
"prefix": "v3s",
"body": [
"<script setup>",
"import { ref, defineProps, defineEmits } from 'vue'",
"",
"const props = defineProps<{ msg?: string }>()",
"const emit = defineEmits<{ 'update:modelValue': [value: string] }>()",
"</script>",
"",
"<template>",
" <div class="${1:component-name}">$0</div>",
"</template>"
],
"description": "Vue 3 script setup 模板"
}
}
保存后，在 .vue 文件中输入 v3s + Tab 即可展开。注意：prefix 必须唯一，$0 是光标最终位置，${1:xxx} 是第一个可编辑占位符。
常见错误：把文件放在用户级 snippets 目录（如 %APPDATA%\Code\User\snippets\），导致新项目不生效 —— 工作区模板必须放项目内 .vscode/snippets/ 下，且文件名要和语言 ID 一致（vue.json、typescript.json）。
为什么 Auto Import 插件不能替代模板生成
Auto Import 解决的是「已写代码的自动补全导入」，不是「从零生成结构化代码」。它不会帮你写出 <script setup></script> 包裹、defineProps 类型定义、甚至 onMounted 钩子 —— 这些都得靠 snippets 或专用插件。
- 当你输入
ref，Auto Import会自动加import { ref } from 'vue'，但不会生成整个 setup 函数体 - 如果你用的是
Swagger Doc To Code这类插件，它生成的是 API 接口类型 + 请求函数，属于「数据层模板」，和 UI 层组件模板是不同维度 - 混用时容易冲突：比如同时启用 Prettier 格式化 + snippets 展开，若 snippet 中有不合规缩进，Prettier 可能立刻重排，打乱你预留的光标位置
$0
什么情况下真该装模板生成插件
当你的模板依赖外部上下文（比如读取当前文件路径、包名、Git 分支名）或需批量生成多文件时，原生 snippets 就不够用了。
-
Swagger Doc To Code：根据 OpenAPI 文档生成 TS 类型 + 请求封装，模板里嵌了{{ serviceName }}这类变量，靠 JSON snippets 做不了 -
File Templates（非官方，但社区常用）：新建文件时弹出菜单选「React Hook Component」或「Pinia Store」，背后是读取.vscode/file-templates/下的 Handlebars 模板 - 团队共用模板：如果 5 个仓库都要用同一套组件规范，把 snippets 放每个项目太重复，这时用插件统一管理更省事
但要注意：这类插件往往不兼容所有语言模式，比如某些模板插件对 astro 或 svelte 支持弱，生成后还得手动修语法 —— 不如先用原生 snippets 跑通最小闭环。
真正容易被忽略的点是：模板的「可维护性」比「一次性生成速度」重要得多。一个写死路径的 snippet，半年后项目结构调整就废了；而一个带 ${TM_FILENAME_BASE} 变量的 snippet，能随文件名自动适配。别急着堆插件，先理清你要模板解决的是「结构复用」还是「内容填充」——前者靠 snippets，后者才轮到插件出手。
