YAPI TO CODE

一个基于 YAPI 生成 TS/Dart 的 VS Code 扩展，支持浏览整个 Yapi 组，支持自定义模板

marketplace.visualstudio

特性

🙈 0配置、开箱即用
🔥 全接口预览
✨ 内网可用
😼 多种登录方式
⚡️ 高性能
✍️ 支持 js 配置自定义输出
💡 webpack 5 (计划迁移到 Rspack)
...

TODO:

[ ] 1. 自定义生成模版 & 切换模版预览
[ ] 2. 项目组可选 - 加快请求 & 提高性能
[ ] 3. 请求异步加载
[ ] 4. 优化页面性能
[ ] 5. 支持自定义解析
[x] 6. yarn 替换为 pnpm
[ ] 7. 迁移到 Rspack
[ ] ...

登录 YAPI

初次使用，输入 yapi 的服务地址 & 账号密码，进行登录

使用

登录后，vscode 便拥有了访问 yapi 接口的能力，能够自动把任意接口转化为类型

代码诊断功能

Yapi To Code 对文档中未定义参数类型或返回值类型的接口进行波浪形警告，可以通过快速修复（quick fix）直接添加接口类型到项目中。

接口浏览器

Yapi To Code 还提供了接口预览的功能，可以通过搜索选择接口对接口类型进行预览，然后把类型复制到项目中。

这种方式比较笨拙，推荐使用代码诊断功能，一条龙完成

自定义渲染

工作区配置：可以修改输出的字段、类型填充的位置等

配置文件：yapi-to-code.config.cjs 优先级更高

module.exports = () => {
  return {
    // resType 放置的位置 是外层的 Promise<T> 还是作为请求方法的泛型
    // 'outerFunction' | 'fetchMethodGeneric'
    responseTypePosition: 'outerFunction',
    // 生成 res 包含的属性，默认 all, 可指定为 data
    responseKey: 'all',
    genRequest(
      {
        comment,
        fnName,
        IReqTypeName,
        IResTypeName,
        requestFnName,
        apiPath,
      },
      data
    ) {
  return (
      `\n${comment}\n` +
      `export async function ${fnName}(params: I${IReqTypeName}) {
  return request.${requestFnName}<${IResTypeName}>('${apiPath}', params)
}`
      )
    }
  }
}

Webview & VS Code Data Flow.png

开发调试

需要依赖 src/server src/webview 的资源

编译前置依赖

pnpm i
cd src/server && pnpm start
cd src/webview && pnpm start

选择 Client + Server

Tips: node 日志在源码编辑器的调试控制台查看，webview 日志在唤起的编辑器唤起 devtool 查看

打包发布

通过 vsce 打包发布 VS Code Extension

pnpm package

pnpm pub

Yapi to Code

zhixiaoqiang