告别复制粘贴:动态模板生成小技巧-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 页面展示为