一、vscode.window 核心架構圖

二、核心功能詳解

1. 窗口管理

// 獲取當前活動窗口
const activeWindow = vscode.window.activeTextEditor;// 切換窗口焦點
vscode.window.showTextDocument(document, { preview: false });// 監聽窗口變化
vscode.window.onDidChangeActiveTextEditor(editor => {console.log(`Active editor changed to: ${editor.document.fileName}`);
});

2. 消息提示系統

// 基礎消息提示
vscode.window.showInformationMessage('操作成功', '確定');// 帶按鈕的消息提示
vscode.window.showWarningMessage('確認刪除?', '是', '否').then(selection => {if (selection === '是') {// 執行刪除操作}
});// 錯誤消息提示
vscode.window.showErrorMessage('操作失敗', { detail: '詳細錯誤信息' });

3. 狀態欄管理

// 創建狀態欄項
const statusItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left, 100);
statusItem.text = '$(zap) 運行中';
statusItem.tooltip = '當前任務狀態';
statusItem.show();// 動態更新狀態
function updateStatus(text: string, color?: string) {statusItem.text = text;if (color) {statusItem.color = color;}
}// 狀態欄點擊事件
statusItem.command = 'myExtension.showDetails';
vscode.commands.registerCommand('myExtension.showDetails', () => {vscode.window.showInformationMessage('狀態欄點擊事件觸發');
});

4. 用戶輸入處理

// 顯示輸入框
vscode.window.showInputBox({prompt: '請輸入文件名',value: 'newfile',validateInput: (value) => {if (!value.match(/^[a-zA-Z0-9_-]+$/)) {return '文件名只能包含字母、數字、下劃線和橫線';}return null;}
}).then(value => {if (value) {// 處理輸入內容}
});// 顯示快速選擇列表
vscode.window.showQuickPick(['選項1', '選項2', '選項3'], {placeHolder: '請選擇一個選項',canPickMany: true
}).then(selections => {if (selections) {vscode.window.showInformationMessage(`已選擇: ${selections.join(', ')}`);}
});

5. 進度指示器

// 顯示通知欄進度
vscode.window.withProgress({location: vscode.ProgressLocation.Notification,title: "處理中",cancellable: true
}, (progress, token) => {return new Promise(resolve => {let count = 0;const interval = setInterval(() => {if (token.isCancellationRequested) {clearInterval(interval);resolve();}progress.report({ increment: 10, message: `${count}%` });count += 10;if (count > 100) {clearInterval(interval);resolve();}}, 500);});
});// 顯示狀態欄進度
const progressItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right);
progressItem.text = '0%';
progressItem.show();// 更新進度
let percent = 0;
const interval = setInterval(() => {percent += 5;progressItem.text = `${percent}%`;if (percent >= 100) {clearInterval(interval);progressItem.hide();}
}, 500);

6. Webview管理

// 創建Webview面板
const panel = vscode.window.createWebviewPanel('myWebview','交互式面板',vscode.ViewColumn.One,{enableScripts: true,localResourceRoots: [vscode.Uri.file(path.join(extensionPath, 'resources'))]}
);// 復用Webview實例
let webviewPanel: vscode.WebviewPanel | undefined;vscode.commands.registerCommand('myExtension.toggleWebview', () => {if (webviewPanel) {webviewPanel.reveal();} else {webviewPanel = vscode.window.createWebviewPanel(...);// 配置Webview內容webviewPanel.onDidDispose(() => {webviewPanel = undefined;});}
});

三、高級功能與最佳實踐

1. 多窗口協調

// 獲取所有打開的編輯器
vscode.window.visibleTextEditors.forEach(editor => {console.log(`打開的文件: ${editor.document.fileName}`);
});// 監聽新窗口打開
vscode.window.onDidOpenTextDocument(document => {if (document.languageId === 'typescript') {vscode.window.showInformationMessage(`TypeScript文件已打開: ${document.fileName}`);}
});

2. 自定義視圖容器

// 注冊自定義視圖
vscode.window.registerWebviewViewProvider('myCustomView', {resolveWebviewView: (webviewView, context) => {webviewView.webview.options = {enableScripts: true};webviewView.webview.html = `<h1>自定義視圖內容</h1>`;}
});

3. 終端集成

// 創建終端
const terminal = vscode.window.createTerminal('My Terminal');
terminal.show();
terminal.sendText('echo "Hello VS Code"');// 監聽終端輸出
vscode.window.onDidWriteTerminalData(e => {if (e.terminal === terminal) {console.log(`終端輸出: ${e.data}`);}
});

4. 無障礙支持

// 設置ARIA標簽
vscode.window.setStatusBarMessage('任務完成', 5000, {ariaLive: 'assertive'
});// 描述操作
vscode.window.showInformationMessage('文件已保存', {modal: true,detail: '保存操作成功完成',description: '文件路徑: /path/to/file'
});

四、錯誤處理與資源管理

1. 安全釋放資源

class MyPanel {private disposable: vscode.Disposable;constructor(panel: vscode.WebviewPanel) {this.disposable = vscode.Disposable.from(panel.onDidDispose(() => this.dispose()),vscode.window.onDidChangeActiveTextEditor(() => this.update()));}dispose() {this.disposable.dispose();}
}

2. 統一錯誤處理

function handleError(error: unknown) {if (error instanceof Error) {vscode.window.showErrorMessage(`錯誤: ${error.message}`, {detail: error.stack});console.error('擴展錯誤:', error);} else {vscode.window.showErrorMessage('未知錯誤發生');}
}

五、版本兼容性說明

• VS Code 1.32+：全面支持Webview API
• VS Code 1.47+：新增自定義視圖容器API
• VS Code 1.50+：增強終端集成功能

通過系統化使用 vscode.window API，可以實現從簡單消息提示到復雜多窗口協調的各類交互功能。實際開發中建議結合VS Code的調試工具和日志系統，逐步完善交互流程。