VS Code扩展开发：点击状态栏图标如何显示自定义窗口？

要实现点击状态栏图标弹出带自定义文本和按钮的窗口，核心是给状态栏项绑定点击命令，再通过VS Code提供的API创建弹窗。以下是两种常用实现方式：

方式一：轻量弹窗（基于QuickPick组件） #

适合布局简单的场景，利用内置QuickPick组件快速实现：

1. 创建状态栏项并绑定命令 #

import * as vscode from 'vscode';

let statusBarItem: vscode.StatusBarItem;

export function activate(context: vscode.ExtensionContext) {
    // 初始化状态栏项
    statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
    statusBarItem.text = '$(alert)'; // 替换为你需要的内置图标
    statusBarItem.tooltip = '点击打开自定义窗口';
    // 绑定点击触发的命令
    statusBarItem.command = 'your-extension-id.showCustomPopup';
    context.subscriptions.push(statusBarItem);
    statusBarItem.show();

    // 注册命令处理逻辑
    const showPopupCmd = vscode.commands.registerCommand('your-extension-id.showCustomPopup', () => {
        renderQuickPickPopup();
    });
    context.subscriptions.push(showPopupCmd);
}

2. 实现QuickPick弹窗逻辑 #

function renderQuickPickPopup() {
    const quickPick = vscode.window.createQuickPick();
    // 设置弹窗显示的文本内容
    quickPick.items = [{ label: '自定义提示文本', description: '这里可以添加辅助说明' }];
    // 添加操作按钮
    quickPick.buttons = [
        { iconPath: new vscode.ThemeIcon('check'), tooltip: '确认' },
        { iconPath: new vscode.ThemeIcon('x'), tooltip: '取消' }
    ];

    // 监听按钮点击事件
    quickPick.onDidTriggerButton(button => {
        if (button.tooltip === '确认') {
            // 执行你的确认逻辑
            vscode.window.showInformationMessage('已执行确认操作');
        }
        quickPick.dispose(); // 关闭弹窗
    });

    // 监听选中项（可选）
    quickPick.onDidChangeSelection(selection => {
        if (selection.length > 0) {
            quickPick.dispose();
        }
    });

    quickPick.show();
}

方式二：完全自定义弹窗（基于WebviewPanel） #

适合需要复杂布局、自定义样式的场景，通过Webview实现任意HTML内容：

1. 实现Webview弹窗逻辑 #

替换上述renderQuickPickPopup为以下函数：

function renderWebviewPopup(context: vscode.ExtensionContext) {
    const panel = vscode.window.createWebviewPanel(
        'customWebviewPopup', // 唯一面板ID
        '自定义窗口', // 弹窗标题
        vscode.ViewColumn.Active,
        {
            enableScripts: true, // 允许执行JS
            retainContextWhenHidden: false // 隐藏时销毁上下文
        }
    );

    // 编写自定义HTML内容，适配VS Code主题
    panel.webview.html = `
        <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                body { padding: 16px; font-family: var(--vscode-font-family); }
                .content { margin-bottom: 20px; color: var(--vscode-foreground); }
                .btn-group { display: flex; gap: 8px; }
                button { 
                    padding: 6px 12px; 
                    background: var(--vscode-button-background); 
                    color: var(--vscode-button-foreground); 
                    border: none; 
                    border-radius: 4px; 
                    cursor: pointer;
                }
                button:hover { background: var(--vscode-button-hoverBackground); }
            </style>
        </head>
        <body>
            <div class="content">这里是完全自定义的文本内容，支持任意HTML元素</div>
            <div class="btn-group">
                <button id="confirmBtn">确认</button>
                <button id="cancelBtn">取消</button>
            </div>
            <script>
                const vscode = acquireVsCodeApi();
                document.getElementById('confirmBtn').addEventListener('click', () => {
                    vscode.postMessage({ type: 'confirm' });
                    window.close();
                });
                document.getElementById('cancelBtn').addEventListener('click', () => {
                    window.close();
                });
            </script>
        </body>
        </html>
    `;

    // 监听Webview发送的消息
    panel.webview.onDidReceiveMessage(msg => {
        if (msg.type === 'confirm') {
            vscode.window.showInformationMessage('已完成确认操作');
        }
    });

    // 面板关闭时清理资源
    panel.onDidDispose(() => {}, null, context.subscriptions);
}

必要配置 #

在package.json的contributes字段中注册命令：

{
    "contributes": {
        "commands": [
            {
                "command": "your-extension-id.showCustomPopup",
                "title": "显示自定义弹窗"
            }
        ]
    }
}

注意事项 #

• 替换your-extension-id为你扩展的实际ID（在package.json的id字段中定义）
• 内置图标可参考VS Code官方图标名称列表，替换$(alert)为目标图标
• Webview样式使用var(--vscode-*)变量可自动适配VS Code主题

内容的提问来源于stack exchange，提问作者Lutif