vscode-webview-tool

方便vscode插件开发中使用webview的工具，方便将vue/react等框架生成的文件 作为vscode插件webview的html，并提供了双向注册RPC的方法，方便vscode插件与html互相调用

主要功能

• 将普通html嵌入vscode插件webview
• 提供双向注册RPC的方法
• 为html本地调试提供mock vscodeAPI 和 mock RPC注册

安装

npm install vscode-webview-tool

使用

vscode插件

生成webview html

import { getHtmlForWebview } from 'vscode-webview-tool';

webview.html = getHtmlForWebview(context,'build/web','index.html');

context 为 vscode.ExtensionContext, 'build/web' 是web文件在项目下的路径， 'index.html' 为web的入口文件，多入口可以配置为其他入口文件名

对html的要求

不支持在js拆包懒加载。 可以在html中加载多个js,但是不能在js中动态加载本地js, 如lazyload

注册方法给html调用

// vscode
import { VscodeServiceProvider } from 'vscode-webview-tool'

webview.html = getHtmlForWebview(context,'build/web','index.html')

const serviceProvider = new VscodeServiceProvider(webview)
serviceProvider.provideService({
    common:{
        something: ()=>{
            // do something
        }
    }
})

//html 调用
import { WebServiceProvider } from 'vscode-webview-tool/lib/web'

const serviceProvider = new WebServiceProvider()
serviceProvider.callService('common','something')

html

调用vscode插件注册的方法

import { WebServiceProvider } from 'vscode-webview-tool/lib/web'

const serviceProvider = new WebServiceProvider()
serviceProvider.callService('common','something')

注册方法给vscode调用

与vscode插件中一致

// html
import { WebServiceProvider } from 'vscode-webview-tool/lib/web'

const serviceProvider = new WebServiceProvider()
serviceProvider.provideService({
    common:{
        something: ()=>{
            // do something
        }
    }
})

// vscode 调用
import { VscodeServiceProvider } from 'vscode-webview-tool'

const serviceProvider = new VscodeServiceProvider(webview)
serviceProvider.callService('common','something')

vscode api

获取了vscodeApi, 在非vscode环境也可以使用, 非vscode环境使用localStorage模拟State, 方便web调试

import { vscode } from 'vscode-webview-tool/lib/web'

vscode.postMessage('...')
vscode.getState()
vscode.setState({ a:1, b:2 })

示例项目

issue催催就有示例了...