Atom 1.0 体验： The Hackable Editor?

[UPYUN]

6月末，GitHub 宣布了 Atom 的 1.0 版本，也算是这个编辑器正式发布了吧。1.0 的版本，相比于当初邀请制时期已经变动相当大了，可谓「非复吴下阿蒙」了。那么，我们就来重新认识下这个编辑器吧。

庐山真面

作为一个程序员，我们当然不是通过直接下载安装这种方式来认识 Atom，我们先来看看这张图：

这张图是 Atom 编辑器源码 repo，从图中，我们可以清晰看到，Atom 的源码大部分都是 CoffeeScript（ CoffeeScript 是一门可以编译到 JavaScript 的灵巧语言 ），这是因为其核心是基于 electron （由 @zcbenz 开发的基于 Node.js 和 Chromium 的桌面应用程序开发框架），得益于 Node.js 和 Chromium，使得 Atom 的开发基本就是 JavaScript 的场子啦。

我们再看下图：

可以看到，源码中还有众多 less（可编译到 css） 文件，没错，这就是 Atom 的 GUI 界面源码了，它的界面，其实就相当于我们平时上网所看到的网页了（当然不完全是），这就是 Chromium 的功劳了，那么 Node.js 做了什么呢？Atom 提供了一个名叫 「apm」 的工具，即 atom 包管理器。既然是一个「hackable」的编辑器，必然少不了插件这个机制，apm 即是用来管理 atom 插件的，而 apm 又来源于 Node.js 中的 npm（GitHub 对其做了定制二次开发），除此之外，其核心 electron 将 Node.js 和 Chromium 相结合，使得在 Browser 中也能直接运行 Node.js 代码，并且几乎完全兼容所有第三方的 npm 模块。

邂逅

打开 Atom 编辑器，初见却似曾相识，界面其实和 Sublime Text 相当接近，当然，1.0 版本的有些亮点了，可以看到默认启用了新的暗色调主题 One Dark，极具现代感。

到这里，习惯性的按下 Sublime Text 的著名快捷键组 Cmd + Shift + P 和 Cmd + P，可以看到 Atom 对其反应和 Sublime Text 一致，分别是 command palette 和文件快捷跳转器。与 Sublime 不同的是，Atom 内置了插件管理器（即 apm）这对于 Sublime Text 用户来说可谓非常贴心啊。

从菜单栏中的 Packages 中，可以看到，Atom 内置了如下模块：

如上，Atom 对于 Git 的支持有着天生的优势（GitHub 的看家本领）

相识

我们可以按 Option + Cmd + I 组合键来打开开发者工具：

如上图，我们可以看到，Atom 编辑器中几乎所有的元素都是页面上的元素，这便是其中一个「hackable」的因素了，上图中，可以看到，其闪烁的光标，也是一个 DOM 元素，通过控制 .cursors 的 CSS 我们便可以对光标进行相应定制了。其他的 GUI 元素都是如此。

再来看看 Atom 的配置，与 Sublime 不同的是，Atom 提供了两种方式配置你的编辑器，如下图的 GUI 形式：

亦或者是如下图的 Nerd 专用直接编辑文件的形式：

（注：这个文件通过菜单中的 「Open Your Config」即可打开，实际位置在： ~/.atom/config.cson ,<注的注： cson 其实就是用 CoffeeScript 写的 JSON 了>）

值得注意的是，Atom 虽然是个 GUI 编辑器，然而在主菜单中，自带了 “ Install Shell Commands ” 安装后可以轻松的在终端中呼出 Atom，要知道 Sublime Text 可没有自带这个功能（尽管只是个简单的软链接操作而已），虽然只是个小功能，也可以说是 #情怀# 吧 233。

周边

