从 WebView 访问 VS Code api

对于扩展开发,我正在创建一个 webview,其中有一些按钮,点击它应该在 vscode 中执行一些命令(比如打开对话框)

目前我正在使用 React 创建 WebView

例如代码

import * as React from 'react';
import * as vscode from 'vscode'
class .... {

public render() {
<div className="some" onClick={this.function1} role="button">
                            Test
                        </div>
}

private function1() {  vscode.commands.executeCommand("commandString"); }

}

我收到错误

“未找到模块:错误:无法解析 'vscode' in”

运行 webpack 时

stack overflow Access VS Code api from WebView
原文答案
author avatar

接受的答案

你不能在你的 webview 中直接与 vscode 交互。相反,有消息 API 来发送和接收(字符串)数据。您可以使用它来指定要执行的命令。 this section 中描述了从扩展程序向 webview 发送消息。

这是它的基本部分:

    // Handle the message inside the webview
    window.addEventListener('message', event => {

        const message = event.data; // The JSON data our extension sent

        switch (message.command) {
            case 'refactor':
                count = Math.ceil(count * 0.5);
                counter.textContent = count;
                break;
        }
    });

对于另一个方向,请阅读 this section

这是它的基本部分:

  panel.webview.onDidReceiveMessage(
    message => {
      switch (message.command) {
        case 'alert':
          vscode.window.showErrorMessage(message.text);
          return;
      }
    },
    undefined,
    context.subscriptions
  );

答案: