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

缺乏、安全感 2022-12-25 03:51 195阅读 0赞

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

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

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

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

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 页面展示为  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020113013542123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw==,size_16,color_FFFFFF,t_70
[20201130135426726.png]: /images/20221120/f783dfa67e5545eda267a06d05023ca2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70 1]: /images/20221120/272d52cdf3c24d33a51079b4e193cc63.png