“编辑器到底哪家好”——技术分享 @ 2015-01-10

编辑器自诞生之日起，便逃脱不了被开发者拿来茶余饭后进行比较的命运。于是，本着科学探索以及工程师的严谨求知精神，我们昨天特地在公司内部开展了一次关于“编辑器到底哪家好”的专场技术分享，从批量变量名重构、代码搜索、代码模板（Snippet）、单词错误检查、编辑器内代码执行、代码格式化、js/coffee互转、代码高亮、多行编辑、插件包管理、markdown编辑预览、项目（目录）管理以及 Git 集成等多个方面对比了 Vim、 Emacs、Sublime Text Editor 以及 Atom 这四款编辑器的各自特点。

Vim

第一个提刀上马的是来自我们的 Zed 关于 Vim 的介绍。

Zed 开门见山，开篇便介绍了一个用于自动安装 Vim 常见插件的工具—— spf13-vim。该插件号称 Vim 的终极插件，其基与 Vundle （Vim 的插件包管理系统）构建，自动收录了一些 Vim 插件中比较受欢迎的插件，通过 spf3-vim ，便可以自动将你的 Vim 一键打造成一个终极 IDE。

spf13-vim 绑定了非常多的利器，Zed 也通过实际操作向大家展示了各个插件的作用，以下仅作简单介绍。

NERDTree

NERDTree 是 Vim 中用于显示当前工作目录树的插件，通过在命令模式中输入 “NERDTree” 启用 NERDTree，便可自动显示当前文件所在目录下的文件以及子目录的目录结构，通过光标在目录树上的位置，可以快速打开项目中的其他文件。

ctrlp

ctrlp 用于快速打开指定文件，类似于 Sublime Text Editor 中的 Goto Anything 的功能。

neocomplcache

neocomplcache 是 Vim 中的用于自动补全的插件，它会从用户的词典、输入历史、已打开文件以及代码模板中自动提供输入建议，非常智能。

Fugitive

Fugitive 是 Vim 中对于 Git 命令行的集成，集成的功能包括 git status、git diff、git commit、git blame、git log以及 git push 等常见的命令，令人印象深刻的是其在显示 git log 时的即时浏览功能，让你在查看 git log 的同时直接查看某次 log 的具体代码改动。

Tabularize

Tabularize 插件是一个用来对符号进行代码对齐的插件，比如基于“=”或者“:”对齐。

Tagbar

Tagbar 用于为当前打开文件生成函数或者方法列表并且在侧边栏中显示的插件，通过此插件，你就可以快速地在文件内的不同方法或者函数之间快速跳转了。很赞的功能！

在 Zed 的演示中，还看到了 Vim 中可以通过 Ack 插件实现全文的搜索，并且即时显示搜索结果以及匹配结果的预览，非常快速方便。除此之外，你也可以通过其他插件，实现对变量的批量重命名等操作，可以说，只有想不到，没有做不到。

小结

Vim 非常强大，日常开发中所需的功能，基本都有对应的插件的实现，如果你更喜欢纯键盘式操作的开发环境，Vim 一定是你的菜。而且，Vim 很酷。

Emacs

见识了 Vim 的强大与酷炫之后，Mike 同学带来了对于 Emacs 的介绍。

开篇 Mike 便放出了一个展示 Emacs 酷炫功能的视频——利用 emacs 弹钢琴！（PS：此时下边的小伙伴们已经目瞪口呆）

实际上，Emacs 确实向来也以酷炫的功能而闻名，因为它可以：收发电子邮件、查看日历、编写文章大纲（支持文本内容收起与展开）、支持多种语言的调试编辑、管理 TODO 、玩游戏等等。

Emacs 中最有名的功能莫过于其 org 扩展包，org 扩展包扩展了 Emacs 的 org mode，org mode 采用纯文本记录内容，在写作时可以折叠起不关注的章节，内置可内嵌图片或者链接、表格（丧心病狂的是，连带公式的电子表格也是可以的），还可以将内容导出为 HTML、Latex、DocBook等格式，最后还可以间接转为 PDF 格式。

而回到开发本身， Emacs 可以继承 Git 命令行，但是从现场演示效果看，效果也不错，其中印象深刻的是 git log 的实时查看，可以做到直接预览某次 git log 的内容改动。

另外一个令人印象深刻的是 Emacs 的 Undo Tree 功能，其可以通过树的形式展示当前文件的演变过程，通过回滚或者重演修改，会实时更新当前的 Undo Tree 的所在节点，非常直观。

