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

此範例展示如何在 VS Code 內部開發 VS Code Web。它使用 Webview 面板來呈現類似瀏覽器的視窗。
Pull Request
此擴充功能會在自訂樹狀檢視中顯示工作區儲存庫的 Pull Request,並使用 Webview 來呈現 Pull Request 的詳細檢視。

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

此 Webview 檢視顯示用於建立 Pull Request 的內容,其中使用了下拉式選單、輸入欄位與按鈕。