而且最重要的一点是,大部分 webview 插件并不需要全双工通信,只需要 vscode 向 webview 传递数据完成初始化即可,比如图片查看器,它只需要 vscode 把 图片的 uri 传给 webview 就行。 为了更好的 vue 插件开发体验,我介绍一种我使用的开发方法。 首先,我们假设我们开发的是一个图片查看器,它需要一个图片的链接...
下面我主要演示用iframe的方式,另一种嵌入方式推荐大家去看一下CodeGeeX 插件[4]源码如何做的,引入了一套vscode风格的UI组件@vscode/webview-ui-toolkit,源码里面的webviewUI文件夹与translationWebviewProvider.ts文件都是相关代码。 1. 新建vue3+vite+ts项目 找一个舒服的文件夹,打开cmd 代码语言:javascript 代码...
下面我主要演示用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...
1.把开发好的vue项目打包,如果打包出来的vue执行是空白页,就需要看看之前我写的文章,vue 3 clie打包配置 -这里要注意的是,要确保vue项目里面的public有一个index用作插件打开时的模板,等一下需要做base的特换,不然插件是不知道网页的根目录在哪里 index.html ...
VSCode webview 对于资源的注入很严格!! 目前的策略是把 web 站点打包成一个index.js和 index.css去注入! 资源链接必须转换成 vscode 允许的资源格式!!! 代码语言:javascript 代码运行次数:0 运行 AI代码解释 //path: src/panels/VueBoilerplatePanel.ts private _getWebviewContent(webview: Webview, extension...
npm run build:webview 1. 对vue工程进行编译打包,然后按F5,进入vscode插件的调试模式,然后按Ctrl/Command+Shift+P打开命令面板,在里面输入 Hello World,就能激活这个示例插件了。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Asxg3dw2-1669128090450)(:/75b7c0719615454ba7609f4cf025...
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 ...
vue[7],vetur[8],Vue 3 Snippets[9],Vue VSCode Snippets[10] 代码段这玩意,你也可自定义,可以参见VSCode创建自定义代码段[11] 代码检查和格式化 ESLint[12],Prettier - Code formatter[13],Beautify[14] 其他 open in browser[15] 由于VSCode自身功能的增强,NPM-Scripts[16],Change Case[17]等的插件就...