標籤：

Dive Into Code: VSCode 源碼閱讀（一）

04-30

作者簡介 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 dont, 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 its 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 apps 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 的內置擴展內，一大部分都是各種編程語言的支持擴展，如：extensionshtml、extensionsjavascript、extensionscpp等等，大部分語言擴展中都會出現如.tmTheme、.tmLanguage等 TextMate 的語法定義。

還有一類內置的擴展是 VSCode 主體擴展，如 VSCode 默認主體extensions/theme-defaults等。

參考

  • Electron 應用結構
  • Wiki: Code Organization
  • Dependency Injection
  • InversifyJS

本篇簡單了介紹了在 VSCode 源碼閱讀之前的需要的一些準備工作，主要是 Electron 應用的結構、依賴注入設計模式、和 VSCode 源代碼和大體組織情況。

下篇預告：從命令行輸入code命令到出現 VSCode 桌面應用程序，VSCode 的代碼是的執行流程是怎樣的？

對我們團隊感興趣的可以關注專欄，關注github或者發送簡歷至tao.qit####alibaba-inc.com.replace(####, @)，歡迎有志之士加入~

原文地址：github.com/ProtoTeam/bl


推薦閱讀：

※丁香園開源介面管理系統 - API Mocker
※如何將喜歡的響應式網站變成APP – manifest icon製作教程無標題文章
※來 DIY 個機器人 - 收藏集 - 掘金
※結合源碼分析 Node.js 模塊載入與運行原理
※Ajax進行中。。

TAG:源碼閱讀 | 前端工程師 | 前端開發 |