用 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，下面是作者推荐的四个：

• Lodash
• Turbo JavaScript**
• Egghead React Snippets**
• Flask

如果想自定义 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 文件：

• language-html.cson
• language-javascript.cson

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

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

扩展阅读：

• 为什么应该在你的项目中使用 EditorConfig？

欢迎关注：

• 知乎专栏「极光日报」，每天为 Makers 导读三篇优质英文文章。
• 网易云电台「极光日报**」，上下班路上为你读报。