When using
webview.htmlinvscodeextension development,HMRofvue/reactis 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
# pnpm
pnpm add @tomjs/vscode-extension-webview
# yarn
yarn add @tomjs/vscode-extension-webview
# npm
npm i @tomjs/vscode-extension-webviewextension
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';- index.d.ts provided by unpkg.com.
First execute the following command to install dependencies and generate library files:
pnpm install
pnpm buildOpen the examples directory, there are vue and react examples.
Breaking Updates:
- The simulated
acquireVsCodeApiis consistent with theacquireVsCodeApiof @types/vscode-webview, andsessionStorage.getItemandsessionStorage.setItemare used to implementgetStateandsetState.