阅读 4623

vscode-yapi-接口文档高效工具

之前 vscode-yapi 插件发布的时候,显得有些仓促,文档也都没有,给使用者造成了一些困惑,现在把文档补上了,按我之前的意愿实现了大部分功能,今天正好重新分享一下。

首先在这里非常感谢yapi团队对openapi的支持,才有了今天vscode-yapi的出现。其实我刚开始本只想做成公司内部的插件,后面做着做着自己心想既然有它的价值,为何不把它做成vscode-yapi插件发布出去。

vscode-yapi 是基于 vscode extension + yapi openapi 开发的一款接口文档高效工具

vscode-yapi 安装条件:"vscode":"^1.44.0" 、"yapi": "^1.5.6"

vscode-yapi 文档地址:lisiyizu.github.io

vscode-yapi 更新日志:github.com/lisiyizu/vs…

开发 vscode-yapi 的目的:

  • 统一前端团队在接口定义的规范
  • 提升接口文档的可维护性
  • 提升前端团队对接接口文档的效率

vscode-yapi 的功能如下:

  • 插件设置:yapi配置主题设置项目token管理
  • 模板设置:参数模板api模板
  • 接口文档:光标定位接口,右键直接查看接口文档
  • 管理中心:跨项目的去勾选,快速生成api模板定义
  • 快速生成模板代码:快速直接生成模板代码
  • 悬浮预览接口:selection(选中) + hover(鼠标划过) 悬浮预览接口功能

vscode-yapi 功能界面如下:

插件设置界面


模板设置界面


接口文档界面


管理中心界面


快速生成模板代码操作演示GIF

悬浮接口预览功能


截止到 2020-06-02 17:10 安装下载量有 399 人次了,最新版本已经更新到 v1.2.0


开发插件不赚钱完全是为了交个朋友


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

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

希望后续可以有更多有想法的人加入进来一起去维护它,一个人的想法毕竟有限。如果你对vscode-yapi 插件有一些想法 或 建议。

欢迎入群交流,[vscode-yapi-沟通交流群]  QQ群号:1065561413 

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

笔者正在观望工作机会,本人在北京,有坑位欢迎推荐。