可通过 VS Code 用户代码片段自定义 Vue 文件模板，配置 scope 为 "vue" 并设置 prefix 为 "vue"，输入后按 Tab 即展开含 template/script setup/style scoped 的标准结构。
Vue 文件模板在 VS Code 里怎么自定义
VS Code 本身不内置 Vue 模板，但可以通过用户代码片段（User Snippets）快速生成标准 .vue 结构。这不是装插件就能一键创建文件的事，得手动配 snippet，否则每次新建都得手敲 <template>、<script>、<style> 三块。
常见错误现象：
– 新建 .vue 文件后空着，复制粘贴旧文件结构
– 装了 Volar 或 Vue Language Features 插件，误以为它会自动提供文件模板
– 在用户片段里写错 scope，导致按 tab 不触发
- 打开命令面板（
Ctrl+Shift+P/Cmd+Shift+P），搜 “Preferences: Configure User Snippets” - 选 “New Global Snippets file”，起名比如
vue-template.code-snippets - 填入以下内容（注意
scope必须是vue，不是html或javascript）：
{
"Vue SFC Template": {
"scope": "vue",
"prefix": "vue",
"body": [
"<template>",
" <div>$1</div>",
"</template>",
"",
"<script setup>",
"$2",
"</script>",
"",
"<style scoped>",
"$3",
"</style>"
],
"description": "Basic Vue 3 script setup template"
}
}
配完重启或重载窗口，新建 xxx.vue 文件，输入 vue 再按 Tab 就能展开。别漏掉 "scope": "vue" —— 这是唯一决定“能不能触发”的字段，Volar 插件启用后才真正识别该 scope。
为什么不用插件直接生成 .vue 文件
有插件（如 “Vue File Snippets”）声称“右键新建 Vue 文件”，但实际只是调用 VS Code 原生的新建文件逻辑 + 预填内容，底层仍依赖 snippet 机制。而且这类插件常年不更新，容易和 Volar 冲突，甚至把 <script lang="ts"> 硬编码进去，而你项目用的是 JS。
立即学习“前端免费学习笔记（深入）”；
使用场景差异：
– 脚手架项目（Vite / Vue CLI）里，npm create vue@latest 生成的是完整工程，不是单个文件模板
– 你只是想在已有项目里快速加一个组件文件，此时 snippet 是最轻、最可控的方式
- 插件生成的文件往往忽略
setup语法或scoped属性，还得手动删改 - 多人协作时，插件配置不进 Git，而用户 snippet 可导出为 JSON 共享
- Volar 0.47+ 版本已明确建议用 snippet 替代插件模板功能
script setup 模板里要不要写 export default
不用。用了反而报错：Component is missing template or render function。因为 <script setup> 是编译时语法糖，顶层声明的变量/函数会自动暴露，不需要 export default。
参数差异：
– 如果你用的是 Options API（<script> export default { ... }），那必须写 export default
– 但当前主流脚手架默认开 setup，snippet 也应匹配这一事实
- 写了
export default会导致组件无法被正确识别，Volar 报红，HMR 也可能失效 - 需要 defineProps / defineEmits？在
<script setup>块里直接调用，不要包在对象里 - 如果项目还混用 Options，建议分两个 snippet：一个叫
vue-setup，一个叫vue-options
样式块里 scoped 和 module 怎么选
日常开发优先用 scoped。它通过属性选择器实现样式隔离，兼容性好、调试直观；module（即 <style module>）需额外配置构建工具支持，且类名哈希后难以肉眼定位。
性能影响：
– scoped 编译后增加属性选择器（如 data-v-f3f3eg9），对超大列表可能有微弱渲染开销，但几乎感知不到
– module 会生成额外的 CSS Modules 对象映射，JS 包体积略增
- VS Code snippet 里写
<style scoped>是安全的默认值 - 如果项目强制用 CSS Modules，把
scoped换成module即可，但记得在<template>里用:class="$style.xxx" - 别同时写
scoped module—— Vue 不认，会当作普通 style 处理
最常被忽略的一点：snippet 的 prefix 是触发关键词，但它不能包含点号（.），所以别设成 .vue；另外，如果你用的是 Prettier + Volar 组合，首次保存时可能自动格式化缩进，确保你的 snippet 每行开头没多余空格，否则格式化后结构错乱。
