@tomjs/vscode-extension-webview

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 https://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: `https://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

index.d.ts provided by unpkg.com.

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.

react
vue

Important Notes

v2.0.0

Breaking Updates:

The simulated acquireVsCodeApi is consistent with the acquireVsCodeApi of @types/vscode-webview, and sessionStorage.getItem and sessionStorage.setItem are used to implement getState and setState.

Name		Name	Last commit message	Last commit date
Latest commit History 34 Commits
.husky		.husky
examples		examples
src		src
.commitlintrc.cjs		.commitlintrc.cjs
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc.cjs		.eslintrc.cjs
.gitattributes		.gitattributes
.gitignore		.gitignore
.lintstagedrc.cjs		.lintstagedrc.cjs
.prettierignore		.prettierignore
.prettierrc.cjs		.prettierrc.cjs
.stylelintignore		.stylelintignore
.stylelintrc.cjs		.stylelintrc.cjs
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
README.zh_CN.md		README.zh_CN.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
tsup.config.ts		tsup.config.ts

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

@tomjs/vscode-extension-webview

Install

Usage

Documentation

Examples

Important Notes

v2.0.0

About

Uh oh!

Releases 10

Packages

Uh oh!

Languages

License

tomjs/vscode-extension-webview

Folders and files

Latest commit

History

Repository files navigation

@tomjs/vscode-extension-webview

Install

Usage

Documentation

Examples

Important Notes

v2.0.0

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 10

Packages 0

Uh oh!

Languages

Packages