你会在本地搭建 Web 版 VS Code 吗，看完这一篇你就能轻松实现了！

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

近日，微软在 Ignite 2019 大会上，正式发布了 「Visual Studio Online」。其中包含了微软托管的 Web 版 VSCode，如今又发布了 VSCode 1.40 ，该版本已经支持开发者直接从 VSCode 的源代码编译出 Web 版 VSCode，本文就将给大家介绍下如何用源代码自行构建 VSCode 和在本地运行 Web 版的 VSCode 的方法。

下载 VS Code 源码

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

1. 官网地址：https://code.visualstudio.com/
2. 源码地址：https://github.com/microsoft/vscode

我们先把源码下载下来。

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

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

安装相关依赖

在安装依赖之前，我们不妨稍微分析下 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.json 和 yarn.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

1. 把内置的几个依赖插件安装起来

➜  vscode (master) yarn download-builtin-extensions

如果你的网络不给力，整个过程或许会耗时很久。我这里历时差不多一个小时，终于把依赖下载完成了，这是我安装依赖花的时间最长的一次。

构建程序

构建客户端版本

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

构建完成以后，你就可以执行以下命令打开 VSCode 的客户端界面了。

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

命令成功执行后，就可以看到以下的界面了。

如果你是 Windows 系统，执行的脚本应该是 ./script/code.bat 。

构建 Web 版本

VSCode 1.40 及以上版本现在已经自带支持 Web 版本了，在这之前也有一个基于 VSCode 的 Web 版，叫 Code-Server。如果你感兴趣可以在「推荐一款支持在浏览器上运行 VS Code 的服务端神器 Code-Server」一文中进行了解！

构建 Web 版本的方法非常简单，只需运行下面的命令即可。

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

构建完成后，会自动在浏览器窗口中打开地址为 http://localhost:8080/ 的 Web 版本 VSCode。

小结

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

本文转载自：「小胡子哥的个人网站」，原文：https://url.cn/5NFuJf8，版权归原作者所有。欢迎投稿，投稿邮箱: editor@hi-linux.com 。