今天是Day2，我會概括介紹VSCode的介面與相關說明，這是VSCode Extension開發的基礎。

VSCode介面基本佈局

VSCode的設計理念是希望可以提供簡單直覺的工具，讓使用者可以直觀的選取檔案並閱覽、編輯檔案，在外觀佈局上也與常見的IDE介面相近，其用戶界面可分為五大部分。

1. Editor：直譯為編輯器。呈現、編輯檔案的主要區域，Editor Group內可以有多個editor，我們可以在此區域打開多個Editor，自由決定這些editor要並排還是垂直排列。

2. Side Bar：直譯為側邊條，用於呈現不同功能的view視圖，我們最常用的view是explorer，explorer將專案檔案以樹狀選單呈現，讓我們瀏覽選取專案裡的不同資料夾跟檔案，為開發者最常接觸到的的元件選單。

3. Activity Bar： 直譯為活動條。是IDE最左邊的側欄，上面置放多個Icon按鈕，點擊可以展開跟關閉SideBar，並根據點擊的不同icon呈現不同功能的view，點擊從上到下的五個icon分別會呈現explorer、search、source control(GIT)、debug、extension等視圖。

4. Status Bar: 直譯為狀態條，最下方的藍色邊條，用於呈現開啟且在activity狀態的editor的資訊，如當前光標所在的line、column位置，縮排一次右移幾個column(tab size)，編輯檔案的語言...等等。

5. Panels: 直譯為面板，面板主要用於呈現extenison的output、debug的資訊，程式碼的問題以及整合進vscode的termimal，這些功能透過panel中左上方對應文字的tab切換。

這幾大區域真的提供了的非常豐富的功能，擴展性也非常好。但是，當我們只想用到需要的功能，專注在重點的程式碼部分，有沒有辦法將其關閉呢？為此，VSCode為使用者提供了ZenMode模式，讓我們繼續看下去~

Zen Mode

作為開發者，我們能夠在VSCode上使用多種輔助功能和UI，但UI一多可能就會讓我們焦點分散，因此VSCode提供了ZenMode，ZenMode的目的是可以讓我們專注在最重要的內容，也就是程式碼上。因此，當我們開啟ZenMode，除了Editor Group，其他的幾個區域都會消失。現在，讓我們開啟ZenMode吧，

• 使用Command Palette啟動VSCode內建command指令

當我們在VSCode的時候，我們可以透過Commamd Palette來呼叫VSCode的Command指令來做事情。

首先點擊⌘(command) + shift + p，會跳出一個內有>符號的輸入欄跟選單，可以讓我們輸入名稱找到對應的Command，因為我們是要開啟ZenMode，所以可以直接鍵入Ze當關鍵字，Command Palette會幫助我們找到對應的指令，並將符合條件的指令呈現在最上方，如下圖所示。

這個部分官方文件是推薦使用快捷鍵查找command，筆者這裡為了讓讀者能熟悉command palette的特性，所以使用搜尋的方式，讀者有興趣亦可在查找到對應的指令後，透過選單右邊的快捷鍵提示快速啟動ZenMode喔。

Ok, 現在讓我們按下View: Toggle Zen Mode的指令吧！

讓我們看看結果：

恭喜，現在我們成功的進入ZenMode了！如果想離開ZenMode，就在執行一次同樣的指令，即可關閉Zen模式囉。

當我們想在ZenMode中打開其中幾個元件，可以使用打開這幾個元件的快捷鍵。以panel為例，當我們在ZenMode，使用panel的快捷鍵，即可開啟跟關閉panel以使用terminal。

可供擴展的Workbench

現在，我們已經了解VSCode的五大部分，也在一個實際的情境使用過Command指令了。讓我們再深入一點來了解這幾個部分吧，事實上，在VSCode裡，這五個部分(Activity Bar, Side Bar, Panel, Editor Group, Status Bar)，以及其他常見的元件如Title Bar、Webview(如VSCode的markdown視圖)，在VSCode的extension api裡，同屬於Workbench底下，Workbench直譯為工作台，透過extension api，我們可以任意擴展這些workbench底下的元件，當我們要在vscode的相關設定檔設定跟這些元件相關的個人配置時，也是要在workbench的namespace底下配置他們。

讓我們看一下明天會介紹到的VSCode的Settings.json的預設設定裡跟Workbench有關的設定吧

{
  ...

  // Controls whether opening keybinding settings also opens an editor showing all default keybindings.
  "workbench.settings.openDefaultKeybindings": false,

  // Controls whether opening settings also opens an editor showing all default settings.
  "workbench.settings.openDefaultSettings": false,

  // Controls whether to use the split JSON editor when editing settings as JSON.
  "workbench.settings.useSplitJSON": false,

  // Controls the location of the sidebar and activity bar. They can either show on the left or right of the workbench.
  "workbench.sideBar.location": "left",

  // Controls tree indentation in pixels.
  "workbench.tree.indent": 8,

  // Controls whether the tree should render indent guides.
  "workbench.tree.renderIndentGuides": "onHover",

  // Controls the visibility of view header actions. View header actions may either be always visible, or only visible when that view is focused or hovered over.
  "workbench.view.alwaysShowHeaderActions": false,

  ...

}

2020.09.18 更新： 刪除過多的default Settings，避免佔據太多篇幅。

閱讀這些設定檔可以發現，透過workbench的namespace可以找到跟我們提的元件相關的設定。相信只要有些基本的英文程度，再加上之前了解的workbench的觀念，可以更快速的掌握怎麼使用這些設定檔。這是我們明天學習的主題，這裡我先賣個關子，讓我們明天一起學習相關的內容，我們明天見，掰掰！

事實上，在settings.json中，editor也有獨立的namespace以及重要的config，此處為了提示讀者透過觀念讓自己更深入理解跟快速掌握相關設定，因此特別強調workbench的namespace的觀念。

本日參考文件

• Extending Workbench

• User Interface