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

vue3已成为vue项目的默认版本,近期vue3加入了setup语法糖,大大提高了编程效率,减少了代码量,使用VSCode的童鞋固然需要一个新的代码片段来快速生成vue页面。

话不多说,直接上步骤。

1.打开用户片段

文件->首选项->用户片段->搜索vue
VSCode添加vue3.2setup语法糖代码模板,用户片段,代码片段_第1张图片
VSCode添加vue3.2setup语法糖代码模板,用户片段,代码片段_第2张图片

2.进入vue.json

点击进入vue.json(vue)
VSCode添加vue3.2setup语法糖代码模板,用户片段,代码片段_第3张图片

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}",
      "",
      "",
      "",
      "",
      "",
      ""
    ]
  }
}

4.测试

至此,我们已经完成了模板添加,现在试试吧。打开一个刚创建的vue文件,输入vue,系统自动提示刚才创建的模板,直接回车,完成。
VSCode添加vue3.2setup语法糖代码模板,用户片段,代码片段_第4张图片
VSCode添加vue3.2setup语法糖代码模板,用户片段,代码片段_第5张图片

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

你可能感兴趣的:(前端,javascript,前端)