VSCode插件开发入门-HelloWord

597 阅读2分钟

创建项目

npm install -g yo generator-code
yo code

image.png 打开项目,需要先安装推荐插件,不然会有下面的问题一 image.png

不支持使用pnpm

vsce打包工具不支持pnpm, 对应讨论: github.com/microsoft/v…

调试

F5可以开启调试,实际运行的是.vscode/launch.json配置的任务

测试命令:设置 -> 命令面板 -> 输入hello world回车

image.png

问题一: F5没有弹出调试窗口

image.png

原因: launch.json配置了preLaunchTask,运行的是task.json中的任务, 其中有两个problemMatcher esbuild-watchtsc-watch,如果没有安装对应插件查看时会有黄色警告

解决方法:

  • esbuild-watch: .vscode/extensions.json已经声明了需要的插件,在插件搜索@recommended,安装对应的插件即可
  • tsc-watch: 不要禁用内置的typescript插件,可以搜索@builtin typescript查看,之前vue3 使用volar推荐使用接管模式,需要禁用内置的typescript, 现在不需要了
volar的接管模式:

接管模式已废弃,下面是对应的更新日志: github.com/vuejs/langu…

问题二:注册命令不生效

原因:打开开发人员工具查看报错,发现是版本问题,package.json默认生成的engines.vscode是1.89.0,我本地的版本是1.88.0,改为1.75.0, @types/vscode也要修改为对应版本,重新下载一下依赖

打包

npm install -g vsce
vsce package

image.png 需要修改一下README.md,重新执行

image.png 在当前目录会生成安装包.vsix

发布

注册账号

dev.azure.com/ 可以使用github账号绑定

生成个人令牌

image.png

生成publisher

marketplace.visualstudio.com/manage/crea…
需要起一个发行人名称,在package.json中添加publisher,添加值

"publisher": "xxxxx",

发布

修改package.json的name字段,起一个特别点的名字,防止重复

执行vsce login publisherName,publisherName替换成你上面注册的发行人名称,然后需要输入个人令牌,现在可以发布了

 vsce login publisherName
 vsce publish