UX 指南
這些指南涵蓋建立能與 VS Code 原生介面和模式無縫整合的擴充功能的最佳實務。在這些指南中，您可以找到
- VS Code 整體 UI 架構和元素的概要
- 擴充功能貢獻的 UI 建議和範例
- 相關指南和範例的連結
在深入探討細節之前，務必先了解 VS Code 各個架構 UI 部分如何組合在一起，以及您的擴充功能可以在何處貢獻。
容器
VS Code 介面大致可分為兩個主要概念：容器和項目。一般來說，容器可以視為 VS Code 介面中較大的區段，用於呈現一或多個項目
活動列
活動列是 VS Code 中的核心導覽介面。擴充功能可以將項目貢獻到活動列，作為檢視容器，在主要側邊欄中呈現檢視。
主要側邊欄
主要側邊欄呈現一或多個檢視。活動列和主要側邊欄緊密結合。按一下貢獻的活動列項目 (讀作：檢視容器) 會開啟主要側邊欄，其中將呈現與該檢視容器關聯的一或多個檢視。一個具體的範例是 Explorer。按一下 Explorer 項目將會開啟主要側邊欄，其中可見資料夾、時間軸和大綱檢視。
次要側邊欄
次要側邊欄也作為呈現包含檢視的檢視容器的介面。使用者可以將終端機或問題檢視等檢視拖曳到次要側邊欄，以自訂其版面配置。
編輯器
編輯器區域包含一或多個編輯器群組。擴充功能可以貢獻自訂編輯器或 Webview 以在編輯器區域中開啟。它們也可以貢獻編輯器動作，以在編輯器工具列中公開其他圖示按鈕。
面板
面板是另一個用於公開檢視容器的區域。預設情況下，終端機、問題和輸出等檢視一次可以在面板中的單一索引標籤中檢視。使用者也可以將檢視拖曳到分割版面配置中，就像在編輯器中一樣。此外，擴充功能可以選擇將檢視容器專門新增到面板，而不是活動列/主要側邊欄。
狀態列
狀態列提供有關工作區和目前使用中檔案的內容相關資訊。它會呈現兩組狀態列項目。
項目
擴充功能可以將項目新增到上面列出的各種容器。
檢視
檢視可以以 樹狀檢視、歡迎檢視 或 Webview 檢視 的形式貢獻，並且可以拖曳到介面的其他區域。
檢視工具列
擴充功能可以公開檢視特定的動作，這些動作會顯示為檢視工具列上的按鈕。
側邊欄工具列
範圍限定於整個檢視容器的動作也可以在側邊欄工具列中公開。
編輯器工具列
擴充功能可以直接在編輯器工具列中貢獻範圍限定於編輯器的編輯器動作。
面板工具列
面板工具列可以公開範圍限定於目前選取檢視的選項。例如，終端機檢視會公開新增終端機、分割檢視版面配置等的動作。切換到問題檢視會公開一組不同的動作。
狀態列項目
在左側，狀態列項目的範圍限定於整個工作區。在右側，項目的範圍限定於使用中的檔案。
常用 UI 元素
命令面板
擴充功能可以貢獻命令面板中顯示的命令，以快速執行某些功能。
快速選取
快速選取以幾種不同的方式擷取使用者的輸入。它們可以要求單一選取、多重選取，甚至是自由格式的文字輸入。
通知
通知用於向使用者傳達資訊、警告和錯誤訊息。它們也可以用於指示進度。
Webview
Webview 可用於顯示自訂內容和功能，以用於超出 VS Code「原生」API 範圍的使用案例。
內容選單
與命令面板一致的位置相反，內容選單讓使用者能夠從特定位置執行動作或設定某些項目。
導覽
導覽為透過包含豐富內容的多步驟檢查清單，引導使用者使用擴充功能提供一致的體驗。
設定
設定讓使用者能夠設定與擴充功能相關的選項。
