VSCode 插件测评

我个人认为, 在一个拥有漂亮外观的编辑器下编写代码, 可以提升编程时的体验

因此今天为大家带来的是 VSCode 主题插件的测评

测评维度

文章将从以下三个维度对 VSCode 主题插件进行测评

1. 语言着色

一个能够根据语言语义进行着色的主题可以提升代码阅读时的体验,因此文章将首先对主题的着色能力进行测评

由于语言种类繁多, 能力有限, 我只选取了三种语言进行测试,分别为 JavaScript, Java 和 Markdown

2. 选中提示

在侧边栏中提供对各个控件的选中提示, 可以方便用户在各栏目中切换, 这也是主题设计中较容易忽略的一点

具体效果如下图中的橙色框, 通过该框可以很清晰地了解到目前在侧边栏中的位置

3. 维护情况

VSCode 插件开放的特性既造就了百花齐放, 又不可避免良莠不齐

比如很多插件其实已经被”弃坑”了, 但由于 “马太效应”, 该插件还会在各类排行榜和推荐文章中出现

例如我非常非常喜欢的一个插件 Bracket Pair Colorizer 2,截止至 2021.5.6, 它一共获得了 2,514,210 次下载

但距离它上一次更新已经快一年了, 而且其 Github 上的仓库也已经被设置为了 Archived 🙁

补充

由于 VSCode 中主题插件的数目实在是太多了, 我选取的只是人气较高的主题

因为在我看来, 主题插件应该提供开箱即用的体验, 因此我没有将可定制性纳入测评维度

测试环境:

无语言支持类插件各主题均为 2021.5.5 最新版本字体: Fira CodeVSCode 版本: 1.55

好的, 接下来就开始我们的”主题大乱斗”吧!

主题大乱斗主题一览

One Dark Pro

One Dark Pro 主题的灵感来自于 Atom 中的 iconic One Dark theme

它的简介可以说是非常直白: “VSCode 中被大量下载的主题之一”

截止至 2021.5.4, 它已经获得了 3,609,977 次下载

Dracula Official

谈及暗色系主题, 著名的 Dracula 主题是避不开的,该主题覆盖多达 181 个应用,在 VSCode 中该主题名称为 Dracula-Official

截止至 2021.5.4, 它已经获得了 2,241,050 次下载

Bluloco Light Theme

亮色系主题同样拥有不少拥趸, Bluloco Light Theme 主题源自于 One Light Theme,以对语法作用域的全面运用和整体配色一致性为最大特点

截止至 2021.5.4, 它已经获得了 144,891 次下载

Eva Light(Eva Theme)

我们的最后一位选手同样是亮色系, 为 Eva Theme 系列主题中的 Eva Light,该主题将自身定位为充满语义表达的代码主题

截止至 2021.5.4, 它已经获得了 242,212 次下载

好的, 所有主题插件已经入场完毕, 接下来让我们看看它们在各个测评维度上的表现吧

语言着色JavaScript

One Dark Pro

Dracula Official

Bluloco Light Theme

Eva Light(Eva Theme)

我的观点:

仅仅从第一眼的醒目效果来看, 我认为是 Dracula Official 获胜,各个语义部分之间的颜色和对比度区分得非常明显

但论及在 JavaScript 上表达语义的丰富程度, 两位暗色系较两位亮色系则有些表现不佳,从上图中可以看出, 两位暗色系对变量 count 和常量 btn 的属性 innerText 并没有做着色区分处理,而两位亮色系则都做了区分

对于两位亮色系选手, Eva Light(Eva Theme) 在函数内部对常量 btn 的着色发生了变化,从橙色变为了和变量相同的灰黑色; 而 Bluloco Light Theme 则能够保持一致的紫色

综上, 我认为对 JavaScript 的着色是 Bluloco Light Theme 获胜

Java

One Dark Pro

Dracula Official

Bluloco Light Theme

Eva Light(Eva Theme)

我的观点:

出人意料, 在对 JavaScript 着色中拔得头筹的 Bluloco Light Theme,在对 Java 的着色中竟然首先出局. 权限标识符, 数据类型, return 以及 this 之间没有任何区分,这显然有失水准

而对于 Eva Light(Eva Theme), 不得不说, 插件的作者对于浅色系的理解真是非常独到,各个颜色之间区分明显的同时, 整体又能形成一致的美感, 不由得让人赞叹

但是语言语义的表达只能局限于颜色吗? 两位暗色系选手给出了不一样的答案:它们在着色之外, 还引入了斜体, 这种字形上的直接改变, 我个人认为可以较好地提升视觉含义的表达

在两位暗色系选手之间, 比起 One Dark Pro 仅仅将函数参数名处理为斜体,我个人更喜欢 Dracula Official 将数据类型, 函数参数名和 this 均处理为斜体这样激进的表达

但 Dracula Official 对 this 属性着色的缺失又必须纳入考量…

