用 snippet 加速你的编码

简评:对于程序员来说,提升编码效率是不懈的追求。

无论打字多快的人,他的手也一定跟不上大脑的速度。作者在这篇文章中推荐大家使用 snippet 来尽量弥补这个差距,加快我们的编码效率。

那么,snippet 是什么?

或许 template(模板)的叫法更加直观,也就是只需要输入少数的几个特定字符,编辑器便能帮我们自动补全为模板代码。目前几乎所有主流编辑器和 IDE 都支持这项功能,如 Eclipse, Sublime Text, Visual Studio Code 和 Atom。因为作者平时多使用 Atom,所以下面以 Atom 为例子。

在 Atom 中编辑 js 文件,我们输入 desc,敲击回车,便自动补全为:

describe('description', function () {
    
})

上面是作者展示的自己每天都做的一个工作:写 Mocha 测试。

在作者的这个例子里,完整的代码有 253 个字符,通过了 110 次击键完成,意味着有效打字速度提升了 230%。作者还记了个时,自己如

果逐个输入需要 62 秒,而用 snippet 只花费了 32 秒,有 194% 的提升。

虽然 Atom 自带的 snippet 已经非常丰富,但也有其他的一些插件提供了非常好用的 snippet,下面是作者推荐的四个:

如果想自定义 snippet,该怎么做?

在 Atom 中 snippet 是通过 CSON 定义的,看起来像是这样:

 '.source.css':
   'Padding With Mostly Identical Values':
     'prefix': 'pwmiv'
     'body': 'padding: ${1:num}px ${1:num}$2px ${1:num}$3px ${1:num}$4px;'

   'Margin With Mostly Identical Values':
     'prefix': 'mwmiv'
     'body': 'margin: ${1:num}px ${1:num}$2px ${1:num}$3px ${1:num}$4px;'

 '.source.js':
   'Require Chai Expect':
     'prefix': 'cxp'
     'body': 'var expect = require(\'chai\').expect;'

   'Expect To Equal':
     'prefix': 'ete'
     'body': 'expect($1).to.equal($2)'

也可以参考 Atom 官方定义的 snippet 文件:

然后在 Atom 菜单栏的 File 中选中 Snippets,就可以开始自定义 Snippets 了。
如果想看看 Atom 已经默认定义的 snippet,也很简单。只需在设置页面中选中 Packages,搜索 standardjs-snippets 插件,点进去就是完整的 snippets 列表了。

如果,你也在寻找方法花更少的时间打字,花更多的时间思考的话,强烈推荐使用 snippet。

扩展阅读:

欢迎关注

  • 知乎专栏「极光日报」,每天为 Makers 导读三篇优质英文文章。
  • 网易云电台「极光日报**」,上下班路上为你读报。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 译者注:这里面的内容主要是分析mp4/3gp文件的层级结构,详细的介绍了各种不同的box的结构等,网上有一些参考资...
    HaloMartin阅读 7,743评论 0 2
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,227评论 4 61
  • 作者:王子亭 Atom 是 GitHub 在 2014 年发布的一款基于 Web 技术构建的文本编辑器,我从 20...
    LeanCloud官方帐号阅读 8,371评论 0 13
  • 浑如巨卵绿苍苍,浸水丹霞藏玉囊。 每到三伏能解暑,红冰片片任分尝。
    高德华阅读 3,462评论 0 6
  • 愿做一只鸟 展开我双翅翱飞天际 看朝霞刺破黑暗 愿做一棵树 伸出我粗壮的根深扎地下 看尽这世间沧桑变化 不愿做一个...
    游春阅读 1,768评论 1 0