Atom 1.0 体验：The Hackable Editor?

Posted 2021-04-28 又拍云

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

关于 Atom 1.0 ，官方出了个有趣的视频，可以看下：

庐山真面

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

这张图截自 2015 年 6 月 30 日 10 点 40 分 33 秒，是 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 )原创内容，转载需经作者授权，并保留署名及原文链接