第一篇： vscode源碼分析【一】從源碼運作vscode
第二篇：vscode源碼分析【二】程式的啟動邏輯，第一個視窗是如何建立的
第三篇：vscode源碼分析【三】程式的啟動邏輯，性能問題的追蹤
第四篇：vscode源碼分析【四】程式啟動的邏輯，最初建立的服務
第五篇：vscode源碼分析【五】事件分發機制
第六篇：vscode源碼分析【六】服務執行個體化和單例的實作
第七篇：vscode源碼分析【七】主程序啟動消息通信服務
第八篇：vscode源碼分析【八】加載第一個畫面
在上一節中，我們講到加載第一個畫面時，加載了一個workbench.js
（src\vs\code\electron-browser\workbench\workbench.js）
這個檔案中執行了：
加載了workbench.main，這個檔案負責初始化界面需要用到的庫
它本身不負責執行任何邏輯，但卻加載了三百多個類，哈！
bootstrapWindow.load的回調方法裡，執行了：
這句代碼很重要
我們看看這個類的main方法；它執行了：
CodeRendererMain類也在同一個檔案裡
（src\vs\workbench\electron-browser\main.ts）
它的構造函數裡做了一些初始化工作（界面縮放事件設定、檔案讀寫庫的設定等）
不重要，先不理會，先看open方法：
你看到，我們把body傳給了workbench的執行個體
workbench的構造函數裡，并沒有用這個body做什麼事情；
而是把他傳遞給了它的父類：Layout（src\vs\workbench\browser\layout.ts），存儲在父類parent屬性裡
這個類很重要，我們待會兒會說；
現在我們看看workbench的startup方法
initLayout方法，初始化了一堆服務（environmentService，lifecycleService等），監聽了一堆事件（全屏、編輯器顯隐等）
renderWorkbench方法（最重要！），給body和一個叫container的元素加了一系列的樣式；
container元素是在父類Layout裡初始化的，這個元素最終會是所有元件的父親；
之後，給container元素加了幾個子元素：
這幾個子元素分别是最左側的ACTIVITYBAR_PART，中間的EDITOR_PART，等等（注意：視窗的菜單欄也是他自己渲染的）
這些元素建立出來之後，就加入到container裡去了；
然後把container加入到body裡去了（parent存的是body）
在startup方法裡還調用了this.layout()方法
在這裡把container放到到最大，占據整個body
至此界面主要元素渲染完成！
另外：
想調試界面裡的内容，就不能用第一節講的調試方法來調試了；
你可以運作：
先啟動畫面，然後按Ctrl+Shift+i打開調試視窗；
如果需要重新整理畫面的話，可以按Ctrl+R重新整理畫面；