10月13, 2017

再谈 VSCode

一年前,在我花费了一个星期的时间写 editor 横评的时候,我还没想过我最终会选择 VSCode。由于我长期使用 Code,关注它的动态,所以我会常常更新这篇文章。

VSCode(下文简称 Code)是由微软坐镇苏黎世的 Eric Gamma 率领团队打造。很多人可能对外国名字不太敏感,此人曾写过一本关于“设计花纹”的书Design Patterns (豆瓣),并且曾经是 Eclipse(最热门的开源 JAVA IDE) 项目的负责人。

编辑器

作为一个文本编辑器,强大的编辑功能是其本质的追求。

在这几年前端生态,尤其是 JavaScript 高度发展的环境,诞生了很多从前端圈延伸出的产品。Code 就是其中的一员,它基于 Electron 打造。

Electron 是 GitHub 开发的一个基于 Node.jsChromium 的开源库,用以开发跨平台的桌面应用。Chromium 是 Chrome 浏览器的内核,所以简单地来说,我们可以把这个 Electron 应用看作是一个浏览器中的网页应用。在浏览器里用前端技术写一个文本编辑器虽然不是 GitHub 的想法,但其为了自己的文本编辑器 Atom 开发的框架 Electron 最终却成就了 Code。

alt (Pic 在 Code 中打开与 Chrome 中一致的开发者工具)

在人们第一次听说前端圈又搞出 another 编辑器的时候,心里是拒绝的。的确,JavaScript 及其引擎的性能到底能不能承受文字排版的巨大压力,能不能满足输入的即时性,在当时都是存疑的。Atom 本身就一度因为性能问题被许多用户抛弃,而 Code 无疑在这一方面战胜了 Atom,证明了新一代编辑器时代的到来。

编辑器作为要长时间注视的一个软件,UI 的设计、代码高亮主题的丰富度甚至字体的兼容性都是很重要的,Code 在这些方面上都是杰出的。Code 支持常见的各种代码高亮主题,例如 Solarized、Monokai 和 Atom 圈粉的利器 One Dark,除此之外还有众多的 icon 主题,让我们在敲代码到视觉疲劳的时候聊以自慰。

alt (Pic 在 Code 中使用多种高亮主题和合字)

Vim Emulator

是否拥有的一个全功能的 vim emulator 以实现与 vim 下一致的编程环境,是我等 vim 党密切关注的一个考量点。所幸,使用 Code 的 vim 用户不在少数,甚至是在 Code 的开发组中也有众多坚定的 vim 党。

关于 Vim 的问题,争议颇多。在我的理解下,Vim 对我更大的意义已经不是一个编辑器,而是一套 keyboard focus 的输入习惯。由于使用 HHKB 的缘故,我习惯在操作电脑的时候始终把手放在标准键位的位置上,即左手食指和右手食指分别在 F 和 J 的位置上,并且不使用 arrow key。因为更多的使用 Windows 并且卖掉了 HHKB,我现在偶尔也使用 arrow key。

有人因为讨厌在 shell 下繁琐的配置而讨厌 Vim,但当我们把 Vim 的输入方式从那个软件中抽离出来时,这样的情绪就变得毫无必要了。我们可以更理性,专注,有效地接触到 Vim。这正是 Code 里的 VSCodeVim 可以给我们的。Code 的一位开发者与我有一样的见解,当你习惯了 Vim 的输入方式,那么当你需要在 shell 下使用 Vim 的时候,学习成本会降低很多,由此可以你感受到由高效的输入方式带来的良好体验。

JavaScript

作为一个前端圈的编辑器,Code 直接内置了对 JavaScript 、TypeScript 和 Node.js 的支持。这一切都源自同门 Visual Studio 的 JavaScript Language Service,使 Code 得以实现对 JS 在 IDE 级别语义上的支持。

JavaScript in VS Code

