Dive Into Code: VSCode 源码阅读（一）

avatar
数据可视化 @蚂蚁集团

作者简介 zqlu 蚂蚁金服·数据体验技术团队

VS Code 是一款新的工具，它将代码编辑器的简洁和程序开发人员在开发-构建-调试流程中所需要的工具结合在一起。Code 提供了全面的编辑和调试功能支持、一个可扩展的模型、和与现有工具的轻量化集成。

这是 VSCode Github 仓库上的介绍，如今，VSCode 的 Github Star 数已达 4.7 万，VSCode 采用了 Electron，使用的代码编辑器名为 Monaco、Monaco 也是 Visual Studio Team Service（Visual Studio Online）使用的代码编辑器，在语言上，VSCode 使用了自家的 TypeScript 语言开发。

在开始 VSCode 本身源码的解析之前，首先来看 VSCode 依赖的 Electron，理解了 Electron 可以更好的理解 VSCode 的代码组织和依赖关系；其次是在 VSCode 源码中使用到的的依赖注入模式。

Electron

Electron 是一款可以前端使用 HTML、JavaScript 和 CSS 开发桌面应用程序的框架，关于 Electron 介绍的资料很多。我们可以看看 Electron 官网提供的快速启动应用程序实例：

其中package.json定义如下，注意其中的main字段和start脚本：执行npm start即启动这个 Electron 应用：

{
	"name": "electron-quick-start",
	"version": "1.0.0",
	"description": "A minimal Electron application",
	"main": "main.js",
	"scripts": {
		"start": "electron ."
	},
	"repository": "https://github.com/electron/electron-quick-start",
	"keywords": ["Electron", "quick", "start", "tutorial", "demo"],
	"author": "GitHub",
	"license": "CC0-1.0",
	"devDependencies": {
		"electron": "~1.7.8"
	}
}

然后看main.js脚本：

const electron = require('electron');
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

function createWindow() {
	// Create the browser window.
	mainWindow = new BrowserWindow({ width: 800, height: 600 });

	// and load the index.html of the app.
	mainWindow.loadURL(
		url.format({
			pathname: path.join(__dirname, 'index.html'),
			protocol: 'file:',
			slashes: true,
		}),
	);

	// Open the DevTools.
	// mainWindow.webContents.openDevTools()

	// Emitted when the window is closed.
	mainWindow.on('closed', function() {
		// Dereference the window object, usually you would store windows
		// in an array if your app supports multi windows, this is the time
		// when you should delete the corresponding element.
		mainWindow = null;
	});
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function() {
	// On OS X it is common for applications and their menu bar
	// to stay active until the user quits explicitly with Cmd + Q
	if (process.platform !== 'darwin') {
		app.quit();
	}
});

