參加你附近的 ,瞭解 VS Code 中的 AI 輔助開發。

使用者體驗指南

這些指南涵蓋了建立與 VS Code 的原生介面和模式無縫整合的擴充套件的最佳實踐。在這些指南中,您將找到

  • VS Code 整體 UI 架構和元素的概述
  • 由擴充套件貢獻的 UI 的建議和示例
  • 相關指南和示例的連結

在深入瞭解細節之前,瞭解 VS Code 的各種架構 UI 部分如何協同工作以及您的擴充套件如何以及在何處做出貢獻非常重要。

容器

VS Code 介面大致可分為兩個主要概念:容器。一般來說,容器可以被認為是 VS Code 介面中渲染一個或多個項的較大區域

Overview of Visual Studio Code containers elements

活動欄

活動欄是 VS Code 中的核心導航介面。擴充套件可以向活動欄貢獻項,這些項作為檢視容器,在主側邊欄中渲染檢視

主側邊欄

主側邊欄渲染一個或多個檢視。活動欄和主側邊欄緊密耦合。單擊貢獻的活動欄項(即:檢視容器)會開啟主側邊欄,其中將渲染與該檢視容器關聯的一個或多個檢視。一個具體的例子是資源管理器。單擊資源管理器項將開啟主側邊欄,其中顯示資料夾、時間線和大綱檢視。

輔助側邊欄

輔助側邊欄也作為渲染帶有檢視的檢視容器的介面。使用者可以將終端或問題檢視等檢視拖到輔助側邊欄以自定義其佈局。

編輯器

編輯器區域包含一個或多個編輯器組。擴充套件可以貢獻自定義編輯器Webview以在編輯器區域中開啟。它們還可以貢獻編輯器操作,以在編輯器工具欄中顯示額外的圖示按鈕。

面板

面板是顯示檢視容器的另一個區域。預設情況下,終端、問題和輸出等檢視可以在面板中一次在一個選項卡中檢視。使用者還可以將檢視拖到分屏佈局中,就像他們在編輯器中一樣。此外,擴充套件可以選擇專門將檢視容器新增到面板而不是活動欄/主側邊欄。

狀態列

狀態列提供有關工作區和當前活動檔案的上下文資訊。它渲染兩組狀態列項

擴充套件可以將項新增到上面列出的各種容器中。

Overview of Visual Studio Code containers elements

檢視

檢視可以以樹檢視歡迎檢視Webview 檢視的形式貢獻,並且可以拖動到介面的其他區域。

檢視工具欄

擴充套件可以顯示檢視特定的操作,這些操作作為按鈕出現在檢視工具欄上。

限定在整個檢視容器範圍內的操作也可以在側邊欄工具欄中顯示。

編輯器工具欄

擴充套件可以直接在編輯器工具欄中貢獻限定在編輯器範圍內的編輯器操作

面板工具欄

面板工具欄可以顯示限定在當前選定檢視範圍內的選項。例如,終端檢視顯示新增新終端、分割檢視佈局等操作。切換到問題檢視會顯示一組不同的操作。

狀態列項

左側的狀態列項限定在整個工作區。右側的項限定在活動檔案。

通用 UI 元素

命令面板

擴充套件可以貢獻顯示在命令面板中的命令,以快速執行某些功能。

Overview of the Command Palette element

快速選擇

快速選擇以幾種不同的方式捕獲使用者的輸入。它們可以要求單選、多選,甚至自由文字輸入。

Overview of the Quick Pick element

通知

通知用於向用戶傳達資訊、警告和錯誤訊息。它們也可以用於指示進度。

Overview of the Notification element

Webview

Webview可用於顯示自定義內容和功能,以滿足超出 VS Code“原生”API 的用例。

Overview of the Webview element

上下文選單

與命令面板的一致位置相比,上下文選單使使用者能夠從特定位置執行操作或配置某些內容。

Overview of the Context Menu element

演練

演練透過包含豐富內容的多步清單,為使用者提供一致的擴充套件入門體驗。

Overview of the Walkthrough API

設定

設定使使用者能夠配置與擴充套件相關的選項。

Overview of the Settings page