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

Webview

如果您需要顯示超出 VS Code API 支援範圍的自定義功能,可以使用完全可自定義的 webview。但請務必瞭解,僅當您絕對需要時才應使用 webview。

✔️ 建議

  • 僅在絕對必要時使用 webview
  • 僅在上下文適當時啟用您的擴充套件
  • 僅為活動視窗開啟 webview
  • 確保檢視中的所有元素都可主題化(請參閱 webview-view-sample顏色標記 文件)
  • 確保您的檢視遵循可訪問性指南(顏色對比度、ARIA 標籤、鍵盤導航)
  • 在工具欄和檢視中使用命令操作

❌ 不建議

  • 用於推廣(升級、贊助商等)
  • 用於嚮導
  • 在每個視窗中開啟
  • 在擴充套件更新時開啟(請改為透過通知詢問)
  • 新增與編輯器或工作區無關的功能
  • 重複現有功能(歡迎頁、設定、配置等)

Webview 示例

簡單瀏覽器

此擴充套件在編輯器旁邊開啟一個瀏覽器預覽。

Weview sample - Browser

此示例展示了 VS Code Web 在 VS Code 中開發。Webview 面板用於渲染一個類似瀏覽器的視窗。

拉取請求

此擴充套件在自定義樹檢視中顯示工作區儲存庫的拉取請求,然後使用 webview 顯示拉取請求的詳細資訊檢視。

Webview sample - Pull Request

Webview 檢視

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

Webview View

此 webview 檢視顯示用於建立拉取請求的內容,該內容使用下拉選單、輸入框和按鈕。