★ FEATURED ARTICLE 每次新建一个 Vue 组件你有多少时间是花在复制样板代码上的我指的还不是业务逻辑就是最基础的 template 外壳、script 里的 export default、style 标签这三件套。以前我新建一个 .vue 文件第一件事就是找到项目里某个旧组件复制粘贴再删掉旧业务逻辑改类名清空 data 和 methods。这套动作我重复了上百次终于烦了——与其每次都找旧文件碰运气不如让 VsCode 直接把组件骨架子吐出来。这篇笔记记录了我用 VsCode 用户代码片段快速生成 vue 组件模板的完整过程从原理、配置步骤到踩坑点都写在下面适合刚接触 Vue 的初学者也适合觉得“复制旧组件”太别扭的老手参考。1. 为什么需要一套自动生成的组件骨架1.1 手动复制模板的真正成本很多人觉得复制旧组件很快但其实这里面藏着不少隐性成本。打开一个旧文件当模板首先你要在旧代码里辨别哪些是通用结构、哪些是业务逻辑删起来要小心翼翼一不小心就残留一段根本用不上的方法。更麻烦的是复制来的组件名、class 名、style 语言声明都不一定符合新文件的需求改漏一个就是事故。我大概估算过每天新建五六个组件的话每次复制清理要花一两分钟一年下来就是几十个小时。这些时间本来可以花在业务逻辑上却消耗在无意义的找文件和删改上。而且这种重复动作会让你的注意力频繁中断写代码的连续状态被打断重新进入状态又要好几分钟这才是最不起眼但最伤效率的部分。1.2 一套模板能覆盖哪些组件场景用户代码片段能覆盖的场景其实比大多数人想的多。最基本的当然是空组件骨架也就是 template、script、style 三件套。往上可以扩展成带 props 和 emits 的交互组件、带路由信息的页面级组件、API 请求模块、状态管理模块甚至是文件头注释和测试文件。场景模板要点基础组件template、script、style 三件套 name 字段页面级组件额外的路由注释、统一布局类名交互组件props、emits、ref、computed 的预置代码API 模块请求函数封装、错误处理骨架文件头作者、日期、描述注释1.3 这方法适合谁、不适合谁如果你是刚学 Vue 的新人模板的价值特别大。它能帮你避开“记不住选项式 API 结构”的尴尬每次生成的骨架都是标准结构你只需要往里面填业务代码慢慢就会形成肌肉记忆。老手同样受益尤其是写内部工具页面、临时 demo、快速原型的时候不再需要到处找旧组件。不过我要泼一盆冷水如果你们是超大型团队有统一的脚手架和代码生成器那用户代码片段不是第一选择团队应该有更标准的 generator 或者项目级 template。这种场景下自己造模板反而容易跟团队规范脱节。2. 用户代码片段是怎么工作的原理拆解2.1 代码片段是一个写满规则的特殊 JSONVsCode 的用户代码片段本质就是一个 JSON 文件。每个片段在这个 JSON 里是一个对象对象的 body 字段是一个字符串数组数组里的每一行会对应生成代码里的每一行。我举个例子body 写成body: [ template, div, /div, /template ]触发之后编辑器会原样插入这四行。注意这里的缩进是写死在字符串里的所以排版能不能对齐取决于你配置时有没有用心。理解了这一点后面所有配置都会变得很简单。2.2 prefix、body、description三个字段决定了整个使用体验一个代码片段最核心的字段就三个。prefix 是触发词。你在编辑器里输入这几个字母智能提示里就会出现这个片段。description 是描述文字当多个片段前缀相近时靠它来区分到底是哪一个。body 就是实际插入的代码内容。我做模板时的习惯是prefix 全部小写不带特殊符号比如 vue2-base、vue3-setup。因为大写字母和符号会降低输入速度而触发词本身就是要打快一点才舒服。description 可以写得明确一点比如“Create a Vue3 composition API component”这样提示列表里一眼就能认出来。提示三个字段里最容易出错的是 body。它必须是一个数组数组里每个元素是一行代码行与行之间用逗号分隔最后一行不要写逗号。2.3 Tab 键跳转与占位符生成的模板为什么能“自动走位”模板触发生成只是第一步真正让它好用的是占位符机制。body 里的$1、$2、$3是光标停止点触发后光标先停在$1的位置按一下 Tab 跳到$2再按跳到$3顺序完全由你控制。如果你写的是${1:name}生成的文本里会自带默认值 name光标选中它直接输入就会替换掉。还有一个很多人不知道的技巧同一个占位符编号在模板里出现多次编辑时会同步修改。比如body: [ div class\$1\, $1, /div ]触发后你输入 cn-editor两处 $1 会同时变成 cn-editor。这个特性在做组件名、class 名、导入路径统一修改的时候特别有用。3. 完整配置步骤从零开始生成 Vue 组件模板3.1 打开用户代码片段配置入口配置入口有两个任选一个都行。第一种点 VsCode 左下角的齿轮图标弹出的菜单里找“用户代码片段”User Snippets。第二种更快按 CtrlShiftPmacOS 是 CmdShiftP打开命令面板输入 snippets下拉列表里会出现“配置用户代码片段”Preferences: Configure User Snippets回车。此时会弹出一个列表这个列表就是关键的第一道选择新建全局代码片段文件新建 Vue 的代码片段文件新建 JavaScript 的代码片段文件其他已有的片段文件我建议选“新建 Vue 的代码片段文件”因为 Vue 模板只应该出现在 .vue 文件里没必要让它在 JavaScript 文件里刷存在感。如果你的列表里找不到 Vue说明本机还没装 Vue 语言支持插件可以先选全局后面我会说怎么补救。3.2 新建 Vue 语言片段文件并写入 Vue2 模板选择新建 Vue 片段之后VsCode 会问你文件名叫什么我习惯直接叫 vue。它会创建一个 vue.code-snippets 文件里面有一段默认注释和示例全部删掉粘贴下面这段{ Vue2 Component: { prefix: vue2-base, body: [ template, div class\$1\, $2, /div, /template, , script, export default {, name: $TM_FILENAME_BASE,, data() {, return {, $3, };, },, computed: {},, watch: {},, methods: {, $4, },, created() {, $5, },, mounted() {, $6, }, };, /script, , style lang\scss\ scoped, $7, /style ], description: Create a Vue2 options API component } }这里特别提醒一下转义问题。body 里凡是代码本身要用到双引号的地方前面必须加反斜杠比如class\$1\、name\Vue2\因为整个 body 字符串本身就是用双引号包裹的。如果漏了转义JSON 解析就会报错这也是新手配置片段时最常犯的错误。3.3 在真实文件中触发代码片段配置文件保存好之后新建一个 .vue 文件比如 UserCard.vue输入 vue2-base智能提示就会跳出来。回车或者按 Tab整个组件骨架就插入进来了。你会看到光标停在第一个占位符的位置也就是 div 的 class 属性里。直接输入类名按 Tab跳到 data 的 return 对象里再按 Tab跳到 methods 的位置。整条链路非常顺不再需要逐个删除旧代码。还有一种触发方式如果开了 editor.tabCompletion 设置输入 w、v、u 这类前缀的前几个字符后直接按 Tab也会补齐成完整的 prefix 再触发。这个设置我后面会讲到。3.4 追加 Vue3 组合式 API 模板现在新项目基本都是组合式 API 了所以同一个 vue.code-snippets 文件里可以再放第二个片段用逗号和前面的对象隔开。我用的 Vue3 模板长这样{ Vue3 Setup Component: { prefix: vue3-setup, body: [ template, div class\$1\, slot /, $2, /div, /template, , script setup, import { ref, computed, onMounted, onBeforeUnmount } from vue;, , const props defineProps({, $3, });, , const emit defineEmits([$4]);, , const $5 ref(null);, , const $6 computed(() $7);, , onMounted(() {, $8, });, , onBeforeUnmount(() {, $9, });, /script, , style lang\scss\ scoped, $10, /style ], description: Create a Vue3 composition API component } }这个模板把 props、emits、ref、computed、生命周期钩子都预置好了。触发之后占位符顺序刚好对应从模板到逻辑的书写习惯Tab 按过去依次填 class 名、插槽内容、props、emits、ref 变量名、computed 返回值、两个生命周期钩子。3.5 文件头信息模板除了组件骨架我强烈建议再加一个文件头注释片段。团队协作时文件头写作者和日期是非常实用的信息但每次手敲很烦用片段一次搞定{ File Header: { prefix: header, body: [ /**, * author $1, * date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE, * description $2, */ ], description: Insert a custom file header comment } }这里用到了两个内置变量$CURRENT_YEAR、$CURRENT_MONTH、$CURRENT_DATE 会自动填充当前日期不用你手动去翻日历。触发后光标先停在作者位置填完按 Tab 跳去写描述整个过程三十秒内完成。4. 把模板调到顺手为止变量、多前缀与团队共享4.1 用内置变量让组件名、日期、作者自动填入VsCode 的代码片段内置了不少变量合理使用可以让模板从“半自动”变成“全自动”。先看一张我常用的变量表变量名插入结果$TM_FILENAME_BASE当前文件名去掉扩展名例如 UserCard.vue 得到 UserCard$TM_FILENAME当前文件的完整文件名$CURRENT_YEAR当前年份四位数字$CURRENT_MONTH当前月份两位数$CURRENT_DATE当前日期两位数$CLIPBOARD当前剪贴板内容$WORKSPACE_NAME当前工作区文件夹名我前面给出的 Vue2 模板里已经用了一个很关键的变量name: $TM_FILENAME_BASE。新建一个 UserCard.vue触发 vue2-base组件 name 字段会自动变成 UserCard不需要手动输入。这个变量也可以用在导语句里比如import $TM_FILENAME_BASE from ./$TM_FILENAME_BASE.vue。注意$TM_FILENAME_BASE 读的是当前文件的文件名。文件还没保存的时候这个变量是拿不到的。所以最稳的习惯是先 CtrlS 保存文件再触发代码片段。4.2 前缀设计组件、页面、API、store 四类前缀同一个 code-snippets 文件里可以塞很多个片段关键是 prefix 要起得清晰。我自己维护了这么一套前缀前缀使用场景说明vue2-baseVue2 选项式组件老项目主力模板vue3-setupVue3 组合式组件新项目主力模板vpage页面级组件带路由跳转注释和统一布局vapiAPI 请求模块每个接口一个请求函数vstore状态管理模块Pinia/Vuex 模块骨架前缀的统一规则很简单小写场景缩写必要时带版本号。这样输入记忆成本最低也几乎不会跟第三方插件的 prefix 冲突。vapi 这类模板用的频率很高我会把 axios 封装、错误处理、loading 状态全部预置进去新建一个请求文件直接开写接口地址。4.3 全局、语言、项目级片段怎么选VsCode 的代码片段文件分三类作用范围完全不同类型存放位置生效范围适用场景全局代码片段用户目录下的 snippets 文件夹所有项目、所有语言个人通用指令语言代码片段语言名.code-snippets所有项目的该语言文件Vue 模板这种专用配置项目级代码片段项目根目录的 .vscode 文件夹当前项目团队规范我前面步骤里创建的是 Vue 语言代码片段所以只在 .vue 文件里生效这是最合理的范围。如果你创建 Vue 片段时找不到 Vue 选项先建了全局片段记得在 JSON 里补一行scope: vue否则所有语言都会提示这个片段会非常烦。4.4 把模板同步给团队代码片段文件本质上是纯文本天然适合团队共享。你可以把 vue.code-snippets 文件直接放进项目根目录的 .vscode 文件夹里团队成员拉代码的时候就会自动带上这套模板新成员一进来就能跟整个团队的组件风格保持一致。不过有几点要跟团队约法三章。第一后缀和命名规范要提前商量好否则每个人都会往文件里加自己的私货时间长了会臭掉。第二项目级片段会影响所有人前缀冲突会直接导致某个人输入出来的东西不对。第三如果团队里有人用别的编辑器这套方案对他无效那就需要大家统一工具链。4.5 要不要安装代码片段插件市面上有不少 Vue 相关的代码片段插件装完之后确实能覆盖很多场景。我的看法是可以参考但不要完全依赖。插件的问题在于主动权不在你手里。它的前缀规则是别人定的更新节奏是别人控制的而且插件里往往塞了一大批你用不上的片段。相比之下自己维护二十几行 JSON可以精确控制组件结构、命名习惯、注释规范所有东西都符合你当前项目的口味。所以我现在的习惯是先用自己写的片段遇到实在需要复杂模板的场景再去插件里搜一下有没有现成可抄的。5. 模板不生效的排查清单与高频报错5.1 片段文件没保存或窗口停留在旧状态这是我自己踩过最多次的坑。修改完 vue.code-snippets 之后忘了按 CtrlS 就直接切回 .vue 文件输入前缀当然不会触发。保存之后如果还是不生效大概率是编辑器缓存了旧的片段配置这时候执行命令面板里的“开发人员重新加载窗口”Developer: Reload Window让编辑器重新扫描所有片段文件。提示修改代码片段后先保存再重载窗口通常就能解决 90% 的“不生效”问题。5.2 JSON 语法错误逗号、双引号、转义符代码片段不触发第二常见的原因就是 JSON 写错了。VsCode 本身会对 .code-snippets 文件做语法校验如果文件有错你会看到红色的波浪线但很多人根本没注意到。最容易出错的位置有三个。一个是 body 数组的元素之间忘写逗号或者最后一个元素后面多写了逗号。一个是代码里的双引号没有转义直接写成class$1内部引号会提前结束字符串。还有一个是中文输入法导致的坑——全角逗号、全角双引号混进 JSON 里报错信息看着都莫名其妙。我的排查方法是写完配置后先把鼠标放在 JSON 的报错位置看提示直接跳到对应行。如果文件看起来没问题但就是不触发就把整个文件复制出来粘贴到任意一个在线 JSON 校验工具里查一遍基本都能找到问题。5.3 文件语言识别不对片段根本没有触发环境这个坑很隐蔽尤其是刚配置完 VsCode 的新手。新建一个 index.vue 文件右下角状态栏会显示当前文件的语言模式。如果你没装 Vue 语言支持插件这个文件可能被识别成纯文本甚至 HTML而 Vue 语言片段只会在语言模式为 vue 的文件里生效。解决办法有两个。第一个是安装 Vue 官方的语言支持插件装完 .vue 文件自动识别为 vue。第二个是临时手动改点右下角的语言模式输入 vue 并选择但每次新建文件都要改很麻烦还是建议装插件。还有一种情况是你在全局片段里写了 scope: vue但文件语言没识别对同样触发不了先看右下角再改语言模式基本都能解决。5.4 前缀冲突被其他片段抢先匹配输入前缀的时候智能提示列表里可能同时出现好几个相似选项。如果你输入 vue2-base但某个插件正好也有一个前缀叫 vue2 的片段回车选错就可能插入完全不同的代码。我的应对方式是前缀做长一点、个人化一点。比如 vue2-base 改成 v2com、vue3-setup 改成 v3sfc撞车概率会小很多。输入的时候也尽量不要只看第一个选项就回车先瞄一眼 description确认是自己要的片段。如果你装了太多插件片段列表会很长这时候把常用的片段放到项目级 .vscode 目录里干扰项会少很多。5.5 占位符跳转失灵Tab 键配置和镜像编辑模板触发成功代码也插进来了但按 Tab 不跳转这是另一个高频问题。先检查设置项 editor.tabCompletion它决定输入前缀首字符时按 Tab 会不会自动补全触发。把它的值设为 onTab 触发体验会顺滑很多。然后是占位符写法问题$1和${1}是两码事后者需要带大括号时才能正确识别。如果你在占位符里写了特殊的变量符号比如$、}最好用${1:默认值}的完整写法包裹一下。镜像编辑不同步的问题多数是因为占位符编号没有完全一致要么一个写成了$1另一个写成了${1}编辑器会当成两个不同的停止点。统一写法之后镜像同步就正常了。6. 我的个人配置一套提速组合拳6.1 核心三件套组件骨架、props 片段、路由注册除了前面的 Vue2 和 Vue3 组件模板我还配了两个使用频率极高的片段跟组件模板配合起来整个开发流是一气呵成的。第一个是 props 定义片段用于在 script setup 里快速生成通用 props{ Props Definition: { prefix: props-def, body: [ const props defineProps({, $1: {, type: $2,, required: $3,, default: $4, }, });, ], description: Define props quickly in script setup } }第二个是路由注册片段用在路由配置文件里插入一条新路由{ Route Record: { prefix: route-add, body: [ {, path: /$1,, name: $2,, component: () import(/views/$1/$2.vue), },, ], description: Add a route record with lazy loading } }组合起来的工作流是这样的新建一个 UserList.vue输入 vue3-setup回车组件骨架生成在 props 位置输入 props-def快速定义组件参数最后打开路由文件输入 route-add插入一条懒加载路由路径和组件名自动带好。这三个动作做完一个新页面的基础框架就立好了全程不超过两分钟。6.2 从“敲代码”到“写业务”的转变真正提升效率的时刻其实不是按下回车生成模板的那一秒而是你不再需要把注意力切换到“找旧组件、删业务逻辑、改类名”这些无意义操作上。反复复制粘贴的坏处不只是费时间更糟糕的是它会打断思路让你一直处于“处理模板”的状态里而不是“写业务”的状态。我还有一个很小但很有用的习惯把模板文件和自己的命名规范写在一起。比如模板里 class 用下划线风格文件名用 PascalCase接口请求统一走 api 模块这些规则没人提醒就会慢慢跑偏但模板本身会强制你用统一的结构。半年之后再回看这些模板你会感谢当时认真写 JSON 的自己。最后再分享一个小技巧调试模板的时候单独建一个 scratch.vue 文件触发模板之后不要急着删把它当草稿纸用把每一步 Tab 顺序走一遍确认占位符都符合直觉再回到正式项目里用。模板这东西顺手比炫技更重要调好之后是真的能省下大把时间的。
阅读完成 · 觉得有帮助？
