vscode-yapi-插件首发「交个朋友」

3,083 阅读3分钟

借用老罗的话开个场:“开发插件不赚钱,完全是为了交个朋友!”


很高兴在今天把vscode-yapi-插件首发,vscode-yapi是一个高效的接口文档管理工具。在这里非常感谢yapi团队对openapi的支持,才有了今天vscode-yapi的出现。其实我刚开始本只想做成公司内部的插件,后面做着做着自己心想既然有它的价值,为何不把它做成vscode-yapi插件发布出去。

对于前端开发来说,接口联调的时间占据了我们大部分的时间,每当想起我们来回的从浏览器 和 IDE之间来回切换接口文档的时候。这种体验我就感觉有点痛苦,首先这个是有点浪费时间,影响工作效率,其次做的也都是来回的复制粘贴。这种状态让我这种'懒人'萌生了是否可以开发一款 vscode-yapi 插件来解决这个问题。一开始没思路不知道开发一款vscode插件从何入手,自己也没把握这个事情能做成。说到这里要感谢早早聊大会,同时更要感谢一个人,他是早聊二期分享的嘉宾,来自阿里妈妈@崇志。我对他分享的东西印象比较深,他分享了他们团队开发的 vscode-magix 插件,并且开源了(github.com/thx/vscode-…)。vscode-magix 便成了vscode-yapi 的导师和灯塔。在这里建议有想法开发或者学习vscode插件的同学,可以参考下vscode-magix项目。

安利一下:如果你们公司接口管理平台用的是yapi,而你们前端团队恰好也在用vscode IDE,不妨试一下这个插件。

闲话少说,马上上干货,分享内容:

  •  vscode-yapi 演示视频 (2段视频)
  •  发布介绍 vscode-yapi 插件 (14张ppt图片)
  •  vscode-yapi 未来展望

vscode-yapi 演示视频(2段视频)

视频一(B站视频:3分29秒):www.bilibili.com/video/BV1AK…

视频二(B站视频:1分18秒):www.bilibili.com/video/BV1Je…

视频二 (GIF演示):


快速生成api模板规范,马上更新版本!!!!



发布介绍 vscode-yapi 插件 (14张ppt图片)

插件市场下载地址:marketplace.visualstudio.com/items?itemN…

vscode插件主要包含四大功能操作:

  1. 插件设置(包含了个性化的主题设置,以及包含yapi的入口配置:domain、token、id)
  2. 模板设置(包含2个类型的模板:参数模板、api模板【亮点】)
  3. 查看接口文档 (鼠标定位到接口,一键跳转到接口文档【亮点】)
  4. 管理中心(跨项目的选择导出不同的api模版数据【亮点】)








1.1.7 更新版本:插件设置



1.1.0更新版本:模板设置


1.1.3更新版本:新增request模板代码,案例(新)


gif 演示:



1.1.3 更新版本:接口文档页面



vscode-yapi 未来展望

未来会随着yapi的更新去做一些更新迭代,比如:

1: yapi 插件设置webview页面来维护项目数据,马上就来~

2: 模板做成接口可以上传维护,马上就来~

3: 参数和返回值转成 ts schema 文件(目前我没这种需求,简单的可以做json-to-flow,后续可以参考下这篇文章:zhuanlan.zhihu.com/p/114801898

.... 等待大家留言提需求~


希望后续可以有更多有想法的人加入进来一起去维护它,目前我个人的想法有限。如果你对vscode-yapi 插件有一些想法 或 建议,欢迎入群交流,[vscode-yapi-沟通交流群] QQ群号:1065561413 (上面有二维码👆)。


版本更新,可以关注 Github 地址:https://github.com/lisiyizu/vscode-yapi


如果你觉得还可以,欢迎点赞👍👍👍支持、留言评论