app.on('activate', function() {
	// On OS X it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (mainWindow === null) {
		createWindow();
	}
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

可以看到，main脚本主要定义了应用对几个事件的处理函数，其中对ready事件的处理函数中，创建了一个BrowseWindow对象，并且去加载index.html页面。

在index.html中，又通过 script 标签去加载了renderer.js脚本：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

到此，Electron 的快速启动实例应用程序就完成了，执行npm start后，就可以看到界面上展示index.html中的内容了。

我们首先需要了解的是在上面 Electron 应用中会遇到的两种进程类型，以及它们的区别，它们称为主进程和渲染进程。

首先看主进程和渲染进程的定义：

在 Electron 应用中，package.json中的main脚本运行所在的进程被成为主进程，在主进程中运行的脚本通过创建 web 页面来展示用户界面。一个 Electron 应用总是有且只有一个主进程。由于 Electron 使用了 Chromium 来展示 web 页面，所以在 Chromium 的多进程架构也被使用到。每个 Electron 中的 web 页面运行在它自己的渲染进程中。在普通的浏览器中，web 页面通常在一个沙盒环境中运行，不被允许去接触原生的资源。然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。

主进程和渲染进程之间的区别：

主进程使用BrowseWindow实例创建页面，每个BrowseWindow实例都在自己的渲染进程里运行页面。当一个BrowseWindow实例被销毁后，相应的渲染进程也会被终止。主进程管理所有的 web 页面和它们对应的渲染进程。每个渲染进程都是独立的，它至关心它所运行的 web 页面。

对开发者来说，比较关心的是主进程和渲染进程中的脚本分别可以使用哪些 API。

首先 Electron API 提供了丰富的 API，其中一些 API 只能在主进程中使用，又有一些 API 只能在渲染进程中使用，而有一些主进程和渲染进程都可以使用。

然后对于 Node.js 的 API，以及第三方 npm 包，主进程和渲染进程都可以直接使用。

最后，由于渲染进程运行在 chromium 的页面中，所有还可以是有浏览器提供的 API，如 DOM 操作 API 等。

API 主进程 渲染进程
Electron API 部分 部分
Node.js API/module 是 是
浏览器 API 否 是

在了解了 Electron 之后，后面我们会看到 VSCode 中哪些代码是运行在主进程中，哪些代码是运行在渲染进程中。

依赖注入

依赖注入作为一个设计模式，前端开发者可能使用的不多，但在 VSCode 的源码中随处可见，所以这里简单介绍下。首先看依赖注入的定义：

在软件工程中，依赖注入是一种为一类对象提供依赖的对象的设计模式。被依赖的对象称为Service，注入则是指将被依赖的对象Service传递给使用服务的对象(称为Client)，从而客户Client不需要主动去建立(new)依赖的服务Service，也不需要通过工厂模式去获取依赖的服务Service。

在典型的依赖注入模式中，存在以下几类角色：

  • 被依赖和使用的对象，即Service
  • 使用服务的客户对象，即Client
  • 客户使用服务的接口定义，Interface
  • 注入器：负责建立服务对象并提供给 Client，通常也负责建立客户对象

而依赖注入的实现有几种形态，其中常见的一种的构造函数式的依赖注入：Client 在其构造函数的参数中申明所依赖的 Service，如下 TypeScript 代码所示：

class Client {
	constructor(serviceA: ServiceA, serviceB: ServiceB) {
		// 注入器在建立Client的时候，将依赖的 Service 通过构造函数参数传递给 Client
		// Client此时即可将依赖的服务保存在自身状态内：
		this.serviceA = serviceA;
		this.serviceB = serviceB;
	}
}

通过这种模式，Client 在使用的时候不需要去自己构造需要的 Service 对象，这样的好处之一就就是将对象的构造和行为分离，在引入接口后，Client 和 Service 的依赖关系只需要接口来定义，Client 在构造函数参数中主需要什么依赖的服务接口，结合注入器，能给客户对象更多的灵活性和解耦。

最后，在 VSCode 的源码中，大部分基础功能是被实现为服务对象，一个服务的定义分为两部分：

  • 服务的接口
  • 服务的标识：通过 TypeScript 中的装饰器实现

Client 在申明依赖的 Service 时，同样时在构造函数参数中申明，实例如下：

class Client {
	constructor(
		@IModelService modelService: IModelService,
		@optional(IEditorService) editorService: IEditorService,
	) {
		// ...
		this.modelService = modelService;
		this.editorService = editorService;
	}
}

这里，申明的客户对象Client，所依赖的Service有IModelService和IEditorService，其中装饰器@IModelService是 ModelService 的标识，后面的IModelService只是 TypeScript 中的接口定义；@optional(IEditorService)是 EditorService 的标识，同时通过optional的装饰申明为可选的依赖。

最后，在代码是实际使用Client对象时，需要通过注入器提供的instantiationService来实例化的到 Client 的实例：

const myClient = instantiationService.createInstance(Client);

源码组织

在了解了 Electron 和依赖注入之后，我们就可以来看看 VSCode 自身的源代码组织了。

VSCode Core

首先 VSCode 整体由其核心core和内置的扩展Extensions组成，core是实现了基本的代码编辑器、和 VSCode 桌面应用程序，即 VSCode workbench；同时提供扩展 API，允许内置的扩展和第三方开发的扩展程序来扩展 VSCode Core 的能力。

首先看Core的源码组织，Core的源代码分为下列目录：

  • src/vs/base: 定义基础的工具方法和基础的 DOM UI 控件
  • src/vs/code: Monaco Editor 代码编辑器：其中包含单独打包发布的 Monaco Editor 和只能在 VSCode 的使用的部分
  • src/vs/platform: 依赖注入的实现和 VSCode 使用的基础服务 Services
  • src/vs/workbench: VSCode 桌面应用程序工作台的实现
  • src/vs/code: VSCode Electron 应用的入口，包括 Electron 的主进程脚本入口

其次，由于 VSCode 依赖 Electron，而在上述我们提到了 Electron 存在着主进程和渲染进程，而它们能使用的 API 有所不到，所以 VSCode Core 中每个目录的组织也按照它们能使用的 API 来组织安排。在 Core 下的每个子目录下，按照代码所运行的目标环境分为以下几类：

  • common: 只使用 JavaScript API 的源代码，可能运行在任何环境
  • browser: 需要使用浏览器提供的 API 的源代码，如 DOM 操作等
  • node: 需要使用Node.js提供的 API 的源代码
  • electron-browser: 需要使用 Electron 渲染进程 API 的源代码
  • electron-main: 需要使用 Electron 主进程 API 的源代码

按照上述规则，即src/vs/workbench/browser中的源代码只能使用基本的 JavaScript API 和浏览器提供的 API，而src/vs/workbench/electron-browser中的源代码则可以使用 JavaScript API，浏览器提供的 API、Node.js提供的 API、和 Electron 渲染进程中的 API。

VSCode Extensions

在 VSCode 代码仓库中，出了上述的src/vs的Core之外，还有一大块即 VSCode 内置的扩展，它们源代码位于extensions内。

首先 VSCode 作为代码编辑器，但与各种代码编辑的功能如语法高亮、补全提示、验证等都时有扩展实现的。所以在 VSCode 的内置扩展内，一大部分都是各种编程语言的支持扩展，如：extensions\html、extensions\javascript、extensions\cpp等等，大部分语言扩展中都会出现如.tmTheme、.tmLanguage等 TextMate 的语法定义。

还有一类内置的扩展是 VSCode 主体扩展，如 VSCode 默认主体extensions/theme-defaults等。

参考

本篇简单了介绍了在 VSCode 源码阅读之前的需要的一些准备工作，主要是 Electron 应用的结构、依赖注入设计模式、和 VSCode 源代码和大体组织情况。

下篇预告：从命令行输入code命令到出现 VSCode 桌面应用程序，VSCode 的代码是的执行流程是怎样的？

对我们团队感兴趣的可以关注专栏，关注github或者发送简历至'tao.qit####alibaba-inc.com'.replace('####', '@')，欢迎有志之士加入~

原文地址：github.com/ProtoTeam/b…

avatar
文章
阅读
粉丝