技术介绍

学习VSCode源码的同学基本上都是做前端工作的，那么node.js和javascript都是基本功了，这里不用过分强调了。但是在阅读VSCode源码之前，还是需要对VSCode使用相关技术框架有所了解。

Electron介绍

众所周知，VSCode是一款桌面编辑器应用，但是前端单纯用js是做不了桌面应用的，所以采用Electron来构建。Electron是基于 Chromium 和 Node.js，使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用，它兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。 从实现上来看，Electron = Node.js + Chromium + Native API

也就是说Electron拥有Node运行环境，赋予了用户与系统底层进行交互的能力，依靠Chromium提供基于Web技术（HTML、CSS、JS）的界面交互支持，另外还具有一些平台特性，比如桌面通知等。

从API设计上来看，Electron App一般都有1个Main Process和多个Renderer Process：

• main process：主进程环境下可以访问Node及Native API
• renderer process：渲染器进程环境下可以访问Browser API和Node API及一部分Native API

主进程和渲染进程

在Electron应用中，通过执行package.json中的main字段所指向的文件，可以开启electron的主进程（main process）。在主进程中使用BrowserWindow 实例创建web页面，而且一个electron应用有且只能有一个主进程。 主进程一般用于：

• 多窗体管理（创建/切换）
• 应用生命周期管理
• 作为进程通信基站（IPC Server）
• 工具条菜单栏注册

由于electron使用Chromium来展示web页面，Chromium多进程架构也会被用到。每一张web页面都运行在它自己的进程里，该进程称为渲染进程（renderer process）。渲染进程一般负责界面交互相关的，具体的业务功能。

在web页面里，调用系统底层的API是不被允许的，这是因为在web页面上处理底层GUI资源是非常危险的，很容易导致资源泄漏。如果你想要在web页面上执行GUI操作，相应web页面的渲染进程必须与主进程进行通信，向主进程发起请求去执行那些操作.在electron中，有几种主进程与渲染进程通信的方法，比如用ipcRenderer和ipcMain模块来发送信息，还有RPC风格的远程通信模块。关于Electron进程间通讯，这里不做过多的介绍，可以看Electron官网和网上资料来学习主进程和渲染进程间通讯。

更多的了解可以参考Electron应用架构

编辑器Monaco Editor

微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于electron，所以功能上VSCode更加健全，并且性能比较强大。

TypeScript

TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统中运行，并且是开源的。TypeScript具有以下特点：

• 类型批注和编译时的类型检查
• 强类型语言
• 面向对象
• 类class
• 接口
• lambda函数
• 泛型

VSCode源码的编写主要用TypeScript，所以学习VSCode源码的时候还是先对TypeScript的基本使用有所了解。

以上内容是学习VSCode源码所要了解的基本内容，可以先学习Electron做个简单的桌面应用，然后学习一下TypeScript的基本语法，就可以开始VSCode源码的学习。