@tomjs/vscode-extension-webview NPM

@tomjs/vscode-extension-webview

node-current (scoped) NPM

在 vscode 扩展开发使用 webview.html 时，支持 vue/react 的 HMR。

由于 webview.html 限制，无法直接使用 vue/react 的 HMR，所以需要做一些特殊处理来实现。在返回 html 的内容中添加 <iframe> 标签，并将 src 设置为 http://localhost:8080，这样就可以实现 HMR。客户端通过 postMessage 向父级 webview 发送消息，来实现 acquireVsCodeApi 的 API。

其他也可以通过监听前端代码变化，通过 commands.executeCommand('workbench.action.webview.reloadWebviewAction') 刷新前端代码。

如果使用 vite 开发，推荐 @tomjs/vite-plugin-vscode

安装

# pnpm
pnpm add @tomjs/vscode-extension-webview

# yarn
yarn add @tomjs/vscode-extension-webview

# npm
npm i @tomjs/vscode-extension-webview

使用

extension

import getHtml from '@tomjs/vscode-extension-webview';

const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewColumn.One, {
  enableScripts: true,
  localResourceRoots: [Uri.joinPath(extensionUri, 'dist/webview')],
});

if (process.env.NODE_ENV === 'development') {
  panel.webview.html = getHtml({
    serverUrl: `http://localhost:5173`,
  });
} else {
  panel.webview.html = /* html */ `
<!doctype html>
  <html lang="en">
</html>`;
}

将客户端代码放到 vue/react 的 main.ts 放在顶部。

// eslint-disable-next-line simple-import-sort/imports
import '@tomjs/vscode-extension-webview/client';

文档

unpkg.com 提供的 index.d.ts.

示例

先执行以下命令安装依赖，并生成库文件：

pnpm install
pnpm build

打开 examples 目录，有 vue 和 react 示例。

重要说明

v2.0.0

破坏性更新：

模拟的 acquireVsCodeApi 与 @types/vscode-webview 的 acquireVsCodeApi 保持一致，改用 sessionStorage.getItem 和 sessionStorage.setItem 来实现 getState 和 setState。