vscode.window对象讲解

一、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的调试工具和日志系统，逐步完善交互流程。