从 WebView 访问 VS Code api

Question

为了扩展开发，我正在创建一个 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"); }

}

我遇到错误

"Module not found: Error: Can't resolve 'vscode' in "

当运行 webpack

Answer 1

您不能在您的网络视图中直接与 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
  );

从 WebView 访问 VS Code api

Access VS Code api from WebView

typescript

webpack

visual-studio-code

vscode-extensions