下面我主要演示用iframe的方式,另一种嵌入方式推荐大家去看一下 CodeGeeX 插件源码如何做的,引入了一套vscode风格的UI组件@vscode/webview-ui-toolkit,源码里面的webviewUI文件夹与translationWebviewProvider.ts文件都是相关代码。 1. 新建vue3+vite+ts项目 找一个舒服的文件夹,打开cmd cmd 复制代码 npm init vi...
下面我主要演示用iframe的方式,另一种嵌入方式推荐大家去看一下CodeGeeX 插件[4]源码如何做的,引入了一套vscode风格的UI组件@vscode/webview-ui-toolkit,源码里面的webviewUI文件夹与translationWebviewProvider.ts文件都是相关代码。 1. 新建vue3+vite+ts项目 找一个舒服的文件夹,打开cmd 代码语言:javascript 代码...
我们使用 vue 和 react 开发 app 时并不在 vscode 插件环境内,既没有message消息可以监听,也没有acquireVsCodeApi 只有webpack 打包扔到插件项目并启动调试后才能使用上述的方法,在开发中这是不可能的。 而且最重要的一点是,大部分 webview 插件并不需要全双工通信,只需要 vscode 向 webview 传递数据完成初始化即...
下面我主要演示用iframe的方式,另一种嵌入方式推荐大家去看一下 CodeGeeX 插件源码如何做的,引入了一套vscode风格的UI组件@vscode/webview-ui-toolkit,源码里面的webviewUI文件夹与translationWebviewProvider.ts文件都是相关代码。 1. 新建vue3+vite+ts项目 找一个舒服的文件夹,打开cmd cmd 复制代码 npm init vi...
vscode-resource:/Users/test/workspace/vscode-plugin-demo/lib/vue-2.5.17/vue.js 使用方法如下: panel.webview.html = getWebViewContent(context,'src/view/test-webview.html'); 3.4. 消息通信 重头戏来了,Webview和普通网页非常类似,不能直接调用任何VSCodeAPI,但是,它唯一特别之处就在于多了一个名叫acqu...
vscode-resource:/Users/test/workspace/vscode-plugin-demo/lib/vue-2.5.17/vue.js 使用方法如下: panel.webview.html=getWebViewContent(context,'src/view/test-webview.html'); 消息通信 重头戏来了,Webview和普通网页非常类似,不能直接调用任何VSCodeAPI,但是,它唯一特别之处就在于多了一个名叫acquireVsCode...
npm run build:webview 1. 对vue工程进行编译打包,然后按F5,进入vscode插件的调试模式,然后按Ctrl/Command+Shift+P打开命令面板,在里面输入 Hello World,就能激活这个示例插件了。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Asxg3dw2-1669128090450)(:/75b7c0719615454ba7609f4cf025...
在团队降本提效的基建中,洛竹开发了一款 vscode 插件,第一版我使用的是 vscode 内置UI,虽说也能用,但是用户体验欠佳。由于 vscode 内置 UI 不够灵活,一番调研后我决定使用 webview 重构。 开发过 vscode 插件的同学可能对插件开发知识点多、文档阅读困难、参考资料少有所体会。基于 webview 开发插件更是如此,寻...
1. 新建vue3+vite+ts项目 2. 将web页面展示在vscode侧边栏 (1) 插件项目修改,把视图注册到侧边栏,完成消息传递 (2) web项目修改,增加事件监听 四:接入大模型对话能力,实现ChatUI 1. 大模型接入准备 2. nodejs调用api 3. 前端接口调试 五:注册开发者账号并发布插件 1. 推荐教程 2. 增加插件商店图标 3....
3. 4. 5. 6. 7. 8. 9. 10. 这样我们在开发网页的时候就正常写相对路径就好了。 注意事项:如果你使用Vue或者其他前端框架来进行插件Webview的开发,就要注意资源的引入。以上封装的方法只对页面中hardcode的资源进行了替换。 解决方法2 ...