一讲到写代码的效率问题,很多程序员同志们都会想到各种编辑器的插件,这些插件有的能帮你快速地规范代码格式,有些能自动补全闭合标签,还有的能智能提示文件路径等。
其实除了安装各种插件之外,有些编辑器(如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代码模板

很方便对吧!简直是“write less,code more”有木有!
4.配置优化
vscode默认的配置是,用户输入指定的prefix
字段,然后根据编辑器提示选择并回车生成代码片段,但是有时候编辑器的弹窗提示存在一定的延迟。

优化建议:进入菜单 code--首选项--设置,添加配置"editor.tabCompletion": true
,这样我们就可以在输入prefix
字段后按Tab键快速生成代码片段啦~
网友评论