🚀 在 VS Code 中

Webviews

如果您需要顯示超出 VS Code API 支援的自訂功能,您可以使用Webview,它是完全可自訂的。務必理解,只有在絕對必要時才應使用 Webview。

✔️ 建議

  • 僅在絕對必要時使用 Webview
  • 僅在上下文適當時啟用您的擴充功能
  • 僅為活動視窗開啟 Webview
  • 確保檢視中的所有元素都可設定佈景主題(請參閱webview-view-sample色彩符號文件)
  • 確保您的檢視遵循協助工具指南(色彩對比、ARIA 標籤、鍵盤導航)
  • 在工具列和檢視中使用命令動作

❌ 不建議

  • 用於促銷(升級、贊助等)
  • 用於精靈
  • 在每個視窗上開啟
  • 在擴充功能更新時開啟(改為透過通知詢問)
  • 新增與編輯器或工作區無關的功能
  • 重複現有功能(歡迎頁面、設定、組態等)

Webview 範例

簡易瀏覽器

此擴充功能在編輯器側邊開啟瀏覽器預覽。

Weview sample - Browser

此範例展示了在 VS Code 內部開發 VS Code Web。Webview 面板用於呈現類似瀏覽器的視窗。

提取請求

此擴充功能在自訂樹狀檢視中顯示工作區儲存庫的提取請求,然後使用 Webview 作為提取請求的詳細檢視。

Webview sample - Pull Request

Webview 檢視

您也可以將 Webview 放置到任何檢視容器(側邊欄或面板)中,這些元素稱為 Webview 檢視。相同的 Webview 指南適用於 Webview 檢視。

Webview View

此 Webview 檢視顯示用於建立提取請求的內容,其中使用了下拉式選單、輸入框和按鈕。