定义vue2和vue3快捷模板(定义代码片段)

Mrsong
298 阅读2分钟

vue快捷模板

vscode中定义 vue2 、 vue3 快捷模板

其他快捷键推荐

https://baijiahao.baidu.com/s?id=1768289710693059935&wfr=spider&for=pc

配置模板步骤

11.png

12.png

vue3模板

创建.vue文件后输入 vue3vscode即可出现提示、输出成功后光标会自动到name值上 需要添加name名

13.png

	"Print to v3": {
		"scope": "vue", //指定文件类型，只有.vue文件可以触发
		"prefix": "vue3",
		"body": [
		   "<template>",
			  "<div class=\"container\">",
			  "$2",
              "</div>",
			"</template>",
			"",
			"<script lang=\"ts\" name=\"$1\" setup>",
			  "import { } from 'vue'",
			  "import { } from 'vue-router'",
			  "$3",
			"</script>",
			"",
			"<style lang=\"scss\" scoped>",
			"$4",
			"</style>"
		],
		"description": "vue3"
	},

vue2模板

"Print to v2": {
		"scope": "vue", //指定文件类型，只有.vue文件可以触发
		"prefix": "vue2",
		"body": [
			"<template>",
			    "  <div class=\"${TM_FILENAME_BASE}\">\n",
			    "  </div>",
			"</template>",
			"<script>",
			"export default {",
				"  name: '$TM_FILENAME_BASE'",  //默认文件名称
				"  data () {",
				"    return {",
				"    }",
				"  },",
				"  methods: {",
				"  },",
				"  created () {",
				"  },",
				"  mounted () {",
				"  },",
			"}",
			"</script>",
			"<style lang=\

配置代码片断属性值

1. 1,1,2……$0

1,1,2……0，这是你代码快捷生成之后鼠标光标的所在位置，光标会首先定位在0，这是你代码快捷生成之后鼠标光标的所在位置，光标会首先定位在1,按Tab键切换到2的位置，以此类推，光标最后会定位在2的位置，以此类推，光标最后会定位在0的位置。

2. 占位符

占位符: 是带有值的制表符 如 .将插入并选择占位符文本，以便可以轻松更改。 说白了占位符1:foo就是在{1:foo}就是在1的基础上，光标跳到1位置的同时会自动生成并选中foo，同样按Tab键切换到1位置的同时会自动生成并选中foo，同样按Tab键切换到2的位置。 占位符可以嵌套，如 。1:foo{1:foo}{1:another ${2:placeholder}}

3. 选择

占位符可以作为有选择的值。 语法是以逗号分隔的值的枚举，用竖线字符括起来， 例如 。插入代码段并选择占位符时，选项将提示用户选取其中一个值。${1|one,two,three|}

4. 变量

插入变量的值。如果未设置变量，则插入其默认值或空字符串。当变量未知（即未定义其名称）时，将插入变量的名称并将其转换为占位符。namename{name:default}可以使用以下变量：

  • TM_SELECTED_TEXT当前选定的文本或空字符串
  • TM_CURRENT_LINE当前行的内容
  • TM_CURRENT_WORD光标下单词的内容或空字符串
  • TM_LINE_INDEX基于零索引的行号
  • TM_LINE_NUMBER基于一个索引的行号
  • TM_FILENAME当前文档的文件名
  • TM_FILENAME_BASE不带扩展名的当前文档的文件名 （比如这里你在用户代码片段中写了${TM_FILENAME_BASE}，在自动生成的代码里就会在这个位置自动填充上你的文件的不含扩展名的文件名）
  • TM_DIRECTORY当前文档的目录
  • TM_FILEPATH当前文档的完整文件路径
  • RELATIVE_FILEPATH当前文档的相对（相对于打开的工作空间或文件夹）文件路径
  • CLIPBOARD剪贴板的内容
  • WORKSPACE_NAME打开的工作区或文件夹的名称
  • WORKSPACE_FOLDER打开的工作区或文件夹的路径

要插入当前日期和时间：

  • CURRENT_YEAR本年度
  • CURRENT_YEAR_SHORT本年度的最后两位数
  • CURRENT_MONTH以两位数字表示的月份（例如"02"）
  • CURRENT_MONTH_NAME月份的全名（例如"七月"）
  • CURRENT_MONTH_NAME_SHORT月份的短名称（例如"Jul"）
  • CURRENT_DATE以两位数字表示的月份中的某一天（例如"08"）
  • CURRENT_DAY_NAME日期的名称（例如"星期一"）
  • CURRENT_DAY_NAME_SHORT日期的短名称（例如"星期一"）
  • CURRENT_HOUR24 小时制格式的当前小时
  • CURRENT_MINUTE当前分钟为两位数
  • CURRENT_SECOND当前第二位为两位数
  • CURRENT_SECONDS_UNIX自 Unix 纪元以来的秒数

对于插入随机值：

  • RANDOM 6个随机的 Base-10 数字
  • RANDOM_HEX 6个随机的 16 位基本数字
  • UUIDA 版本 4 UUID

推荐文档：zhuanlan.zhihu.com/p/475137755…

avatar
文章
阅读
粉丝