VSCode扩展IPC,在HTML预览中使用UI

时间:2016-11-22 21:58:23

标签: webview visual-studio-code vscode-extensions

我希望为VSCode开发一个单元测试运行器扩展。扩展应显示已发现的测试,这些测试分为可扩展层次结构,注释运行状态,每个测试的显示输出和错误,在不同级别提供运行/调试命令,当然还有红色/绿色条。

粗略地将其加入"模型"我想计划在扩展过程中实现模型,并计划将视图实现为基于TextDocumentContentProvider的HTML预览。 (有更好的方法吗?)

现在,模型和视图应该相互通信。我想将视图实现为单页面应用程序。视图将向模型发送命令,模型将事件发送到视图(或视图将轮询模型以查找事件)。视图将根据收到的事件自行更新。

我的问题是,我应该使用什么通讯技术? HTML预览中的HTML页面可以访问VSCode / Atom / Electron / Node API吗?我可以共享对象实例,还是做一些轻量级的IPC?到目前为止我还没弄清楚。

当用户点击设置为特定方案href的{​​{1}}或我为我注册的链接时,我发现我可以调用VSCode命令或刷新整个页面command://)。

我成功在扩展过程中打开HTTP侦听器(TextDocumentContentProvider),并通过HTML预览端的http.createServer进行通信。但它看起来像是一个沉重的过度杀伤。

我想知道是否有更合适的方法可以做到这一点?

2 个答案:

答案 0 :(得分:1)

Almenon指的是1.21版本(2018年2月)发布的当前提议的Webview API。目前,这似乎是一种更好的HTML预览方法。但是为了使用API​​,有特殊说明。从发行说明:

  

仍然建议使用这些API,因此为了使用它,您必须通过向package.json添加"enableProposedApi": true来选择它,并且您必须将vscode.proposed.d.ts复制到您的扩展项目中

未澄清(可能应该是)的是如何将下载的声明文件添加到项目中。一种方法是将文件放在$/node_modules/vscode旁边,vscode.d.ts旁边,这是在安装后生成的。然后将以下行添加到vscode.d.ts的顶部:

/// <reference path="vscode.proposed.d.ts" />

这将链接类型声明文件。要完成安装过程的这一部分,请编写构建任务以执行此操作,然后在vscode:postinstall中的package.json脚本中调用它。

答案 1 :(得分:0)

VSCode有一个新的API,可以让这更容易。

https://github.com/Microsoft/vscode/issues/43713

您可以找到新的API here

尝试新API:

  1. 将“enableProposedApi”:true添加到package.json

  2. 手动下载vscode.proposed.d.ts并将其添加到您的项目中:https://raw.githubusercontent.com/Microsoft/vscode/master/src/vs/vscode.proposed.d.ts

  3. 使用最新的VS Code insiders build
  4. 运行您的扩展程序