告别复制粘贴：动态模板生成小技巧-vscode

告别复制粘贴：动态模板生成小技巧-vscode

在日常开发中，我们需要不停的新建页面和组件。以 Vue+ts项目为例，我们在新建一个页面的时候，需要经历一遍又一遍重复的过程：

1、先新建一个文件夹
2、然后新建一个.vue文件，写上<template>、<script>、<style>
3、如果页面涉及多个组件，还要新建 component 文件夹，并重复以上两个步骤
4、最后才是我们的业务代码

假设新建一个页面，并复制粘贴模板代码需要 1 分钟的时间，一个项目如果有 60 个页面，就得花费 1 个小时写这种重复性高、无聊且枯燥的代码。这显然不是我们想看到的，下面给大家分享几个提效小技巧。
基于 Vscode 的 Snippets 自定义代码块
通过 Vscode 的 Snippets 我们可以自定义 Snippets ，从而实现快捷生成代码片段。
打开 Vscode ，依次点击文件——首选项——设置

Snippets 语法
prefix: 代码片段名字，即输入此名字就可以调用代码片段
body: 这个是代码段的主体.需要编写的代码放在这里　　　 
$1: 生成代码后光标的初始位置
$2: 生成代码后光标的第二个位置,按 tab 键可进行快速切换,还可以有 $3,$4,$5.....
${1,字符}: 生成代码后光标的初始位置（其中 1 表示光标开始的序号，字符表示生成代码后光标会直接选中字符）
description: 代码段描述,输入名字后编辑器显示的提示信息
tab键制表符:\t
换行: \r 或者\n

以 vue.json 为例：

{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	"Print to console": {
		"prefix":"vue",
		"body": [
			"<template>",
			"\t<div>test</div>",
			"</template>",
			"<script lang='ts'>",
			"\timport {Component, Vue} from 'vue-property-decorator'",
			"\t @Component({ ",
			"\t })",
			"\t export default class extends Vue {",
			"\t }",
			"</script>",
			"<style lang='less' scoped>",
			"</style>"
		],
		"description": "vue-template"
	}
}

在文件中输入 vue 页面展示为