VSCode插件开发系列教程计划
计划赶不上变化,随时迭代,欢迎留言
- 使用脚手架新建一个插件 ☑️
- 介绍 package.json 配置
- TreeView
- WebView ☑️
- 监听代码输入
- 如何发布到插件市场 ☑️
最近开发了一个VSCode的插件叫“我爱掘金”,主要就是围绕Webview这个api来实现的。作为前端工程师,只要给你一个Webview,虽然不能撬动地球,但我们可以做很多酷炫的插件呀。比如小霸王插件,彩虹屁老婆插件 等等。
其实VSCode
也是基于electron
框架的桌面软件,也就是说,你在VSCode
里看到的所有的界面本就是网页。那在网页里再显示网页怎么做?相信你也想到了,就是iframe
。
调试Webview
在VSCode
命令面板中,输入Open Webview Developer Tools
后可以打开Webview
的控制台
果然是iframe~
你的插件必须用Webview吗?
官方英文文档地址:https://code.visualstudio.com/api/extension-guides/webview
VSCode官方团队希望插件开发者好好思考如下问题:
- 这个功能真的需要在VS Code中使用吗?作为单独的应用程序或网站会更好吗?
- 使用
Webview
是实现功能的唯一方法吗?您可以改用常规的VS Code API吗?
创建WebviewPanel
这样就能创建一个Webview,渲染html内容。
看上去使用很简单对不对,但在实际使用Webview进行插件开发的过程中,还是遇到了不少坑的:
1号坑:使用本地资源
在VSCode中的Webview无法直接使用相对路径的本地资源。比如下面这段代码,我们引入了一个css,一个js,在body中有一张图片。
直接这样写是无法加载到这些资源的
- 解决方法1
通过一个特殊的协议头vscode-resource:资源文件绝对路径
,为了不影响咱们正常进行网页开发,我们可以封装一个方法,从本地文件读取html内容,统一替换所有资源的路径后再赋值给panel.webview.html
这样我们在开发网页的时候就正常写相对路径就好了。
注意事项:如果你使用Vue或者其他前端框架来进行插件Webview的开发,就要注意资源的引入。以上封装的方法只对页面中
hardcode
的资源进行了替换。
- 解决方法2
使用iframe引入本地路径html,不过VSCode的webview对iframe的限制也特别大,几乎就是除了显示网页,和node环境交互就别想了。
2号坑:允许使用Javascript
默认不支持Javascript
- 解决方法
添加option
,将enableScritps
设置为true,它的默认是false。
3号坑:cookie和localstorage
cookie和localStorage可以用,但是!!!
当VSCode重启后,就全都清空了,所以等于不能用。
- 解决方法
调用VSCode的node环境来保存,这里需要让webview和VSCode插件环境进行通讯。
4号坑:Webview内容被释放
当Webview所在的tab pannel进入后台时(比如切到别的tab了),webview里的内容就会被清除,内存占用被释放。再次切回时会重新加载html内容。
- 解决办法
启用retainContextWhenHidden
消息通讯
- 插件发消息,Webview接收消息
- Webview里的JS
- 插件里的JS
- Webview发消息,插件接收消息
- 插件里的JS
- Webview里的JS
比如前面提到的cookie和localstorage,就可以封装一下消息通讯,通过插件node环境来保存到本地
官方Demo
- https://github.com/microsoft/vscode-extension-samples/tree/master/webview-sample
- https://github.com/microsoft/vscode-extension-samples/tree/master/webview-view-sample