提升你的coding效率之snippet大法

一讲到写代码的效率问题，很多程序员同志们都会想到各种编辑器的插件，这些插件有的能帮你快速地规范代码格式，有些能自动补全闭合标签，还有的能智能提示文件路径等。

其实除了安装各种插件之外，有些编辑器（如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键快速生成代码片段啦～