VSCode插件（Extension）的开发及发布至市场

文章目录0.背景1.准备1.1.Microsoft账号1.2.创建发布者身份2.开发3.1.照虎画猫3.发布3.1.打包3.2.发布至市场4.结语0.背景前几年在使用vscode时就一直很好奇他的extension是怎么开发和发布的。但是初步了解到他的开发主要是使用htmljs架构的而我主要是使用C编写桌面应用的就觉得有心无力放弃了。但是随着AI编程的春风吹遍寰宇而手头上的确有个需求目前市场上的Extension无法满足自然而然的Vibe Coding走起。这个是我这次弄的Extension【Disk Size Treemap】主要是用Treemap来可视化文件/文件夹的大小以及文件大小排序的有兴趣的可以安装看看。1.准备1.1.Microsoft账号首先你得先注册一个Microsoft账号可以到官网注册【https://login.live.com/】在注册登录的过程中可以使用Github账号登录。目前貌似大多开发相关的网站都可以使用Github账号来登录挺方便的。1.2.创建发布者身份拥有 Microsoft 账号后你需要创建一个用于发布插件的“发布者Publisher”身份。到这里创建【https://marketplace.visualstudio.com/manage/publishers/】填好你的基本信息后便创建了一个发布者身份。创建好发布者后理论上你就可以发布extension了。在发布时有两种发布方式一种是使用AzureDevOps的Personal access token (PAT)来自动发布但是我这边在注册或者登录Azure时有问题所以我就使用不了这种方式。第二种是直接在前面的发布者页面【https://marketplace.visualstudio.com/manage/publishers/】手动发布我是采用的这种方式。2.开发3.1.照虎画猫开发就没啥好说的了打开你常用的agent然后找一个市场上比较多人用的Extension然后打开他的页面找到他的代码仓库点击一下确认能够打开因为有一些代码仓库是私有的我们/agent无法访问然后就让agent参考这个仓库搞一个extension项目实现你的需求。在编写时在VSCode中按下F5就会触发调试此时这个你自己编写的Extension就会自动安装到弹出来的VSCode窗口中而原来的VSCode窗口会出现一个调试控制面板可以用来停止、重启程序等操作。在弹出来的VSCode窗口中你就可以检查测试自己写的Extension的功能是否有问题。一切检查就绪后就可以打包发布了3.发布在打包发布之前要先在package.json中设置好版本号、图标、命令等信息。3.1.打包打包的话需要用到VSCode提供的工具vscenpminstall-gvscode/vsce安装好后执行# 打包成 .vsixvsce package就可以得到Extension安装文件.vsix了。3.2.发布至市场到发布者页面【https://marketplace.visualstudio.com/manage/publishers/】点击New extensionVisual Studio Code然后将打包号的vsix文件拖放到弹出来的页面中自动上传然后你就可以看到列表中出现了你的插件。注意此时还不能立马在市场中搜索到你的那个Extension因为Extension的上架需要审核。处于审核中的话版本那里的图标是个三角形的播放按钮的等那个按钮变为对勾或者微软发右键通知你后就可以在VSCode的市场中搜到你的Extension了。4.结语更详细的开发/发布相关的资料可以查阅官方文档【Publishing Extensions】参考【最新: 从0开始写个vscode扩展并发布到应用市场】【Publishing Extensions】