综上, 在对 Java 着色的比拼中, 我认为 One Dark Pro 获胜

Markdown

One Dark Pro

Dracula Official

Bluloco Light Theme

Eva Light(Eva Theme)

我的观点:

照理说 Markdown 语义并不复杂, 但竟有两位选手在着色上出现了瑕疵,一是 Dracula Official 对无序分点标记 – 没有做着色区分;二是 Eva Light(Eva Theme) 对行内代码标记 “ 没有做着色区分.我个人认为这是不应该出现的

对于剩下的两位选手, 它们除了进行语义着色外, 还加入了一些小细节:One Dark Pro 对斜体标记 *real* 做了对应的斜体处理;Bluloco Light Theme 对加粗标记的内容 **markdown** 做了对应的加粗处理.我觉得正是这些小细节体现的主题作者的用心

虽然 One Dark Pro 和 Bluloco Light Theme 在语义着色上各有千秋,但我觉得 Bluloco Light Theme 对加粗内容使用的玫红有些过于突兀, 破坏了整体的美感表达

因此在对 Markdown 着色的比拼中, 我会将票投给 One Dark Pro

选中提示

接下来是测评的第二个大项”选中提示”, 进行的测试将和下图中进行的操作一致

样例中的橙色边框既清楚地提示了焦点所在位置, 又没有显得和侧边栏格格不入,我个人觉得是对选中提示相当好的一种实现

接下来让我们一起来看看四位选手的表现如何吧

One Dark Pro

Dracula Official

Bluloco Light Theme

Eva Light(Eva Theme)

可喜可贺, 四位参赛选手都考虑到了这一细节

但如果要吹毛求疵, 我个人认为 Dracula-Official 对于选中提示的实现最为优秀,清晰明了的同时保持了主题对比度高的特点

而其它主题要么稍显突兀, 与整体有些不合拍; 要么有点暗淡, 不够突出焦点

维护情况

文章将从更新频率和社区活跃度两个维度来评判各个主题的维护情况

更新频率

One Dark Pro

Dracula Official

Bluloco Light Theme

Eva Light(Eva Theme)

可以从上述图片得出: 距离 Bluloco Light Theme 和 Eva Light(Eva Theme) 上一次更新还不到一个月,我认为可以说仍相当有活力

而 One Dark Pro 在 2021.5.5 刚进行了一次更新, 这就是顶尖主题的实力吗?!

可惜的是, 我们的 Dracula Official 并没有像它的名字般如同吸血鬼不老不死,距离它上一次更新已经过了接近半年多了

社区活跃度

One Dark Pro

One Dark Pro 的社区我个人认为可以说是相当完善了:项目管理人 binaryify 在积极维护项目,有 47 位社区成员为项目直接贡献过代码, 还得到了 codestream 的赞助

我个人十分看好 One Dark Pro 的未来

Dracula Official

虽然说 Dracula Official 的更新情况有些不尽人意,但它的母项目 Dracula Theme 在 Github 上是一个万星级别的开源项目

该主题覆盖了多达 181 个应用程序, 除了 Vim, Emacs, Eclipse 等编辑器,还有像 Chrome, Firefox 等浏览器, 甚至还可以应用于 Adobe, Figma 等设计类软件

而且该项目于 2020 年推出了一站式主题解决方案 Dracula PRO, 采用订阅付费机制,由项目创始人 Zeno Rocha 主力维护

Bluloco Light Theme 和 Eva Light(Eva Theme)

不像两位暗色系主题已经拥有了相当成熟的社区, 两位亮色系主题的社区仍处于相对早期阶段

如果有开发者喜欢这两款主题, 那就加入其中吧, 这正是开源的魅力不是吗? 🙂

Bluloco Light ThemeEva Light(Eva Theme)一些细节

除了上述比较程式化的测试, 我在使用这些主题的过程中还发现了一些开发者的小设计, 我觉得非常值得分享给大家

对异常项的突出

不局限于常规主题中在异常下方添加波浪线, Bluloco Light Theme 还为异常添加了色块,使其在浅色主题下也能较为突出

对所在域的突出

VSCode 提供了当前所在作用域的提示, 可以协助阅读嵌套代码,但默认效果为将当前所在域标识符加粗, 并不是很直观

注意下图中左侧竖线的变化

而 Eva Light(Eva Theme) 对该提示做了橙色突出处理

总结

经过上述测评, 每一个插件主题都展现出其独到的特点,各有千秋, 我认为并不能得出一个非它不可的结论, 只能根据我个人的体验给出各个主题的优势:

开箱即用的稳健之选: One Dark Pro奔放的暗夜体验: Dracula Official小而美的设计感: Bluloco-Light独到的色彩表达: Eva-Theme

以上就是本次 VSCode 插件测评之主题大乱斗的全部内容了, 希望你能喜欢 🙂