Webview
如果您需要顯示超出 VS Code API 支援範圍的自訂功能,可以使用 webviews,它們是可以完全自訂的。請務必了解,只有在絕對必要時才應使用 webviews。
✔️ 建議做法
- 僅在絕對必要時才使用 webviews
- 僅在符合情境時才啟用您的擴充功能
- 僅為使用中的視窗開啟 webviews
- 確保檢視中的所有元素都支援佈景主題 (請參閱 webview-view-sample 與 color tokens 文件)
- 確保您的檢視遵循 無障礙功能指南 (色彩對比、ARIA 標籤、鍵盤導覽)
- 在工具列與檢視中使用命令動作
❌ 不建議做法
- 用於宣傳推廣 (升級、贊助商等)
- 用於精靈
- 在每個視窗上開啟
- 在擴充功能更新時開啟 (請改透過通知詢問)
- 新增與編輯器或工作區無關的功能
- 重複現有的功能 (歡迎頁面、設定、組態等)
Webview 範例
簡易瀏覽器
此擴充功能會在編輯器旁開啟瀏覽器預覽。

此範例展示了直接在 VS Code 內部開發 VS Code Web 的過程。這裡使用 Webview 面板來轉譯類似瀏覽器的視窗。
提取要求
此擴充功能會在自訂樹狀檢視中顯示工作區儲存庫的提取要求,然後使用 webview 來顯示提取要求的詳細資料檢視。

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

此 webview 檢視顯示了建立提取要求的內容,其中使用了下拉式方塊、輸入欄位與按鈕。