同时 Code 优秀的拓展性,使其能通过插件增加更多更具体的对 JavaScript 的支持。一些常见的拓展,推荐阅读 Code 的官方博客((Visual Studio Code JavaScript Extensions Part 1 Sep 2016),了解这些插件的效果。

Code 拥有支持一些热门前端框架的插件,使用我们在诸如 React 的 JSX 文件和 Vue 单文件组件等一系列不同类型的框架里获得良好的支持。值得一提的是,在 Vue 的作者最新的一篇博客中还谈及了 Vue 2.5 会增强对 TypeScript 和 Code 的支持。

Integrated Terminal

Code 用前端技术在编辑器内实现了一个 Terminal,像这样的一个功能都足以单独成为一个项目,例如类似的 hyper(GitHub - zeit/hyper: A terminal built on web technologies)。这个 Terminal 的功能性之强令人感叹,在日常使用中,如果是需要对正在编辑的项目执行一些指令,我的第一选择不是打开 iTerm 而是打开这个内置的 Terminal。它很好的把命令和文件结合了起来,把整个开发过程控制在了一个编辑器中。

而像 Sublime 等闭源个人维护的项目,想要维护这样级别的部件基本是不可能的(Sublime 至今没有一个 Integrated terminal 和 debugger)。而闭源软件用论坛之类的社区来处理用户反馈,效率也是比较低下的。这也是如今 Code 这样的开源编辑器受宠的原因之一。

alt (Pic Integrated Terminal 功能演示)

这个 Terminal 的配色也会随代码高亮配色变化,并且字体可以单独设置以满足 powerline 等特殊字体需要。在 Windows 下,这个配色成功地拯救了根本不想打开自带 cmd 或者 PowerShell 的我。

Integrated Terminal 支持原生的 split 功能(after v1.22.1),非常方便。

alt

Integrated Git

Code 自带的 Git(需要系统安装有 Git)足以完成一些简单的 Git 操作,对于一些不会使用 Git 的人是一套很好的解决方案。

alt

(Pic Code 下的 Git diff add commit 流程)

对于一些繁杂的 Git 操作,我们往往还是在命令行中进行,前面提到的 Integrated Terminal 就是一个很好的解决方案。有时候我们需要用 Git 的默认 Editor 来修改例如 commit message 的一些信息,此时就会出现 Vim in Code's Integrated Terminal 的现象(其实还挺酷的),为了避免这种现象,保持 Editor 的一致性,我们可以将 Git 的默认 Editor 配置成 Code。

git config --global core.editor "code --wait"

之后 Git 就会默认调用 Code 进行相关编辑,在关闭所编辑的文件以后,Code 还会自动将窗口焦点转回 Integrated Terminal(after v1.22.1)。

ACM(C/C++)

网上有很多配置的教程,如果不了解编译链的话可能会有很多困惑,但是参考一个好的教程一般不会有太多问题。

举个栗子

自用插件推荐

所有推荐的插件可以在 Code 中使用 cmd(control) + p 后输入ext install <插件名> 搜索安装。

Shell launcher

可以选择新开 shell 的种类

Clang-Format

Clang-Format 是一套代码格式化工具,Code 的 clang-format 插件让 Code 可以调用系统的 Clang-Format 对代码进行格式化。这需要我们在系统中安装有 Clang-Format,如果 Clang-Format 没有将可执行文件配置进系统环境变量中,我们还可以在 Code 的配置中手动配置绝对路径。

通过设置 Code 的配置,我们可以让 Code 在粘贴代码或者保存文件时自动 format 代码。

Code Runner

Code Runner 可以调用系统内的一些编译器对选中的部分代码或者文件进行编译运行。

Dash

对正在编辑的文件中光标所在的函数调用 Dash 等一些文档软件查询。

GBKtoUTF8

顾名思义,在打开一些 GBK 编码的文件的时候会自动将其转换为 UTF8 编码的文件。如果你使用 Mac 并且经常需要和 Windows 用户交流文件,这个插件必不可少。

Git Lens

整合了 Git Blame 等一系列 Git 的高级功能,使 Code 对 Git 的支持更全面了,但需要更深入的配置。

Git History

一个将 git log 功能整合进 Code 的插件,较 Git Lens 简单易用。

Rainbow Brackets

让嵌套的括号显示为不同的颜色,增加区分度。Lisp 程序员必备,hh。

Indenticator

让缩进的区间高亮,Python 程序员必备,hh。

vue-color

我自己写的一个亮色主题,不知不觉已经有 1w+ 的下载量,hh。

OneDark-Pro

上文提到的 Atom 主题。

One Monokai Theme

自己常用的一个暗色主题。

各种语言以及框架的插件就不在此赘述,大家还可以通过在插件列表中通过下载量排序来寻找优秀的插件。

尾声

时至今日,我身边用 Code 的人越来越多。在这一年中,Code 快速迭代,在最近的一个版本还更换了 icon。闲暇的时候,我仍然会翻阅每个版本冗长的 release note,感叹其功能增长的速度。拥抱开源,拥抱 JS 社区,微软以不同以往的一种姿态,让开发者社区再次注意到了他们一直保有的强大工程能力。

本文链接:https://sxing.xyz/post/visual-studio-code.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。