VSCode添加vue3.2setup语法糖代码模板，用户片段，代码片段

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} 打开的工作区或文件夹的路径