vue3已成为vue项目的默认版本，近期vue3加入了setup语法糖，大大提高了编程效率，减少了代码量，使用VSCode的童鞋固然需要一个新的代码片段来快速生成vue页面。
话不多说，直接上步骤。
1.打开用户片段
文件->首选项->用户片段->搜索vue
2.进入vue.json
点击进入vue.json(vue)
3.修改vue.json
{
"vue3模板": {
"prefix": "vue",
"description": "vue3模板",
"body": [
"${BLOCK_COMMENT_START}",
" * ${1:new page}",
" * @author: ${2:zhaoyahui}",
" * @since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}",
" * ${TM_FILENAME}",
"${BLOCK_COMMENT_END}",
"<template>",
" <div class=\"container\"></div>",
"</template>",
"",
"<script setup lang=\"ts\"></script>",
"",
"<style scoped></style>",
""
]
}
}
4.测试
至此，我们已经完成了模板添加，现在试试吧。打开一个刚创建的vue文件，输入vue，系统自动提示刚才创建的模板，直接回车，完成。
5.拓展
${1:new page}， ${2:author}
生成代码后会按$后的数字顺序将光标依次移动到对应位置，按tab键向后切换，按shift+tab键向前切换，依次修改对应位置的内容，数字后面跟默认值，如果不修改任何内容的话，会将默认值填充到对应位置。
/"
模板中如果有引号，需要在前面加入/进行转义。
${BLOCK_COMMENT_START}、 ${BLOCK_COMMENT_END}
分别代表注释开始、注释结束。常用的还有：
${LINE_COMMENT} 单行注释，只在js文件中才生效
${CURRENT_YEAR}、 ${CURRENT_MONTH}、 ${CURRENT_DATE}
分别代表生成代码时的年、月、日。常用的还有：
${CURRENT_YEAR_SHORT} 当前年，后两位
${CURRENT_MONTH} 当前月，以两位数字表示
${CURRENT_MONTH_NAME} 当前月，全名（例如"七月"）
${CURRENT_MONTH_NAME_SHORT} 当前月，短名称（例如"Jul"）
${CURRENT_DATE} 当前日，以两位数字表示（例如"08"）
${CURRENT_DAY_NAME} 当前星期，名称（例如"星期一"）
${CURRENT_DAY_NAME_SHORT} 当前星期，短名称（例如"周一"）
${CURRENT_HOUR} 当前小时，以两位数表示
${CURRENT_MINUTE} 当前分钟，以两位数表示
${CURRENT_SECOND} 当前秒数，以两位数表示
${CURRENT_SECONDS_UNIX} 自 Unix 纪元以来的秒数
${TM_FILENAME}
代表当前文件名称。常用的还有：
${TM_SELECTED_TEXT} 当前选定的文本或空字符串
${TM_CURRENT_LINE} 当前行的内容
${TM_CURRENT_WORD} 光标下单词的内容或空字符串
${TM_LINE_INDEX} 基于零索引的行号
${TM_LINE_NUMBER} 基于一个索引的行号
${TM_FILENAME_BASE} 不带扩展名的当前文档的文件名
${TM_DIRECTORY} 当前文档的目录
${TM_FILEPATH} 当前文档的完整文件路径
${RELATIVE_FILEPATH} 当前文档的相对（相对于打开的工作空间或文件夹）文件路径
${CLIPBOARD} 剪贴板的内容
${WORKSPACE_NAME} 打开的工作区或文件夹的名称
${WORKSPACE_FOLDER} 打开的工作区或文件夹的路径