Emacs 也支持以目录树形式显示当前工作目录下的文件或者目录，并且支持文件的导航。

在代码搜索方面，Emacs 的表现差强人意，没有亮点功能，仅仅显示匹配文件名称，无内容预览，如果需要确认目标文件，还得一个个点开，不是很方便。

而在代码模板方面，Emacs 支持自定义 Snippet 文件，并且也是通过 $ 符号标记代码模板的占位符，也可以通过类似 $1 或者 ${2:codes here} 的语法指定光标顺序以及占位符的示例文本。

小结

总体而言，在昨天的 Emacs 演示中，小伙伴们都是目瞪口呆的，只是剥去酷炫的外表，用 Mike 的话说就是：“Emacs 除了用来开发，其他方面的表现都很赞”。所以明白我前面的内容为什么那么多跟编程无关的了吧？

我的感觉是，如果是为了征服某个萌妹子或者汉纸，Emacs 绝对是耍帅扮酷必备，但是如果只是为了开发，还是要三思而后行。

Sublime Text Editor

在 Emacs 掀起一阵又一阵欢呼声之后，我们的 Rain 大神披上 Sublime Text Editor 战甲上场了。

Rain 通过打开一个实际 Rails 项目逐个演示了此次评比中考量的因素，以下我们也来一个一个重温下：

变量名重构

在 Sublime 中编辑代码时，你可以先选中一个变量，接着按“Command” + “D”组合快捷键，就可以立即选中下一个同名变量了，如果一直重复这个操作，就可以将所有同名变量同时选中了，如果执行编辑，所有变量名都同时被更新，速度非常快！

代码搜索

Sublime 有两种搜索模式，一种是文件内搜索（快捷键“Command” + “F”），另一种是全文搜索（默认是当前打开目录，也可以指定搜索访问，比如某个或多个指定目录），Sublime 搜索支持正则表达式、大小写忽略等设置，全文搜索快捷键是 “Command” + “Shift” + “F”，并且搜索结果可以显示 Context，也就是预览文件内容，直接双击还可以直接打开包含搜索内容的文件。

代码模板

Sublime 以文件的方式管理代码模板，文件后缀名是 .sublime-snippet ，支持类似 Emacs 的 Snippet 的语法，并且支持指定 scope，比如只在 Ruby 代码中有效，还可以指定 Snippet 的快捷键。

单词错误检查

Sublime 允许在用户配置中指定使用的词典，通过指定词典，便可以在编写代码过程中提供单词检查，方便我们在开发中对变量名的命名。

执行正在编辑的代码

Sublime 可以通过特定插件编译或者执行当前文件内的代码，比如集成 Ruby 的 irb，以及 PHP 的 interative console等等。

代码格式化

Sublime 中的代码格式化主要依赖于插件的实现，比如 BeautifyRuby 插件用于格式化 Ruby 代码，并且会自动删除行尾空白；而 BeautySass 插件用于格式化 Scss 或者 Sass 代码，并且将一行中的多个 rule 整理为多行的方式，方便阅读。

js/coffeescript 互转

这个功能也是可以通过插件实现，在此不再赘述。

代码高亮

Sublime 自带对多种语言的解析，并且自动通过文件扩展名判断编程语言，显示对应的语法高亮。你可以显式地设置当前文件的所属语言。

多行编辑

Sublime 中可以通过按住 “Option” 键以及鼠标左键，并且拖动光标同时选中多行，方便多行的同时编辑，非常方便。除此之外，你也可以通过按住 “Command” 键，同时通过在不同的光标位置点击鼠标左键，在文件中插入多个光标，方便多处文本的同时编辑。

插件管理机制

Sublime 的插件管理通过 Package Control实现，Package Control可以让你非常方便地通过 Sublime 命令面板（快捷键 “Command” + “Shift” + “P”）安装、卸载、启用或者禁用插件。

markdown 编辑

Sublime 可以通过插件实现语法高亮，但是没法完全的实时预览，只能通过键入命令在浏览器中预览 Markdown 的效果，并且部分相关插件会造成 Sublime 卡顿，不是很好。

项目（目录）管理

Sublime 自带目录树功能，并且提供 Project 功能，你可以在 Project 中排除一些不必要的文件夹，减少你的干扰，并且全文搜索也将可以自动将不要的目录或者文件排除在外。Project 的功能非常接近传统 IDE 的实现，本人非常喜欢的功能之一（PS：不好意思，我不应该插广告的）。

git 的集成

Sublime 有非常多成熟的 Git 或者 Github 相关的插件，比如 GitGutter 可以直接显示当前文件的状态（新增行、删除行、修改行）等。而 Git 插件支持 Git status 以及 Git Blame 等常用命令。