了解了 Atom 的基本情况，我们再来看看 Atom 的生态圈。截至笔者写此文时候，Atom 编辑器已经拥有 2147 个 Package，691 个主题可拱选择。可以说是相当丰富了，一些热门的功能插件，也已经相当成熟了，比如语法检查 linter 插件，已经覆盖了绝大部分的语言，又如 minimap，不仅仅是将 Sublime Text 特有的小地图移植到了 Atom，并且在此基础上还增加了对其他插件的联动支持，比如，在 minimap 区域高亮显示 linter 的错误结果；又如在 minimap 处显示搜索查找的结果等等。

对于一个开发者来说，光是一些现成的插件和主题，自然不能满足我们的 hack 劲。我们再来看如何深度定制 Atom，或者为其开发插件。

Atom 内置有个 Package Generator，我们通过它轻松生成一个插件或者语法高亮主题的骨架，下图便是所生成的插件骨架：

唯一的一个问题就是，GitHub 的人都是 CoffeeScript 重度用户，所以生成的文件中代码也默认是 CoffeeScript 写的，比较可惜的是其 API 文档中的代码示例也是由 CoffeeScript 写的，对于这一点，早先已有开发者在其官方论坛上提出意见，而官方似乎表示会推出 ES 版本，但是笔者至今没见到。这样的话，如果你没有学习过 CoffeeScript 的话，可能需要多花一点时间才能消化了，当然了，我们也可以去 GitHub 找一些使用 ES 写的 Atom 插件来做参考。

另一个优势其实就是 Node.js 了，Node 拥有非常优秀的生态圈，npm 上数以万计的模块都可以被拿来用到插件开发中，这无疑对 Atom 的插件生态圈的发展提速了不少，并且，类似 jshint 之类本身就依赖 Node 来运行的工具，就更加有优势了。

外有 Chromium，内有 Node，Atom 几乎所有的元素都可以自己去定制了。

不足

尽管 Atom 各方面都表现优秀，然而，一些缺点也非常明显：

首先，由于 GUI 界面是 Chromium 驱动的页面，响应速度并没有 Sublime 那样快了，大文件的载入渲染也是需要相当长的时间。不过，相对于去年邀请测试期间的 Atom，性能已经有了质的飞跃，想当初是打几个字都要延迟几百毫秒的感觉。

其次，如果安装了很多涉及到 GUI 相关的，例如小地图，linter 错误高亮，如果要渲染的元素非常多，那也会严重影响响应速度。笔者测试了一个大约 10w 行代码的老项目（代码不太规范），用同样的 jshint 配置载入编辑器，Atom 几乎卡住不能再输入了，而 Sublime 和 Vim 之类则毫无压力。不过，这样情况比较极端，一般情况下，我们不太会遇到这种有着相当多不规范代码，确又有 linter 配置的项目。

有一个可能重要也可能不重要的问题，似乎 1.0 中也未解决，即，如果你开启了 “ Soft Wrap ”，然后内容带有中文的话，自动换行会出现文字溢出到右边的 bug：

这种情况，在输入文本中英混合会好一些，大概溢出一个字左右，如果是全中文的，会有一大片字看不到。相信这个问题会困扰不少国内或者要输入中文的开发者，如果你打算在 Atom 里面输入大量中文的话，请一定记得临时关闭一下 “Soft Wrap”，这样起码还有滚动条滚过去可以看，算是个小小的 walkaround 吧。

未来

其实， Atom 是来自未来的编辑器，总的来说，尽管笔者最终还是回到了 Sublime Text 的怀抱（ 付费用户的忠诚 ），但 Atom 对我也留下了非常好的印象，作为一个前端，作为一个 node 爱好者，我根本找不出不喜欢她的理由来。如果你是个前端，或者你是个 node 开发者，相信你会有兴趣去尝试一下。

---

本文为 UPYUN 前端开发工程师 Leigh ( @lisposter )原创内容，点击下面原文链接查看附加视频的完整内容。

原文链接：http://mp.weixin.qq.com/s?__biz=MjM5ODc5ODgyMw==&mid=209630173&idx=1&sn=04c5c7ff623381198784fff30ed68922#rd

[kikyous]

