Home

Awesome

@tomjs/vscode-extension-webview

npm node-current (scoped) NPM English | 中文

When using webview.html in vscode extension development, HMR of vue/react is supported.

Due to the limitations of webview.html, HMR of vue/react cannot be used directly, so some special processing is required to achieve it. You can implement HMR by adding an <iframe> tag to the content that returns html and setting the src to http://localhost:5173. The client sends a message to the parent webview through postMessage to implement the API of acquireVsCodeApi.

Others can also monitor front-end code changes and refresh the front-end code through commands.executeCommand('workbench.action.webview.reloadWebviewAction').

If you use vite for development, @tomjs/vite-plugin-vscode is recommended

Install

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

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

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

Usage

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>`;
}

Place the client code in main.ts of vue/react at the top.

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

Documentation

Examples

First execute the following command to install dependencies and generate library files:

pnpm install
pnpm build

Open the examples directory, there are vue and react examples.

Important Notes

v2.0.0

Breaking Updates: