关于vscode插件开发的一些事、一些坑
文章目录
之前没有接触过
JavaScript
和
TypeScript
最近在整
vscode
的插件开发,做一些简单的笔记。
用的是yo code
脚手架生成的工程,根据官方推荐,用的是typescripts
语言开发,开发过程还比较顺利,demo版已经开发完毕,但是在最终想要打包成.VSIX
格式的时候却发现事情好像没那么简单。
直接在webview
的ts
文件里面插入了html
文件,‘html’文件调用的是外部的css
文件和js
文件。按照官方API
文档,将css``js
和图片都转成了vscode
的uri
,如下:
codiconsStyleUri: webview.asWebviewUri(vscode.Uri.joinPath(codiconsRoot, 'codicon.css')).toString(),
dockerIconUri: webview.asWebviewUri(vscode.Uri.joinPath(resourcesRoot, 'docker_blue.png')).toString(),
在开发过程中用F5
进行调试的时候,一切布局、功能都是正常的。但打包成VSIX
进行安装之后,发现图片不能显示,布局完全没有生效。尝试将工程直接拷贝到vscode
的插件安装目录下,一切功能又都是正常的。所以怀疑是vsce
工具的问题。
官网文档写了,不支持SVG
格式的图片打包,我还特意用了PNG
.
网上查了很久,也没有找到任何有用的信息。
最后,决定重新生成一个测试工程,想验证简单的工程打包是否一样。
结果发现,用TypeScript
写的工程打包后,就是简单的侧边栏图标都显示不了;然而用JavaScript
写的同样的工程就是正常的。简直无语。
ript`写的同样的工程就是正常的。简直无语。
还需要进一步排查,虽然看到的大多数例程用的是JavaScript
写的,但也看到一些开源的例程,是用typescript
写的,功能正常。是不是有特殊的处理方式还有待研究。