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。
- 官网地址：https://code.visualstudio.com/
- 源码地址：https://github.com/microsoft/vscode
我们先把源码下载下来。
代码语言：javascript复制$ 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 项目。
好了，目录就介绍到这里了，接着开始进行漫长的依赖安装。
代码语言：javascript复制➜ 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 相关脚本的时候做检测。倘若资源不存在便会安装，由于很多资源都在墙外，我们还是分解下动作，分步手动下载：
- 把 Electron 安装起来
➜ vscode (master) yarn electron如果下载太慢，建议在命令行打开下代理。
代码语言：javascript复制➜ vscode (master) proxychains4 yarn electron- 把内置的几个依赖插件安装起来
➜ 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。
