每次换设备都需要重新配置开发环境,当然也可以登录vscode账户,直接同步配置,但很多情况…,所以在这里记录下,有需要的coder也可以参考下(此文章以windows为例,MAC不给配,没得用)
第一步:安装vscode,不说了
第二布:安装Vue VSCode Snippets(扩展里直接搜索安装就可以)
第三步:打开路径“C:\Users\用户\.vscode\extensions\sdras.vue-vscode-snippets-2.2.1\snippets”的vue.json文件,配置如下:
{
"Vue Single File Component": {
"prefix": "vbase",
"body": [
"<!--",
"author: username",
"createDate: ${CURRENT_YEAR}年${CURRENT_MONTH}月${CURRENT_DATE}日",
"description: ",
"-->",
"<template>",
"\t<div>",
"",
"\t</div>",
"</template>",
"",
"<script>",
"\texport default {",
"\t\tname: \"${TM_FILENAME_BASE}\",",
"\t\tcomponents: {},",
"\t\tfilters: {},",
"\t\tmixins: {},",
"\t\tprops: {},",
"\t\tdata() {",
"\t\treturn {",
"\t\t};",
"\t\t},",
"\t\tcomputed: {},",
"\t\twatch: {},",
"\t\tcreated() {},",
"\t\tmounted() {},",
"\t\tmethods: {},",
"\t}",
"</script>",
"",
"<style lang=\"scss\" scoped>",
"",
"</style>"
],
"description": "Base for Vue File with SCSS"
},
...
}
第四步:保存后一定记得重启vscode,否则不会生效
第五步:新建.vue文件,使用快捷命令vbase,over
PS:相关变量
vscode中可以使用以下变量
1)文档相关
变量 | 变量含义 |
---|---|
TM_SELECTED_TEXT | 当前选定的文本或空字符串 |
TM_CURRENT_LINE | 当前行的内容 |
TM_CURRENT_WORD | 光标下的单词内容或空字符串 |
TM_LINE_INDEX | 基于零索引的行号 |
TM_LINE_NUMBER | 基于单索引的行号 |
TM_FILENAME | 当前文档的文件名 |
TM_FILENAME_BASE | 当前文档没有扩展名的文件名 |
TM_DIRECTORY | 当前文档的目录 |
TM_FILEPATH | 当前文档的完整文件路径 |
CLIPBOARD | 剪贴板的内容 |
WORKSPACE_NAME | 已打开的工作空间或文件夹的名称 |
2) 当前日期和时间:
变量 | 变量含义 |
---|---|
CURRENT_YEAR | 当前年份 |
CURRENT_YEAR_SHORT | 当前年份的最后两位数 |
CURRENT_MONTH | 月份为两位数(例如’02’) |
CURRENT_MONTH_NAME 月份的全名(例如’June’) | (中文语言对应六月) |
CURRENT_MONTH_NAME_SHORT | 月份的简称(例如’Jun’)(中文语言对应是6月) |
CURRENT_DATE | 这个月的哪一天 |
CURRENT_DAY_NAME 当天是星期几 | (例如’星期一’) |
CURRENT_DAY_NAME_SHORT | 当天是星期几的简称(例如’Mon’)(中文对应周一) |
CURRENT_HOUR | 24小时时钟格式的当前小时 |
CURRENT_MINUTE | 当前分 |
CURRENT_SECOND | 当前秒 |
3)要插入行或块注释,请遵循当前语言:
变量 | 变量含义 |
---|---|
BLOCK_COMMENT_START | 输出:PHP /*或HTML格式<!– |
BLOCK_COMMENT_END | 输出:PHP */或HTML格式–> |
LINE_COMMENT | 输出:PHP //或HTML格式 |