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

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

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

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

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

上一篇:视区单位vw, vh简介以及可实际应用场景


下一篇:tensorflow lite c++