| 你会在本地搭建 Web 版 VS Code 吗，看完这一篇你就能轻松实现了！ | 您所在的位置：网站首页 › vscode社区微软 › 你会在本地搭建 Web 版 VS Code 吗，看完这一篇你就能轻松实现了！ |
你会在本地搭建 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。 官网地址：https://code.visualstudio.com/源码地址：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 终止进程后重新执行 yarnpostinstall 会逐个安装 build/remote/test/extensions 等目录中的依赖extension 的安装比较特殊，安装的过程中又会执行 updateGrammar 脚本整个安装过程十分的慢，可以考虑泡杯咖啡打开电视剧……执行完 yarn 后，整个安装并没有结束。剩下几步 VSCode 会在你执行 gulp 相关脚本的时候做检测。倘若资源不存在便会安装，由于很多资源都在墙外，我们还是分解下动作，分步手动下载： 把 Electron 安装起来➜ vscode (master) yarn electron如果下载太慢，建议在命令行打开下代理。 ➜ 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，版权归原作者所有。欢迎投稿，投稿邮箱: [email protected] 。 |
【本文地址】