vscode创建代码片段（模板）

场景：创建新页面时要手动敲一些固定的标签或者代码，类似下面这种

<template>
    <div></div>
</template>

<script lang='ts'>
</script>

<style lang='scss' scoped>
</style>

有时候怕自己记忆出问题敲错单词，一般都是复制粘贴，然后删除没有用的代码，再开始新页面内容的编辑，创建新页面的过程不够高级，于是找了一下有没有更简单的方案，上解决方案

code snippet 代码片段

vscode创建方式：文件 ==> 首选项 ==> 配置用户代码片段

新建全局代码片段文件

新建的文件里有相关介绍，不罗嗦啦，直接总结

Print to console

key	含义	是否必须
prefix	触发关键词	是
body	模板内容	是
description	描述	否

创建一个vue模板

"Print to console": {
			"prefix": "vue2",
			"body": [
				"<template>",
				"\t<div>$0</div>",
				"</template>",
				""
				"<script>",
				"export default {"
				"\tcomponents: {},",
				"\tdata() {"
				"\t\treturn {\n"
				"\t\t}",
				"\t},",
				"\tmethods: {\n",
				"\t}",
				"}"
				"</script>",
				""
				"<style lang='scss' scoped>",
				"</style>",
			],
			"description": "vue2模板"
		}

创建完成后保存，新建一个XXX.vue文件

回车就直接生成啦

其实插件库中也有相关的插件，例如

如果代码块不复杂，可以直接插件解决，但是如果自己定制一个代码块，例如管理后台开发时的增删改查页面，大多数都是form+table，直接一个模板丢进去，然后就可以专注JS处理啦

补充一个占位符

key	含义
$0	鼠标光标停留位置
\t	一个tab
\n	换行