vscode前端代码生成器，根据接口文档生成

前后端开发过程中，后端都会提供swagger、yapi类型的接口文档，开发过程中反复CV？为了开发提效，做了个codegen接口文档代码生成工具，可根据接口定义快捷生成表格、表单、api定义，typescript定义等等前端代码，更可以在线维护自定义生成方法模板，工具已发布vscode插件社区。

下图为工具全貌，类swagger-ui2.0样式页面。

工具支持的是open api内容格式的接口文档，如接口文档地址是https://juejin.cn/editor/doc.html, 输入框输入https://juejin.cn/editor，点击获取即可，当前案例提供的是swagger模板https://petstore.swagger.io/v2/swagger.json。

功能介绍

1. api复制，api链接一键复制；复制api通过配置方法生成代码（如下，也可自定义配置方法）

/**
 * uploads an image
 */
 const postUploadImage = (params) => {
  return axios(
    {
      path: '/pet/{petId}/uploadImage',
      method: 'post'
      params
    }
  )
};

1. 请求参数、响应参数代码生成，操作如下（勾选需要字段后生成代码）生成代码如下：
2. 模型代码生成（方法：模型配置、TypeScript定义 等）
   
3. api链接一键复制
4. 参数名称、参数说明单击复制
5. 枚举生成，基于参数说明#ENUM
6. 自定义方法本地维护
   

TODO

1. 在线api联调
2. api联调请求头默认设置
3. form代码生成前增加组件类型、rule手动页面操作
   ...

仓库链接

1. https://github.com/RootLinkFE/roothub-codegen
2. GitHub - RootLinkFE/vscode-roothub: RootHub VSCode 插件

希望工具能给你的开发提高能效，欢迎提pr

这篇好文章是转载于：学新通技术网