Apifox TypeScript Generator for VS Code

本插件旨在深度集成 Apifox，帮助开发者直接在 VS Code 中查看 API 文档，并自动生成 TypeScript 类型定义和 Service 请求代码，极大提升开发效率。

✨ 核心特性

• 🔗 API 实时同步：一键连接 Apifox 项目，拉取最新的 API 定义。
• �️ API 可视化查看：在 VS Code 侧边栏直接浏览 API 列表，点击即可查看详细文档（包括 URL、参数、请求体、响应结构等），支持 $ref 引用解析和复杂 Schema 递归展示。
• �📦 TypeScript 类型生成：根据 Apifox 数据模型，自动生成精准的 TypeScript 接口 (Interfaces) 和类型定义。
• 🔌 Service 代码生成：自动生成基于 Promise 的请求服务层代码，支持自定义请求库（如 axios），开箱即用。

� 仓库地址

https://github.com/shixindea/apifox-ts

🚀 安装指南

1. 在 VS Code 插件市场搜索 Apifox TypeScript Generator 并安装。
2. 使用 VS Code 打开您的前端项目。

⚙️ 配置说明

快速配置

设置默认配置：

手动配置

请在项目的 .vscode/settings.json 或全局用户设置中添加以下配置：

{
  "apifox.accessToken": "YOUR_APIFOX_ACCESS_TOKEN",
  "apifox.projectId": "YOUR_APIFOX_PROJECT_ID",
  "apifox.outputDir": "src/api" // 生成代码的输出目录，默认为 src/api
}

❓ 如何获取配置信息

1. Access Token: 打开 Apifox -> 头像 -> 账号设置 -> API 访问令牌 -> 新建令牌。
2. Project ID: 打开 Apifox 项目 -> 项目设置 -> 基本设置 -> 复制项目 ID。

📖 使用指南

1. 同步 API 与生成代码

• 打开命令面板 (Ctrl+Shift+P / Cmd+Shift+P)。
• 输入并执行命令：Apifox: Sync API & Generate Code。
• 插件将在您配置的输出目录（默认为 src/api）下生成 types.ts 和 services.ts 文件。

2. 查看 API 文档

• 点击 VS Code 活动栏的 Apifox 图标（通常在左侧侧边栏）。
• 浏览您的 Apifox 项目目录结构。
• 点击任意 API 请求，即可在右侧编辑器区域打开详细的文档视图。
  • 支持查看 Path/Query/Header 参数详情。
  • 支持查看 Request Body 的 JSON 结构。
  • 支持查看 Responses 响应定义。

💻 代码示例

生成的代码旨在简化 API 调用流程，并提供完整的类型安全。

services.ts 使用示例：

import { ApifoxService } from './api/services';
import axios from 'axios';

// 1. 定义请求适配器 (Adapter)
// 你可以对接 axios, fetch, uni.request 或任何你喜欢的请求库
const requestAdapter = async (config) => {
  const response = await axios({
    method: config.method,
    url: config.url,
    params: config.params,
    data: config.data
  });
  return response.data;
};

// 2. 初始化 Service 实例
const apiService = new ApifoxService(requestAdapter);

// 3. 愉快地调用 API (享受完整的类型提示!)
async function loadUserData() {
  try {
    // 方法名自动根据 API 路径生成
    const user = await apiService.getUserById({ id: 1001 });
    console.log('User Name:', user.name);
  } catch (error) {
    console.error('Request failed', error);
  }
}

✅ 环境要求

• VS Code 版本 ^1.85.0

🤝 贡献与反馈

如果您在使用过程中遇到任何问题，或有新的功能建议，欢迎访问 GitHub 仓库提交 Issue 或 PR。

https://github.com/shixindea/apifox-ts