在 VS Code Webview 的 HTML 中，不能直接調用 VS Code 的 API（如 vscode.window.showInformationMessage），但可以通過 acquireVsCodeApi() 獲取一個受限的 vscode 對象，用于與插件主程序通信。以下是詳細說明和示例：
一、Webview 中可用的 VS Code 方法
通過 const vscode = acquireVsCodeApi(); 獲取的 vscode 對象支持以下操作：
1. 消息傳遞
-
vscode.postMessage(message)
向插件主程序發送消息，觸發主程序執行操作（如顯示彈窗、修改文件等）。vscode.postMessage({ command: "showMessage", text: "Hello from Webview" }); -
window.addEventListener('message', callback)
接收主程序返回的消息（如操作結果、數據更新等）。window.addEventListener('message', (event) => {if (event.data.command === "operationResult") {console.log("收到主程序響應:", event.data.data);} });
2. 狀態管理
-
vscode.getState()
獲取 Webview 上一次保存的狀態（如表單數據、滾動位置等）。const savedState = vscode.getState() || { formData: {} }; -
vscode.setState(newState)
保存 Webview 的狀態，刷新或重新打開時恢復。vscode.setState({ formData: currentFormValues });
3. 環境信息
vscode.environment（只讀）
包含 VS Code 的環境信息，如版本號、是否為調試模式等。console.log("VS Code 版本:", vscode.environment.appVersion);
二、完整交互流程示例
1. Webview HTML（發送消息）
<!DOCTYPE html>
<html>
<body><button id="showMessageBtn">顯示消息</button><script>const vscode = acquireVsCodeApi();// 發送消息到主程序document.getElementById("showMessageBtn").addEventListener("click", () => {vscode.postMessage({ command: "showMessage", text: "點擊了按鈕！" });});// 接收主程序響應window.addEventListener("message", (event) => {if (event.data.command === "messageShown") {alert("主程序已顯示消息！");}});</script>
</body>
</html>
2. 插件主程序（處理消息）
import * as vscode from "vscode";export function activate(context: vscode.ExtensionContext) {// 創建 Webview 面板const panel = vscode.window.createWebviewPanel("myWebview","Webview 示例",vscode.ViewColumn.One);// 加載 HTML 內容panel.webview.html = getWebviewContent();// 監聽 Webview 消息panel.webview.onDidReceiveMessage((message: { command: string; text?: string }) => {switch (message.command) {case "showMessage":// 顯示 VS Code 消息vscode.window.showInformationMessage(message.text || "默認消息");// 發送確認消息回 Webviewpanel.webview.postMessage({ command: "messageShown" });break;}},undefined,context.subscriptions);
}function getWebviewContent() {return `<!DOCTYPE html><html><body><button id="showMessageBtn">顯示消息</button><script>const vscode = acquireVsCodeApi();document.getElementById("showMessageBtn").addEventListener("click", () => {vscode.postMessage({ command: "showMessage", text: "點擊了按鈕！" });});window.addEventListener("message", (event) => {if (event.data.command === "messageShown") {alert("主程序已顯示消息！");}});</script></body></html>`;
}
三、關鍵限制
-
安全隔離
Webview 的 JavaScript 環境與插件主程序隔離，不能直接調用 VS Code API，必須通過消息傳遞。 -
可用 API 受限
僅能通過acquireVsCodeApi()獲取的vscode對象進行通信，無法直接使用vscode.window、vscode.workspace等模塊。 -
性能優化
頻繁的消息傳遞可能影響性能，建議批量處理或使用狀態管理。
四、常見用例
| 場景 | 實現方式 |
|---|---|
| 顯示 VS Code 消息 | Webview 發送 postMessage，主程序調用 vscode.window.showInformationMessage |
| 獲取當前文件路徑 | 主程序通過 vscode.window.activeTextEditor?.document.uri 獲取，再發送回 Webview |
| 執行 VS Code 命令 | 主程序調用 vscode.commands.executeCommand("命令ID") |
| 修改用戶配置 | 主程序調用 vscode.workspace.getConfiguration().update() |
通過消息傳遞機制，Webview 可以安全地與 VS Code 主程序交互，實現豐富的自定義功能。