walkaround

[49]

浓浓的OneAPM风

[tracyone]

VIM大法好

[ayang23]

速度是第一位的，gvim都觉得有点慢，目前只有sublime可用

[xcv58]

已经把 Atom 作为主力使用，包管理确实赞。

还有就是很多核心功能类似 File Tree Minimap 都是普通的 package 和我们使用同样的 API

[aksoft]

太卡,太慢

[pp3182429]

上周配置了jshint以后天天想写代码==#

[MrGba2z]

我已不相信webkit…

[lixia625]

不好用，已弃坑。复制粘贴稍微多一点的内容过去就卡死了，同样的内容sublime秒出。

[del1214]

已删除，太卡

[df4VW]

太卡

[nbndco]

卡的和鬼一样，而且都不需要安任何插件自带的那些就足够卡死。试了不知多少个版本，还以为正式版会好，没想到一样卡。

[jybox]

https://atom.io/packages/AtomicChar
这个插件可以解决含有中文字符的行 Soft Wrap 行为不正确的问题

[jybox]

然后我依然要给 Atom 中文社区打个广告，希望能帮到更多的人 http://atom-china.org/

[hkongm]

我们4个macbook，有两个卡，有两个不卡
不卡的一个是初代retina13，一个是3年前的air，卡的都是较新的retina 13
不知为何
目前自己用起来很爽，插件配置和管理不错，很全

[coolicer]

我已经用上了，慢就慢。喜欢它的颜色

[devdes]

文件稍微大点就卡，这方面赶SublimeText还是有差距

[lingo233]

我在win下使用还凑合，不是很卡就是启动太太太太太慢

[NemoAlex]

简单说结论：
1.0 了还是没法用
Sublime Text 一年更新一次还是比它强
插件质量良莠不齐，随便装几个就各种报错，分分钟卡到风扇响起

[moe3000]

我的渣本上用了一段时间，太卡，已回归sublime

[hooluupog]

sublime可是用c++搞得原生界面，我实在很难相信它的性能有赶上sublime的一天。

[zrp1994]

太慢了，毕竟赶不上Python

[aku]

atom+packages
就跟chrome+extensions一样

不加，功能鸡肋
加了，卡到飞起

[yyfearth]

Install Shell Commands

Sublime Text 有 subl 来着
不过要自己ln或者cp一下

[Wangxf]

噱头，本来做得好的话我相信大批程序员会转，Github 带来的极客气质，无缝整合github，各种node什么就不说了，还有人维护，不像sublime作者人莫名其妙消失了，可惜不争气

[windyboy]

spacemacs 快
可以开启vim模式

[Mark24]

卡……回归Sublime Text

[Navee]

正好今天sublime提示我授权，就安装了一个atom
安装了一下插件，每安装一个插件就要顿卡一两次吧。
使用顿卡还有待观察。

[lisposter]

@Wangxf 哈哈 sublime 作者并没有消失， st 3 dev 发得还算勤快

[zonghua]

visual studio code不就是这样吗

[byboating]

还是钟爱Emacs.

[merito]

我还是等visual studio code吧。MS黑科技让VSC快得飞起，可惜目前的版本还没有插件系统

[gaohongyuan]

正在作为主力使用，尝试取代 ST3。确实卡了点，有时候懒得开就用 Vim。

[empvio]

最近的主力编辑器就是Atom。前端，就装了一个Emmet,一个代码格式化插件，一个ftp插件，用着还行，就是比较容易崩溃。 等待visual studio code支持插件功能。

[iF2007]

等VS code

[janxin]

Atom略卡，但是没有到不能使用的地步
但是插件目前使用起来发现并不成熟，偶尔性遇到各种Bug

[laogui]

功能，界面都不错，但性能是个大问题。

[xiaotianhu]

这个还是只适合js吧？
有用这个做PHP python的么 好用么

[ooh]

卡的飞起

[knightdf]

对比了的，比sublime慢太多了，还是用我的vim去吧