文件间跳转

Sublime 的另一个内置杀手锏功能是 Goto Anything， 可以通过快捷键 “Command” + “P” 启动，只要你输入部分文件名，Sublime 便会迅速在当前工作项目中查找符合的文件，只要将光标挪到指定的文件上并回车，就能立即打开文件了。

文件内跳转

Sublime 内置还有个 Goto Line 的功能，通过快捷键 “Ctrl” + “G” 可以直接输入行数并且跳转到指定行数。另外可以通过快捷键 “Command” + “R” 打开 Goto Symbol 面板，Sublime 会默认显示当前文件内的方法或者属性列表，你可以再搜索框中输入字符对列表进行过滤，直接在列表具体条目上键入回车可以直接跳转到该方法或者属性的定义的代码处。

小结

Sublime 内置提供了很多比较实用的功能，插件的生态圈也比较完善，基本需要的其他功能都会在插件中得到补充实现。Sublime 中强大的命令面板帮助你摆脱了一大堆快捷键的噩梦，你只需要记住屈指可数的几个必须的快捷键就可以非常方便地完成你的工作了。

Atom

在见识了 Sublime 的高效之后，时间已经接近傍晚7点了，伴随大家欢呼声的，还有大家肚子里的咕噜声。不过，还有一个主角没上场呢，大家满怀期待地坚持了下来，一定还要见识 Atom 编辑器的神奇之处。

我们的最后一个编辑器的演示，由 Eric 大神带来。

Eric 大神以身示范，首先打开了 Atom 编辑器，然后。。。然后他的 Atom 卡死了，只能重启了。

一切就绪之后，Eric 大神介绍说，Atom 编辑器实际上并没有太多出人之处，因为它本身在大部分功能上都是 Sublime 的拷贝，值得说的是它跟 Sublime 的异同之处。

首先 Atom 同样支持 Sublime 中的几个最重要的功能：Goto Anything、Goto Symbol、Goto Line、命令面板等等，就连快捷键也是一模一样的，好家伙！

但是，不同的是，Atom 是基于 Node-Webkit 开发的，也就是说，它本身就是用 HTML、Javascript 以及 CSS 开发的，所以，可想而知，它的插件也会用类似的语言来实现，甚至，你可以直接用审查元素的方式直接调试你的 Atom 编辑器！这对于一个 Web 工程师来说，为 Atom 编辑器贡献插件简直就是天赐良机！

Atom 提供了一个设置界面用于直接编辑编辑器的偏好设置，比如字体大小等，在设置中还包含了一个插件管理中心，你可以非常方便地直接搜索你所需要的插件，并且只要轻轻一点插件的安装按钮，一切就就绪了！

Atom 同样支持Snippet，只是其所用的Snippet 的语法是 CSON（Coffeescript Object Notation）。至于占位符号，则是跟 Sublime 或者 Emacs 大同小异。

Atom 不支持 Project 功能（要有的话，我也转 Atom 了，哎，又广告了）。

Atom 里的很多本地功能，也都需要依赖插件实现，比如 Git 的集成等。

小结

实际上，从功能上来讲的话，Atom 编辑器简直就是 Sublime 的复刻，只是实现不同，插件实现的技术栈也有所差异。但是因为 Atom 目前还处于初步阶段，本身稳定性还是一个明显的问题。另外 Atom 的插件相对其他几个编辑器而言，还是非常少的，所以很多需求暂时无法满足。但是得益于其插件开发的门槛比较低，相信不久的将来一定会得到大幅度提升的。

总结

从本次演示对比的情况来看，其实上面四种编辑器都能够满足日常开发的需要，只是在不同方面各有所长。每一个编辑器的强大，并不在于自身的强大，而是得益于其插件生态圈的繁荣，毕竟我们日常使用到的编辑器的很多功能，其实都是插件所提供的，但是也得益于编辑器本身的扩展机制，我们才有机会享用到这么多非常赞的插件。

其实编辑器归根到底只是一种工具，工具是为了提高工作效率而诞生的。每个人的行为习惯都不尽相同，故而对编辑器的需求也不尽相同，从这点上说的话，编辑器无所谓谁好谁坏，只要能够提高你自己的效率，尽管使用就是。

没有人能够要求你必须使用哪一个编辑器，只是在满足自己开发需求的同时，也要多一点考虑：开发是一项特别需要协作的工作，如果你用的编辑器只有你自己会用，那跟你进行 pair programming 的小伙伴就该跪了。