简评:对于程序员来说,提升编码效率是不懈的追求。
无论打字多快的人,他的手也一定跟不上大脑的速度。作者在这篇文章中推荐大家使用 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。
扩展阅读:
欢迎关注: