vue的模版写法虽然结构很清晰，可读性强，但是相应的内容也比较多

每新建一个页面就得CV编辑

通过vscode配置模版片段，可以快速生成代码片段，nice~

打开配置文件

工具栏【文件】 ----> 【首选项】 ----> 【配置用户代码片段】 ----> 输入选择【vue】 ---- > 打开【vue.json】

编辑配置文件

这是原始vue.json文件的结构

{
 // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
 // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
 // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
 // same ids are connected.
 // Example:
 // "Print to console": {
 //  "prefix": "log",
 //  "body": [
 //   "console.log('$1');",
 //   "$2"
 //  ],
 //  "description": "Log output to console"
 // }
}

改造下， 那下面片段添加至结尾处，

• prefix是快捷指令
• body里面根据自己需求进行编写模版

 "Print to vue3": {
  "prefix": "vv3",
  "body": [
   "<template>",
   "</template>",
   "<script lang=\"ts\">",
   "import {ref, reactive} from 'vue'",
   "export default {",
   "\tsetup() {",
   "\t\treturn {}",
   "\t}",
   "}",
   "</script>"
  ],
  "description": "template for vue3"
 }

验证配置

新建文件输入vv3，能生成配置的代码片段就代表生效。

搞定！需要其他模版的，在这里自行新增及编辑就👌了，比如原文件中Example下是console.log的配置，去掉注释就能使用。