Visual Studio Code 是微软推出的一款轻量级编辑器,与它一起在市场争锋的相似软件还有 Atom 和 Sublime Text,面世第二年的它只占据 7% 左右的市场,后来在短短三年时间雄踞了半壁江山,不可谓不哇塞。

vscode-snapshot

发育如此强势的软件,背后到底是如何设计的,未来一段时间,我将带着你一点一点拨开她的面纱,再撩开她的裙摆。

下载源码

Visual Studio Code 简称 VSCode,需要注意的是,平时我们使用的 VSCode 那是产品,而下面我们要介绍的是源码,产品是源码的构建结果;源码使用的 MIT License,而产品使用的是这个 MICROSOFT SOFTWARE LICENSE TERMS,如果你想把 VSCode 用于商用,建议从源码构建出新的产品,而不是直接使用人家官网上提供下载链接的 VSCode Product。

我们先把源码 down 下来:

git clone --depth 1 https://github.com/microsoft/vscode.git

由于 VSCode 项目过于活跃,提交量非常庞大,到目前为止,已经有 56,092 次提交了,建议在下载源码的时候加了一句 --depth 1,意思就是只现在最近一次 commit 的代码。

30s 后……71M,不慢。

安装依赖

在安装依赖之前,我们不妨稍微分析下 VSCode 的项目结构,

➜  vscode (master) tree -L 1
.
├── CONTRIBUTING.md
├── LICENSE.txt
├── README.md
├── ThirdPartyNotices.txt
├── azure-pipelines.yml
├── build/
├── cglicenses.json
├── cgmanifest.json
├── extensions/
├── gulpfile.js
├── package.json
├── product.json
├── remote/
├── resources/
├── scripts/
├── src/
├── test/
├── tsfmt.json
├── tslint.json
└── yarn.lock

未来我们需要重点关注的是 src/extensions/ 两个目录,前者放的是 VSCode 的核心源码,后者放的是 VSCode 的内置插件。

眼神再晃动一下,应该还会看到几个熟悉的关键词,build/,gulpfile.js,package.json,tslint.jsonyarn.lock,由此,我们基本可以断定,这个仓库是一个用 TypeScript 开发,用 yarn 管理依赖,用 gulp 进行打包的 Node.js 项目,事实上她也是一个 Electron 项目。

好了,目录就看到这里,接着开始安装漫长的依赖安装:

➜  vscode (master) yarn

执行 yarn 后,VSCode 会干三件事情:

  • preinstall 脚本中对 yarn 的版本做判断
    • 要求必须 >=1.10.1
    • 并且只允许使用 yarn 来安装依赖,npm 安装会弹个错误
  • 安装 package.json 中描述的各个依赖
    • 很多依赖都需要重新编译,而编译过程经常会失败
    • 失败了怎么办?看错误提示,如果流程没中断,就让它一直跑下去
    • 一直卡着,好像不跑了怎么办?ctrl-c 终止进程后重新执行 yarn
  • postinstall 挨个安装 build/remote/test/extensions 等目录中的依赖
    • extension 的安装比较特殊,安装的过程中又会执行 updateGrammar 脚本

整个安装过程十分的慢,可以考虑泡杯咖啡打开电视剧……

执行了 yarn 整个安装并没有结束,剩下几步 VSCode 会在你执行 gulp 相关脚本的时候做检测,倘若资源不存在便会安装,由于很多资源都在墙外,我们还是分解下动作,分步手动下载:

1. 把 Electron 安装下来:

➜  vscode (master) yarn electron

如果下载太慢,建议在命令行开下代理:

➜  vscode (master) proxychains4 yarn electron

这里附加一个小插曲,

安装到半途时更换了下代理,应该是 gulp-vinyl-zip 这个包处理 buffer 异常,导致下次下载断点续传 buffer 位置对不上,然后每次执行 yarn electron 就直接退出进程,应该是个 bug;解决办法是,在这个包的 open() 方法里打个 log,把 path 打印出来,然后把打印出来的资源删掉就行了。

一小时后……

我已经不能忍了,电视剧都看了一集了,还是没下载完,其实 electron-v6.0.12-darwin-x64 这个文件只有 66.2M。

为了完成 electron 的安装,不得不附加第二个插曲,

还是得翻源码解决问题:之前可以通过全局配置 ELECTRON_MIRROR 的地址来选择 Electron 下载源,而最新版 VSCode 的 Electron 是直接从 github 上下载的,从 gulp-atom-electron 这个包的源码里断点找到了 asset 和 assetPath,手动将 asset 下载下来后放到 assetPath,解决了问题。

2. 把内置的几个依赖插件安装下来:

➜  vscode (master) yarn download-builtin-extensions

历时差不多一个小时,终于把依赖下载完成了,这是我安装依赖花的时间最长的一次,家里的网络还是比不上厂里自带翻墙功能的网络,衰……

构建程序

由于启动一次构建花费的时间太长,1~5min 不等(看机器性能和人品),所以我建议你使用 yarn watch 来构建,它会完成一次构建并监听文件的变化,后续不用重新构建。

构建完成以后,就可以执行命令打开 VSCode 的界面了,不过在打开之前,我意外地在 package.json 的 scripts 中发现,VSCode 竟然已经有 Web 版本了!!!

VSCode Web

这比我之前的预期要早了很多,很早就听说他们内部团队在搞 Web 版本了,没想到这么快就要面世了。社区上有一个基于 VSCode 搞的 Web 版,叫 Code-Server,Star 量有好几万,估计官方的 Web 版出来以后,code-server 就要凉凉了。

哦,把 web 版本跑起来的方式是:

# gulp watch 完成后执行
➜ vscode (master) yarn web

会自动弹开一个地址:http://localhost:8080/,目前 Web 版的功能还不完备,比如插件部分就没有适配,应该还在研发状态,连 inside 版本都没进。这也算是我写这个教程的第一个意外惊喜吧,看来我得重新研究下 VSCode 的源码了。

执行如下脚本,可以打开 VSCode 的客户端:

➜  vscode (master) ./scripts/code.sh

然后你就可以看到这样的界面了:

VSCode Client

如果你是 windows 系统,执行的脚本应该是 ./script/code.bat

小结

好了,本文的扫盲就到这里。

本文主要通过傻瓜式地教学,给大家演示了下,如何将源码变成我们熟悉的 VSCode 客户端,相信同学们在动手的过程中还会遇到各种依赖安装问题,不要灰心,实在不行就 rm -rf node_modules,然后重试。

下回再给大家讲述 如何开发和调试 VSCode 的源码