vscode源码解析（一） - 构建与调试

有问题欢迎后台私信我，帮你解决问题！

当我们要去分析某个项目的代码前，我们肯定要先让他跑起来，最好还能知道如何打断点进行调试

vscode也是一样的，这篇文章目的就是帮助你快速通过源码让一个vscode跑起来，并进行调试

本文主要参考官网的How to Contribute构建指导文档，你可以将官网文档与本文结合起来一起看，官网文档本身已经相当通俗易懂，但是由于国内的网络限制，会有一些坑，本文主要是帮助你闭坑的

开发环境准备

按照官网文档中的 Prerequisites 部分准备开发环境
官网已经说的很明确了，我就不赘述，但是如果大家有需要，可以私信我，如果人多我会写个中文版的

代码准备

vscode github项目源码地址

git clone https://github.com/microsoft/vscode.git

安装依赖

然后使用vscode打开该工程（是的，就是用vscode去调试vscode~），然后在IDE中打开一个终端用来构建

1. 替换项目中所有yarn.lock文件中的官方镜像源源为国内淘宝镜像源
   yarn.lock记录了项目所需依赖的下载地址，原先官方的下载地址在国内使用巨慢，所以替换成淘宝的镜像，速度成倍提升！
   IDE中全局搜索 https://registry.yarnpkg.com/ 并替换为 http://registry.npm.taobao.org
   
2. 设置环境变量，不下载playwright依赖所需的浏览器
   playwright是一个自动化测试工具，需要从外网下载多种浏览器，这个过程巨慢，我们可以先跳过，源码分析几乎用不到这个依赖，等到后续你需要看自动化测试部分再回来处理即可

$env:PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1

3. 下载依赖

yarn

编译与调试

1. 编译工程
   vscode是用typescript写的，typescript是javascrpt的超集，他是无法直接运行的，必须先编译成javascript文件才能正常运行
   我们只需要用下面的命令就能编译项目中的ts文件，该命令在编译完成后持续监控文件修改，并进行实时编译，让之后的代码修改变得十分方便

yarn watch

在你执行命令的终端中，如果出现了Finished compilation的日志，就说明已经工程已经编译好了

2. 打开调试面板，并点击 VS Code 进行调试
   vscode的调试配置有很多，我们先从VS Code这个最基础的熟悉，之后你可以慢慢探索其他部分的调试
   
3. 这个时候你就能看到一个调试版本的vscode启动了
   

试着打个断点

1. 我们回到打开了源码的IDE，打开文件，你可以直接搜索文本"New File"来找到对应内容
   src\vs\workbench\contrib\files\browser\views\explorerView.ts
   
2. 这个时候我们回到调试的vscode中，点击下方截图中的New File按钮
   
3. 这时你会发现进入到了我们刚刚设置的断点，在调试面板你能看到当前的变量、调用堆栈等等信息