VSCode插件开发过程

353 阅读2分钟
// 安装脚手架
npm install -g yo generator-code

yo code 创建插件目录

期间遇到yo code之后报错的问题,原因是我的node版本不对,我用了nvs改成了18.19.0,好像要求需要16以上以及两个固定低版本,最好么16以上,然后就可以了

接着项目建好之后进行调试,需要点按F5或者运行,这时候会打开新的vscode窗口,这时候这个窗口就是你拿来调试用的

image.png

  • 增加指令和右键菜单栏增加命令

image.png command中增加一个json,格式为

{ "command": "svg-viewer.previewsvg", "title": "Preview SVG"} title为你搜索的指令

在menus的editor/context中增加一个json{ "command": "svg-viewer.previewsvg","when": "resourceExtname == '.svg'" },就是右键菜单中增加一个选项(绑定的command中的内容) when给右键菜单增加判断条件,文件为.svg尾缀才有这个选项,否则不显示

image.png

接下来要对指令被执行时做对应的开发

image.png

在extension.js中,当指令被激活时会调用activate方法,这个方法中去注册自己所编写的对应指令

发版的话到vscode插件市场

也可以不发版,自己使用,下面是不发版的方式

  • 安装命令 npm i vsce -g
  • 直接使用 vsce package 命令进行打包,完成后就会生成一个  .vsix 文件,这个也就是在后续安装插件时要使用的文件。
  • 然后在插件库里面导入

image.png

官方例子中如果跑不起来,是因为我们没有编译源文件生成目标文件,此时我们只需要通过 npm run watch 启用监听模式,让其进行编译即可

记得要打开项目本身,不能上一级然后cd下一级目录,反正我跑不起来

如果你要做webview,那你一定要记得这个命令,Developer: Toggle Developer Tools它可以帮你打开devtools控制台进行排查问题