???搭建項(xiàng)目開發(fā)工具IDE——Chapter 2 詳細(xì)分析VSCode開源代碼 Part 1 代碼結(jié)構(gòu)

導(dǎo)語：VSCode作為微軟推出的編輯器，在這幾年逐漸被越來越多的人接受。輕便、好用、易擴(kuò)展是他最重要的三個特點(diǎn)，其運(yùn)行速度較同為 Electron 架構(gòu)的Atom要快許多。微軟也將代碼開源放在GitHub上，一起來揭開vscode的神秘面紗吧。

  • 此文開始于2019-07-30 晚上12:43:35，參考的Vscode源碼版本為 1.19.3 VSCode v1.19.3，可直接下載ZIP壓縮包，源碼總大小11.7M。
  • VSCode開源代碼的Github地址為：https://github.com/microsoft/vscode
項(xiàng)目階段（持續(xù)更新）
  • [ ] 第一階段2019.07.28——介紹如何開發(fā)VSCode插件
  • [ ] 第二階段2019.08.09——詳細(xì)分析VSCode開源代碼 Part 1 代碼結(jié)構(gòu)
  • [ ] 第三階段2019.08.xx——詳細(xì)分析VSCode開源代碼 Part 2 源碼編譯運(yùn)行

一、項(xiàng)目架構(gòu)背景介紹

Electron

  • Electron 是基于 Node.js 和 Chromium 的跨平臺桌面應(yīng)用開發(fā)框架。使用 JavaScipt，HTML，CSS 真正將 Node.js 帶到了前端。Electron 通過 BrowserWindow 可以創(chuàng)建一個本地窗口，并加載一個HTML文檔，BrowserWindow中的內(nèi)容就是一個瀏覽器窗口，不僅能創(chuàng)建DOM元素，同時能使用任意的Node模塊，并且還可以通過IPC與主進(jìn)程通訊。

多進(jìn)程

  • 每一個 Electron 應(yīng)用都對應(yīng)一個主進(jìn)程(main process)， 主進(jìn)程通過BrowserWindow創(chuàng)建的每個本地窗口對應(yīng)一個渲染進(jìn)程(renderer process)。


    vscode-process.png

主進(jìn)程

  • vscode的主進(jìn)程主要負(fù)責(zé)創(chuàng)建窗口和菜單，生命周期管理，為進(jìn)程通信基站（IPC Server），自動更新，工具條菜單欄注冊等與系統(tǒng)相關(guān)的功能。

渲染進(jìn)程

  • 絕大多數(shù)代碼都是運(yùn)行在渲染進(jìn)程中的，渲染進(jìn)程負(fù)責(zé)界面的顯示，響應(yīng)用戶操作。前面說到在瀏覽器中也可以使用Node模塊，渲染進(jìn)程還通過Node創(chuàng)建了一個插件子進(jìn)程，負(fù)責(zé)插件的初始化。另外渲染進(jìn)程還可以創(chuàng)建Worker執(zhí)行一些復(fù)雜的計算，比如markdown的解析；需要跨renderer共享的用子進(jìn)程拆出去，交由main管理。

插件進(jìn)程

  • 每一個渲染進(jìn)程同時也對應(yīng)一個插件進(jìn)程，插件運(yùn)行在單獨(dú)的進(jìn)程不會對渲染進(jìn)程造成影響，這也是vscode比atom要快的原因。Atom中插件是直接運(yùn)行在渲染進(jìn)程中的，所以當(dāng)插件很多的時候會卡。同時又由于vscode的插件運(yùn)行在一個普通的Node進(jìn)程中，所以對UI的操作能力是比較弱的，這點(diǎn)不及Atom。

二、源碼分析基本結(jié)構(gòu)

將GitHub托管的vscode源碼clone下來，此處介紹的版本號為 1.19.3 VSCode v1.19.3。

目錄結(jié)構(gòu)

  • 只展示主要的文件及目錄
├── build           # gulp編譯構(gòu)建腳本
├── extensions      # 內(nèi)置插件
├── resources       # 平臺相關(guān)靜態(tài)資源，圖標(biāo)等
├── scripts         # 工具腳本，開發(fā)/測試
├── src             # 源碼目錄
├── test            # 測試套件
├── out             # 編譯輸出目錄（執(zhí)行編譯后會有）
├── i18n            # 國際化翻譯包（最新版本已經(jīng)移除，改用第三方插件形式下載使用）
├── package.json    # 項(xiàng)目配置文件
├── product.json    # App meta信息
└── gulpfile.js     # gulp task
  • src目錄結(jié)果
