🚀 在 VS Code 中

檢視

檢視是內容的容器,可以顯示在側邊欄或面板中。檢視可以包含樹狀檢視、歡迎檢視或 Webview 檢視,也可以顯示檢視動作。檢視也可以由使用者重新排列或移動到另一個檢視容器(例如,從主要側邊欄到次要側邊欄)。請限制建立的檢視數量,因為其他擴充功能可以在同一個檢視容器中貢獻內容。

✔️ 建議

  • 盡可能使用現有的圖示
  • 語言檔案使用檔案圖示
  • 使用樹狀檢視來顯示資料
  • 為每個檢視新增圖示(以防萬一它被移動到活動列或次要側邊欄,這兩者都使用圖示來表示檢視)
  • 將檢視數量保持在最低限度
  • 將名稱長度保持在最低限度
  • 限制使用自訂 Webview 檢視

❌ 不建議

  • 重複現有的功能
  • 將樹狀項目作為單一動作項目使用(例如,點擊時觸發命令)
  • 如果非必要,請勿使用自訂 Webview 檢視
  • 請勿使用活動列項目(檢視容器)在編輯器中開啟 Webview

Views example

此範例使用樹狀檢視來顯示樹狀檢視項目的平面清單。

檢視位置

檢視可以放置在現有的檢視容器中,例如檔案總管、原始碼控制 (SCM) 和偵錯檢視容器。它們也可以透過活動列新增到自訂的檢視容器。此外,檢視可以新增到面板中的任何檢視容器。它們也可以拖曳到次要側邊欄。

View locations

檢視容器

檢視容器,顧名思義,是呈現檢視的「父」容器。擴充功能可以將自訂檢視容器貢獻到活動列/主要側邊欄或面板。使用者可以將整個檢視容器從活動列拖曳到面板(或反之亦然),也可以移動個別檢視。

Example of a View Container

這是在活動列/主要側邊欄中放置檢視容器的範例

Example of a View Container in a Panel

這是在面板中放置檢視容器的範例

樹狀檢視

樹狀檢視是一種強大且彈性的格式,可在檢視中顯示內容。擴充功能可以新增從簡單的平面清單到深度巢狀樹狀結構的所有內容。

  • 使用描述性標籤來提供項目的上下文(如果適用)
  • 使用產品圖示來區分項目類型(如果適用)

❌ 不建議

  • 將樹狀檢視項目用作按鈕來觸發命令
  • 除非必要,否則避免深度巢狀結構。幾層資料夾/項目對於大多數情況來說是一個很好的平衡。
  • 為項目新增超過三個動作

Example of a Tree View

歡迎檢視

當檢視為空時,您可以新增內容以引導使用者如何使用您的擴充功能或開始使用。歡迎檢視中支援連結和圖示。

✔️ 建議

  • 僅在必要時使用歡迎檢視
  • 盡可能使用連結而不是按鈕
  • 僅將按鈕用於主要動作
  • 使用清晰的連結文字來指示連結目的地
  • 限制內容的長度
  • 限制歡迎檢視的數量
  • 限制檢視中按鈕的數量

❌ 不建議

  • 如果非必要,請勿使用按鈕
  • 請勿將歡迎檢視用於促銷
  • 請勿使用通用的「閱讀更多」作為連結文字

Welcome Views

此範例顯示擴充功能的一個主要動作,以及指向文件的額外連結。

具有進度的檢視

您也可以透過參考檢視的 ID,在檢視中顯示進度

View with progress

檢視動作

檢視可以在檢視工具列上公開檢視動作。請注意不要新增太多動作,以避免雜亂和混淆。使用內建的產品圖示有助於擴充功能融入原生 UI。但是,如果需要自訂圖示,則可以提供 SVG 圖示。

Example of View Actions