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

檢視

檢視是內容容器,可以出現在側邊欄或面板中。檢視可以包含樹檢視、歡迎檢視或 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