如何发行你的插件,跟我学 VSCode 插件开发 | 创作者训练营

简介: VSCode插件开发系列教程计划

VSCode插件开发系列教程计划


计划赶不上变化,随时迭代,欢迎留言



  • 介绍 package.json 配置


  • TreeView


  • WebView


  • 监听代码输入


  • 如何发行你的插件 ☑️


安装官方打包工具


首先我们要安装上这个官方的插件发行工具,可以把我们的插件工程打包成.vsix文件,也可以直接发布到插件市场当中


npm i vsce -g


后面使用命令发行插件时,如果你没有设置package.json里的repository会收到提示。但不是非要填(插件可以不开源),选N即可。


打包成 .vsix 文件


vsce package


打包完成后,会在工程目录生成.vsix文件,这个文件的安装只能通过插件搜索右上方的菜单来进行


1650857211(1).png


把插件发行到插件市场


注册Azure开发者账号


先得有一个 微软通行证 ,然后打开 azure开发者中心 ,新建一个 azure开发组织


新建个人令牌


注意选择 Full access 和 过期时间,如果令牌过期,需要回到这个页面再新建令牌。


1650857242(1).png


这步之后,一定要复制并保存好你的令牌字符串哦。之后只能新建,是找不到的。


注册插件市场发行账户


接着我们 注册插件市场发行账号,也在这可以管理所有市场中自己发布的插件。


1650857273(1).png


当然我们也可以使用vsce命令来创建发行账户


vsce create-publisher 发行账户名称


发行


vsce publish


这个过程里还会检查一些package.json的必填项,一切无误的话,就会看到下面这个图


1650857309(1).png


发行成功啦!

但此时我们的插件在市场中还搜不到,等个5-10分钟一般就有了。


1650857464(1).png


注意事项


  • README.md是插件主页的详情介绍;


  • 记得更新package.json里的版本号;


  • 如果package.json中填写了repository字段,在发布时会要求你先提交仓库;


  • README.md中的图片资源必须全部是HTTPS的;


  • CHANGELOG.md是插件主页的变更选项卡;


一但用户安装了你的插件,只要不卸载,插件有新版时后会自动更新的。


相关文章
|
2月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
|
24天前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
|
1天前
|
API 开发工具 C++
【专栏:工具与技巧篇】使用代码编辑器(VS Code/Sublime Text)提升开发效率
【4月更文挑战第30天】在VS Code与Sublime Text两大流行代码编辑器中,开发者可借助其高效特性提升编程效率。VS Code拥有丰富的插件生态、内置Git集成、强大的调试工具、智能提示和多文件导航功能。Sublime Text则以其轻量级、快速响应、多光标编辑及自定义构建系统见长。学习编辑器的键盘快捷键、自定义配置、使用内置终端以及键绑定和宏,将助开发者进一步提高开发效率。选择适合自己的编辑器并不断适应新技术是提升开发工作流的关键。
|
9天前
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
10 0
|
24天前
|
JavaScript
VSCode 开发 Vue 语法提示
VSCode 开发 Vue 语法提示
|
24天前
Vscode 插件-代码敲出不同的特效
Vscode 插件-代码敲出不同的特效
|
2月前
|
NoSQL 关系型数据库 开发工具
最新最全 VSCODE 插件推荐(2023版)
最新最全 VSCODE 插件推荐(2023版)
128 0
|
2月前
|
Java
VSCode 插件Code Runner 中文提示乱码
VSCode 插件Code Runner 中文提示乱码
|
Web App开发 .NET API
用VSCode开发一个asp.net core2.0+angular5项目(5): Angular5+asp.net core 2.0 web api文件上传
第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 第二部分: http://www.cnblogs.com/cgzl/p/8481825.html 第三部分: https://www.
1494 0
|
Web App开发 JavaScript .NET
用VSCode开发一个asp.net core 2.0+angular 5项目(4): Angular5全局错误处理
第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 第二部分: http://www.cnblogs.com/cgzl/p/8481825.html 第三部分: https://www.
1744 0