vscode使用系列-----------Vue模板的使用与自定义

每次换设备都需要重新配置开发环境，当然也可以登录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格式