VSCode扩展开发：实现带OK按钮弹窗并插入光标后文本

我明白你现在卡在VSCode扩展里创建带OK按钮的结果展示窗口这一步了——官方文档里确实没有直接叫「带OK按钮的额外窗口」的API，但我们有两种常用的方式来实现你的需求，分别适合短内容和长内容场景：

方案一：用信息提示框（适合短文本结果） #

VSCode的vscode.window.showInformationMessage支持添加自定义按钮，我们可以给它加一个「OK」按钮，监听用户点击后执行插入操作。

修改你rp(options).then()里的代码：

.then(function (respString) {
  console.log(respString);
  // 展示带OK按钮的信息提示框
  vscode.window.showInformationMessage(respString, "OK")
    .then(selection => {
      // 判断用户是否点击了OK按钮
      if (selection === "OK") {
        const editor = vscode.window.activeTextEditor;
        if (editor) {
          // 将内容插入到光标位置（替换选中内容，没有选中则直接插入）
          editor.edit(editBuilder => {
            editBuilder.replace(editor.selection, respString);
          });
        }
      }
    });
})

关键补全： #

你原代码里漏了获取激活编辑器的步骤，会导致editor未定义，需要在命令开头补充：

let disposable = vscode.commands.registerCommand(commandId, function () {
  // 先获取激活的编辑器
  const editor = vscode.window.activeTextEditor;
  if (!editor) {
    vscode.window.showErrorMessage('请先打开一个编辑器窗口');
    return;
  }
  const text = editor.document.getText();
  // 后续代码...
});

方案二：自定义Webview面板（适合长文本/格式化结果） #

如果服务器返回的内容比较长，或者需要格式化展示，用VSCode的Webview面板更合适——这是一个真正的「额外窗口」，可以自定义样式和交互。

替换rp(options).then()里的代码：

.then(function (respString) {
  console.log(respString);
  // 创建Webview面板
  const panel = vscode.window.createWebviewPanel(
    'serverResponsePanel', // 唯一标识面板的ID
    '服务器返回结果', // 面板标题
    vscode.ViewColumn.Beside, // 面板显示位置（侧边，也可用Active替换当前窗口）
    {
      enableScripts: true // 允许面板内执行JS，处理按钮点击
    }
  );

  // 转义HTML字符，避免XSS和格式错乱
  function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
  }

  // 设置面板的HTML内容，同步VSCode主题样式
  panel.webview.html = `
<!DOCTYPE html>
<html>
<head>
    <style>
        body { padding: 1.5rem; font-family: var(--vscode-font-family); }
        #content { margin-bottom: 1.5rem; padding: 1rem; background: var(--vscode-editor-background); border-radius: 4px; white-space: pre-wrap; }
        button { padding: 0.5rem 1.2rem; 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 id="content">${escapeHtml(respString)}</div>
    <button id="okBtn">OK</button>

    <script>
        // 获取VSCode的API实例
        const vscode = acquireVsCodeApi();
        // 监听OK按钮点击
        document.getElementById('okBtn').addEventListener('click', () => {
            // 向扩展发送插入内容的指令
            vscode.postMessage({ 
                command: 'insertContent', 
                content: '${escapeHtml(respString)}' 
            });
            // 关闭面板
            window.close();
        });
    </script>
</body>
</html>
`;

  // 监听Webview发送的消息
  panel.webview.onDidReceiveMessage(
    message => {
      if (message.command === 'insertContent') {
        const editor = vscode.window.activeTextEditor;
        if (editor) {
          // 插入内容到光标位置
          editor.edit(editBuilder => {
            editBuilder.replace(editor.selection, message.content);
          });
        }
      }
    },
    undefined,
    context.subscriptions // 加入订阅，避免内存泄漏
  );
})

优势： #

• 支持展示大量文本，保留换行、空格等格式
• 样式和VSCode主题同步，视觉统一
• 可自定义窗口位置、大小，甚至添加更多交互按钮

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