如何在VSCode扩展侧边栏中实现输入栏？

要在VSCode扩展的侧边栏内嵌入输入栏，你可以使用Webview视图来实现——Webview允许你自定义HTML内容，完全支持输入框这类交互元素，比TreeView更灵活。以下是具体实现步骤和修改后的代码：

1. 注册侧边栏Webview视图 #

在activate函数中注册一个Webview视图提供者，用于在侧边栏展示自定义界面。

2. 编写Webview的HTML界面 #

在Webview中嵌入输入框和提交按钮，并通过VSCode的消息API将输入内容传递给扩展主逻辑。

3. 处理消息通信与请求逻辑 #

在扩展中监听Webview发来的输入消息，收到后调用axios发送请求，并将结果返回给Webview展示（可选）。

修改后的完整代码 #

import axios from "axios";
import * as vscode from "vscode";

export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "cohere" is now active!');

    // 注册侧边栏Webview视图提供者
    const provider = new CohereWebviewProvider(context.extensionUri);
    context.subscriptions.push(
        vscode.window.registerWebviewViewProvider(
            "cohere.sidebarView", // 这个ID需要在package.json中配置
            provider
        )
    );
}

class CohereWebviewProvider implements vscode.WebviewViewProvider {
    constructor(private readonly _extensionUri: vscode.Uri) {}

    resolveWebviewView(
        webviewView: vscode.WebviewView,
        context: vscode.WebviewViewResolveContext,
        _token: vscode.CancellationToken
    ) {
        webviewView.webview.options = {
            // 允许加载本地资源和脚本
            enableScripts: true,
            localResourceRoots: [this._extensionUri]
        };

        // 设置Webview的HTML内容
        webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);

        // 监听Webview发来的消息
        webviewView.webview.onDidReceiveMessage(async (data) => {
            switch (data.type) {
                case "submitMessage":
                    try {
                        const response = await axios.post(
                            "http://127.0.0.1:5000/cohere",
                            { message: data.message }
                        );
                        const output = JSON.stringify(response.data, null, 2);
                        console.log(output);
                        // 将结果返回给Webview展示
                        webviewView.webview.postMessage({
                            type: "showResult",
                            result: output
                        });
                    } catch (error) {
                        console.error(error);
                        webviewView.webview.postMessage({
                            type: "showError",
                            error: "请求失败，请检查服务是否运行"
                        });
                    }
                    break;
            }
        });
    }

    private _getHtmlForWebview(webview: vscode.Webview) {
        return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cohere 输入栏</title>
    <style>
        .container {
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        #messageInput {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        #submitBtn {
            padding: 8px 16px;
            background-color: #007acc;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #submitBtn:hover {
            background-color: #005a9e;
        }
        #resultArea {
            margin-top: 12px;
            padding: 8px;
            border: 1px solid #eee;
            border-radius: 4px;
            white-space: pre-wrap;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="messageInput" placeholder="输入你的消息...">
        <button id="submitBtn">提交</button>
        <div id="resultArea"></div>
    </div>

    <script>
        const vscode = acquireVsCodeApi();
        
        // 监听提交按钮点击
        document.getElementById('submitBtn').addEventListener('click', () => {
            const input = document.getElementById('messageInput');
            const message = input.value.trim();
            if (message) {
                vscode.postMessage({
                    type: 'submitMessage',
                    message: message
                });
                input.value = '';
            }
        });

        // 监听扩展返回的消息
        window.addEventListener('message', event => {
            const data = event.data;
            const resultArea = document.getElementById('resultArea');
            switch (data.type) {
                case 'showResult':
                    resultArea.textContent = data.result;
                    resultArea.style.color = '#333';
                    break;
                case 'showError':
                    resultArea.textContent = data.error;
                    resultArea.style.color = '#d33';
                    break;
            }
        });
    </script>
</body>
</html>`;
    }
}

export function deactivate() {}

配置package.json #

还需要在package.json中添加侧边栏视图的贡献点，让VSCode识别这个视图：

"contributes": {
    "views": {
        "explorer": [ // 可放在资源管理器侧边栏，或自定义侧边栏
            {
                "id": "cohere.sidebarView",
                "name": "Cohere 工具"
            }
        ]
    }
}

说明 #

• 该方案通过Webview实现了完全自定义的侧边栏界面，不仅支持输入框，还能添加其他UI元素（比如结果展示区域）；
• Webview和扩展之间通过postMessage和onDidReceiveMessage进行双向通信，保证输入内容能传递到扩展逻辑中；
• 样式可根据需求自定义，适配VSCode主题风格。

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