VSCode 扩展 IPC 与 HTML 预览中的 UI答案

【问题标题】：VSCode extension IPC with UI inside HTML previewVSCode 扩展 IPC 与 HTML 预览中的 UI
【发布时间】：2017-04-06 18:01:03
【问题描述】：

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

大致将其拆分为“模型”和“视图”，我计划在扩展过程中实现模型，并计划将视图实现为基于TextDocumentContentProvider 的HTML 预览。（有没有更好的方法？）

现在，模型和视图应该相互通信了。我想将视图实现为单页应用程序。视图将向模型发送命令，模型将向视图发送事件（或者视图将轮询模型以获取事件）。视图会根据收到的事件自行更新。

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

我发现，当用户单击将href 设置为特定方案（command:// 或我为TextDocumentContentProvider 注册的那个）的链接时，我可以调用 VSCode 命令或刷新整个页面。

我确实成功在扩展过程中打开了一个HTTP监听器（http.createServer），并在HTML预览端通过XMLHttpRequest进行通信。但在我看来，这有点矫枉过正。

我想知道是否有更合适的方法来做到这一点？

【问题讨论】：

你找到这个问题的答案了吗？
万一其他人偶然发现：答案看起来是“不，没有内置的通信方式”，但使用 socket.io 进行通信感觉很容易和轻量级。
您可以使用命令链接与TextDocumentContentProvider webviews 进行通信。请参阅old markdown preview for an example of this 新的 webview API 使这变得更加容易

【解决方案1】：

Almenon 指的是在 1.21 版（2018 年 2 月）中发布的当前提议的 Webview API。就目前而言，这似乎是一种更好的 HTML 预览方法。但为了使用 API，有特殊说明。来自发行说明：

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

没有说明（可能应该说明）的是如何将下载的声明文件添加到项目中。一种方法是将文件放在$/node_modules/vscode 中，在安装后生成的vscode.d.ts 旁边。然后将以下行添加到vscode.d.ts 的顶部：

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

这将链接类型声明文件。要使这部分安装过程成为安装过程的一部分，请编写一个构建任务来完成它，然后在 package.json 的 vscode:postinstall 脚本中调用它。

【讨论】：

【解决方案2】：

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

您可以找到新的 API here

要试用新的 API：

将 "enableProposedApi": true 添加到您的 package.json 中
手动下载 vscode.proposed.d.ts 并将其添加到您的项目中：https://raw.githubusercontent.com/Microsoft/vscode/master/src/vs/vscode.proposed.d.ts
使用最新的 VS Code 内部人员构建运行您的扩展

【讨论】：