一讲到写代码的效率问题，很多程序员同志们都会想到各种编辑器的插件，这些插件有的能帮你快速地规范代码格式，有些能自动补全闭合标签，还有的能智能提示文件路径等。
其实除了安装各种插件之外，有些编辑器（如vscode，sublime）内置了自定义代码片段功能，即snippet。
自定义snippet之后，可以通过输入简短的触发指令而生成完整的代码片段。如输入log即可生成console.log('')。
然而似乎很多程序员盆友们很少把这个功能用起来。下面以vscode编辑器为例，介绍snippet的玩法。
1.进入菜单 code--首选项--用户代码片段
菜单示意图
2.选择代码片段的语言，自定义的代码片段只会在选定的语言类型文件里生效
选择代码片段的语言
3.以vue代码片段语言为例，生成vue.json文件
示例说明
现在我们可以开始自定义我们常用的vue代码片段了，如：
"Vue template": {
"prefix": "vue",
"body": [
"<template>\n\t<div>\n\t\t$1\n\t</div>\n</template>\n<script>\nexport default {\n\t\n}\n</script>\n<style lang=\"less\" scoped>\n\n</style>",
],
"description": "Log output vue template"
}
现在我们新建一个test.vue文件，输入vue再回车即可生成vue代码模板
生成的vue代码模板
很方便对吧！简直是“write less，code more”有木有！
4.配置优化
vscode默认的配置是，用户输入指定的prefix字段，然后根据编辑器提示选择并回车生成代码片段，但是有时候编辑器的弹窗提示存在一定的延迟。
image.png
优化建议：进入菜单 code--首选项--设置，添加配置"editor.tabCompletion": true，这样我们就可以在输入prefix字段后按Tab键快速生成代码片段啦～
