目录一、 打开 VSCode 设置二、 编写代码片段配置配置详解三、 实际效果演示四、 进阶定义更多变体一、 打开 VSCode 设置打开 VSCode。按下快捷键Ctrl Shift P(Windows/Linux) 或Cmd Shift P(Mac) 打开命令面板。输入snippets选择“配置用户代码片段”。在下拉列表中搜索并选择vue.json(如果之前没创建过可能会显示为 “新建代码片段文件”输入 vue 即可)。注意如果你安装了 Vetur 或 Vue - Official 插件VSCode 已经内置了一些片段但自定义片段能让你更灵活地控制生成的内容。二、 编写代码片段配置打开vue.json文件后你会发现里面只有注释。将以下 JSON 代码复制并粘贴进去覆盖原有内容或追加{ Print to console: { prefix: v3, //键入该值按tab快捷产生 body: [ template, div, $1, /div, /template, , script setup lang\ts\, $2, /script, , style scoped, $3, /style ], description: 生成 Vue3 TS Setup 标准模板 } }配置详解prefix(触发前缀): 这里我设置的是v3。这意味着在.vue文件中输入v3然后按Tab或Enter键即可触发代码生成。你可以改成vue3、vue或任何你喜欢的缩写。body(代码主体): 这是一个数组每一行代表生成代码的一行。\是转义字符用于输出双引号。$1,$2,$3是光标停留点。生成代码后光标会先停在$1处template 内部按 Tab 键会跳转到$2script 内部再按 Tab 跳转到$3style 内部。description: 对该片段的描述会显示在智能提示框中。三、 实际效果演示新建一个App.vue或Demo.vue文件。删掉所有内容。输入v3。此时 VSCode 会弹出智能提示按下Enter或Tab。瞬间生成如下代码四、 进阶定义更多变体如果你需要经常引入ref或reactive或者需要定义组件名称可以配置多个片段。例如在配置中加了一个带组件名称和常用 API 引入的版本{ Print to console: { prefix: v3ref, body: [ template, div, $1, /div, /template, , script setup lang\ts\, import { ref, reactive, onMounted } from vue, , $2, /script, , style scoped, $3, /style ], description: 生成 Vue3 模板并自动引入 ref/reactive } }这样当你输入v3ref时就会自动帮你把 Composition API 的常用方法引入好省去了手动写import的麻烦。 提示如果你使用的是 Vue 官方插件它可能已经内置了vue或vbase等快捷键。自定义片段的优势在于你可以根据团队规范定制专属的代码风格例如是否自带div是否默认开启scoped等。