├── bootstrap-amd.js  # 子進(jìn)程實(shí)際入口
├── bootstrap.js  # 子進(jìn)程環(huán)境初始化
├── buildfile.js  # 構(gòu)建config
├── cli.js        # CLI入口
├── main.js       # 主進(jìn)程入口
├── paths.js      # AppDataPath與DefaultUserDataPath
├── typings
│   └── xxx.d.ts  # ts類型聲明
└── vs
    ├── base      # 通用工具/協(xié)議和UI庫
    │   ├── browser # 基礎(chǔ)UI組件，DOM操作、交互事件、DnD等
    │   ├── common  # diff描述，markdown解析器，worker協(xié)議，各種工具函數(shù)
    │   ├── node    # Node工具函數(shù)
    │   ├── parts   # IPC協(xié)議（Electron、Node），quickopen、tree組件
    │   ├── test    # base單測用例
    │   └── worker  # Worker factory和main Worker（運(yùn)行IDE Core：Monaco）
    ├── code        # VS Code主窗體相關(guān)
    ├── editor        # 對接IDE Core（讀取編輯/交互狀態(tài)），提供命令、上下文菜單、hover、snippet等支持
    ├── platform      # 支持注入服務(wù)和平臺相關(guān)基礎(chǔ)服務(wù)（文件、剪切板、窗體、狀態(tài)欄）
    ├── workbench     # 協(xié)調(diào)editor并給viewlets提供框架，比如目錄查看器、狀態(tài)欄等，全局搜索，集成Git、Debug
    ├── buildunit.json
    ├── css.build.js  # 用于插件構(gòu)建的CSS loader
    ├── css.js        # CSS loader
    ├── loader.js     # AMD loader（用于異步加載AMD模塊，類似于require.js）
    ├── nls.build.js  # 用于插件構(gòu)建的NLS loader
    └── nls.js        # NLS（National Language Support）多語言loader
與業(yè)務(wù)相關(guān)的關(guān)鍵部分
  • src/vs/code：主窗體、工具欄菜單創(chuàng)建
  • src/vs/editor：代碼編輯器，IDE核心相關(guān)
  • src/vs/workbench：UI布局，功能服務(wù)對接
src下的重要文件（夾）
base

base包封裝了大量API，實(shí)現(xiàn)常用功能。在vscode中目錄結(jié)構(gòu)都是都是按照browser，common，node，electron的方式劃分的。

  • browser

browser中實(shí)現(xiàn)了一個簡單的UI庫，包括 Button，CheckBox，List，Scrollbar等常用組件。并且封裝了一套類似JQuery的DOM操作API(參見 dom.ts 和 builder.ts)。

  • common

common包中封裝了大量實(shí)用工具類。如

  1. arrays.ts，strings.ts，objects.ts 封裝了一套類似underscore的api。
  2. uri.ts 和 paths.ts 實(shí)現(xiàn)了路徑解析功能。
  3. winjs.base.js 實(shí)現(xiàn)了一個功能強(qiáng)大的Promise。
  4. 另外還有很多其他的工具類，每一個模塊的耦合度都很低，基本都可以單獨(dú)拿出來用，學(xué)習(xí)起來也和容易。這里就不一一介紹了。
  • node

node包中封裝了一些node實(shí)現(xiàn)的功能。如

  1. extfs.ts 和 pfs.ts 封裝了文件操作相關(guān)的api。
  2. request.ts 封裝了網(wǎng)絡(luò)請求的api，能方便的發(fā)送網(wǎng)絡(luò)請求，加載json，下載文件。
  3. service.cp.ts 和 service.net.ts 封裝了socket和進(jìn)程通訊的api。
  4. zip.ts 封裝了解壓縮文件的操作
  • parts

這個包額外定義了一些復(fù)雜的UI組件，tree 和 quickopen。

editor and language

本篇主要了解vscode基本框架的結(jié)構(gòu)，這兩包作為編輯器功能的主要實(shí)現(xiàn)，這里面的邏輯太復(fù)雜就不細(xì)說了。

platform and workbench

vscode中基本所有的具體功能實(shí)現(xiàn)代碼都在這兩包中。platform主要定義了一些服務(wù)的接口和簡單實(shí)現(xiàn)，workbench則實(shí)現(xiàn)了這些接口，并且創(chuàng)建了一個工作臺，構(gòu)建了一個完整界面結(jié)構(gòu)。

每層按目標(biāo)執(zhí)行環(huán)境細(xì)分組織結(jié)構(gòu)（部分重要）：

  • common：可跨環(huán)境復(fù)用的
  • browser：依賴瀏覽器API的，比如DOM操作
  • node：依賴Node API的
  • electron-browser：依賴electron renderer-process API的
  • electron-main：依賴electron main-process API的

★ IDE Core可獨(dú)立使用，Monaco可以直接生成編輯器頁面。Monaco的github倉庫

vscode-Monaco.png

下一節(jié)：第三階段——詳細(xì)分析VSCode開源代碼 Part 2 源碼編譯運(yùn)行

部分圖片、文字摘取自：

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容