iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 2
0
Software Development

自己用的工具自己做! 30天玩轉VS Code Extension之旅系列 第 2

Day02 | VSCode使用者介面概覽

今天是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的觀念。

本日參考文件



上一篇
Day01 | 前言
下一篇
Day03 | VSCode使用者與工作區設定
系列文
自己用的工具自己做! 30天玩轉VS Code Extension之旅36

尚未有邦友留言

立即登入留言