Visual Studio Code
是微软推出的一款轻量级编辑器,与它一起在市场争锋的相似软件还有 Atom
和 Sublime Text
,面世第二年的它只占据 7%
左右的市场,后来在短短三年时间雄踞了半壁江山,不可谓不哇塞。
近日,微软在 Ignite 2019
大会上,正式发布了 「Visual Studio Online」。其中包含了微软托管的 Web
版 VSCode
,如今又发布了 VSCode 1.40
,该版本已经支持开发者直接从 VSCode
的源代码编译出 Web
版 VSCode
,本文就将给大家介绍下如何用源代码自行构建 VSCode
和在本地运行 Web
版的 VSCode
的方法。
Visual Studio Code
简称 VSCode
。需要注意的是,平时我们使用的 VSCode
是产品,而下面我们要介绍的是源码,产品是源码的构建结果。源码使用的 MIT License
,而产品使用的是 MICROSOFT SOFTWARE LICENSE TERMS
。如果你想把 VSCode
用于商用,建议从源码构建出新的产品,而不是直接使用官网上提供下载链接的 VSCode Product
。
我们先把源码下载下来。
$ 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
的版本做判断yarn
来安装依赖,npm
安装会提示错误package.json
中描述的各个依赖ctrl-c
终止进程后重新执行 yarn
postinstall
会逐个安装 build/remote/test/extensions
等目录中的依赖extension
的安装比较特殊,安装的过程中又会执行 updateGrammar
脚本执行完 yarn
后,整个安装并没有结束。剩下几步 VSCode
会在你执行 gulp
相关脚本的时候做检测。倘若资源不存在便会安装,由于很多资源都在墙外,我们还是分解下动作,分步手动下载:
➜ 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
。
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
。