現已釋出!閱讀關於 11 月新增功能和修復的內容。

使用者體驗指南

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

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

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

容器

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

Overview of Visual Studio Code containers elements

活動欄

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

主側邊欄

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

次級側邊欄

次級側邊欄也充當渲染帶檢視的檢視容器的介面。使用者可以將終端或問題檢視等檢視拖到次級側邊欄以自定義其佈局。

編輯器

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

面板

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

狀態列

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

專案

擴充套件可以向上面列出的各種容器新增專案。

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

© . This site is unofficial and not affiliated with Microsoft.