vsCode 代码片段设置

不墨迹代码片段干啥用的大家肯定都知道，直接上教程

一、打开设置文件

二、代码设置

先上代码直接复制(Vue2.0)

	"Print to console": {
		"prefix": "vue",
		"body": [
				"<template>",
				"  <div class=\"$TM_FILENAME_BASE\">",
				"    $1",
				"  </div>",
				"</template>",
				"",
				"<script>",
				"export default {",
				"  data() {",
				"    return {",
				"    }",
				"  },",
				"  created(){",
				"  },",
				"  mounted(){",
				"  },",
				"  computed:{",
				"  },",
				"  methods:{",
				"  },",
				"}",
				"</script>",
				"",
				"<style lang=\"stylus\" scoped> ",
				"",
				"</style>",
		],
		"description": "Log output to console"
	}

再来个Vue3.0的

"Vue3-custom": {
		"prefix": "vue3",
		"body": [
				"<template>",
				"  <div class=\"$TM_FILENAME_BASE\">",
				"    $1",
				"  </div>",
				"</template>",
				"",
				"<script setup lang=\"ts\">",
				"import { getCurrentInstance, ref, reactive, computed, onMounted, watch, watchEffect, provide, inject } from 'vue'",
				"",
				"</script>",
				"",
				"<style lang=\"scss\" scoped> ",
				"",
				"</style>",
		],
		"description": "自定义vue3模板"
	}

三、常用变量

3.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 当前文档的完整文件路径
• RELATIVE_FILEPATH 当前文档的相对（相对于打开的工作区或文件夹）文件路径
• CLIPBOARD 剪贴板的内容
• WORKSPACE_NAME 打开的工作区或文件夹的名称
• WORKSPACE_FOLDER 打开的工作区或文件夹的路径

3.2、 日期和时间相关：

• CURRENT_YEAR 本年度
• CURRENT_YEAR_SHORT 当前年份的最后两位数字
• CURRENT_MONTH 月份为两位数（例如“02”）
• CURRENT_MONTH_NAME 月份的全名（例如“七月”）
• CURRENT_MONTH_NAME_SHORT 月份的简称（例如“Jul”）
• CURRENT_DATE 一个月中的哪一天
• CURRENT_DAY_NAME 日期名称（例如“星期一”）
• CURRENT_DAY_NAME_SHORT 一天的简称（例如“星期一”）
• CURRENT_HOUR 24 小时制的当前小时
• CURRENT_MINUTE 当前分钟
• CURRENT_SECOND 当前秒
• CURRENT_SECONDS_UNIX 自 Unix 纪元以来的秒数

3.3、插入随机值：

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

3.4、 插入注释相关：

• BLOCK_COMMENT_START示例输出：PHP/*或 HTML<！--
• BLOCK_COMMENT_END示例输出：PHP*/或 HTML -->
• LINE_COMMENT 示例输出：在 PHP 中 //

四、使用方式

输入vue直接回车

五、使用效果

自定义的Vue3.0模板

六、点个关注、留个言再走