美文网首页程序员
提升你的coding效率之snippet大法

提升你的coding效率之snippet大法

作者: 佳勋学长 | 来源:发表于2017-08-29 17:28 被阅读0次

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

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

相关文章

网友评论

    本文标题:提升你的coding效率之snippet大法

    本文链接:https://www.haomeiwen.com/subject/amaodxtx.html