试开发一款vscode插件(下)

5,328 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第9天,点击查看活动详情

一、 前言

接上期我们完成了项目的初始化,而且也初步完成了插件功能的开发(国庆摆烂不知道写点啥,就不加新功能了),直接带大家伙看看如何打包发布我们写好的插件吧。

二、过程

1、打包

打包工具是vsce

我们先全局安装下

npm i vsce -g

调用命令就能简单完成打包步骤,打包之后的文件格式是vsix

vsce package

这里需要注意以下几点,如果有报错就会打包失败

1、 工程里某个语法错误了,或者变量类型不对啥的,这种一般会有比较详细的报错log,
可以根据这个提示来解决。

2、报了奇怪的错误,工程里也没用到的地方出现了错误,这一般就是node版本过低了,
vsce(版本为2.11.0)最低支持的版本是14及以上。(这次打包就遇到这个问题,
百思不得其解, 最后去vsce的npm地址一看,人家第一句就是nodejs at least `14.x.x`3、需要在packag.json文件里,加上  "publisher": "sanwu",    发布者的属性
还需要将REAMDE.md自动生成的内容删除,再填写自己的内容,不许为空,同时如果
有http,需要改为https,不然都会报这个错误。

**Make sure to edit the README.md file before you package or publish your extension.**

一顿y同意后,就能生成我们的vsix文件啦

1664804547214.png

打包后的vsix可以直接给别人安装。

安装步骤,打开vscode的扩展页面,左侧目录右上角,选择“从vsix安装”or“Install from VSIX”进行安装就能使用了。

2、发布

如果不打算发布到应用市场,到第一小节就可以了。

(1)拥有自己的microsoft账号

去官网 marketplace.visualstudio.com/ ,点击sign in ,新建一个

我直接用谷歌邮箱新建一个

image.png

(2)新建一个组织,项目需要挂载到组织下

登录之后点击右上角的用户名,新建一个组织,组织名默认也行,也可以修改。

image.png

(3)新建一个项目

visibility需要选择public,才能被公开访问 image.png

如果上述的public选不了,那就需要修改这个属性为true

image.png

(4)新建token,vsce只能通过token来访问

点击右上角的personal access tokens

image.png

新建一个,organization和scopes都需要按图选择,才能被公开访问, expiration是有效期,我图里选的是自定义,但最多设置一年有效期。

1664806603712.png

生成的token需要备份保存,因为只会出现一次, 每次发布插件或者迭代更新的时候都要输入这个token。 1664806764565.png

(5)创建发布者

这个命令已经失效

 vsce create-publisher sanwu
 

aka.ms/vscode-crea…

需要手动点击上述网址,登录上面创建好的microsoft账号,这一步需要科学上网,不然创建会失败,看控制台也就是跨域。

1664809614787.png

(6) 登录发布者账号

vsce login sanwu

并填写token值

(7)线上发布

前提,在package.json文件里 增加

"publisher": "sanwu"

版本号也要一致,本文首次发布就0.0.1

"version": "0.0.1"

控制台输入命令vsce publish 版本号

vsce publish 0.0.1

注意:每一次提交的版本号都要跟以前的版本号不同,可以手动修改package.json里的版本号或者vsce publish patch自增版本号

发布之后,需要等3-5分钟,才能在商店里找到

1664810504642.png 1664810287439.png

三、 总结

经过三期文章试开发一款vscode插件(上)试开发一款vscode插件(中)和本文,我们了解了从零到开发并发布一款插件的全过程,api和参考资料都有,不过大多数都是英文版,对我这种英语渣渣真的很不友好,文章不长,但中间查资料的过程真的比较艰辛,注册publisher要翻墙这个还真没想到,后面还是查了好多资料,才在其中一篇里说到这个科学上网的点。

希望文章能对有兴趣开发插件的伙伴,提供一点点帮助。

ps: 我是地霊殿__三無,一起学习进步吧!

微信图片_20221001074313.jpg