Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Openapi JSNew to Visual Studio Code? Get it now.
Openapi JS

Openapi JS

FntFrontend

|
61 installs
| (0) | Free
OpenAPI tool for VSCode
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

OpenAPI JS

VSCode 插件,处理第三方工具的API文档; 插入对应的 JavaScript API 业务代码到当前文件。

功能特性

  • 🔄 自动同步 OpenAPI 文档
  • 📝 生成标准的 JavaScript API 请求代码
  • 🎨 支持自定义代码模板
  • 🔧 支持全局和工作区配置
  • 🚀 快速插入 API 调用代码

支持的第三方 API 文档工具

  • Apifox
  • 待扩展

使用前

配置第三方API工具认证信息

  1. 点击插件图标

  2. 点击项目设置

  3. 设置 API Token 、 项目 ID; 可根据需要设置工作区/全局配置( 工作区优先级高于全局配置);

  • 获取API Token
  • 获取项目 ID

使用方法

  1. 打开需要api 请求的业务代码的文件; 如: api.js文件;

  2. 使用以下方式插入API请求的业务代码;

    • 将鼠标光标移动到需要插入API 请求业务代码的位置;

    • 选中需要覆盖的代码块;

  3. 打开侧边栏的 OpenAPI JS 视图

  4. 点击刷新按钮同步 API 文档

  5. 点击导出

支持配置

  • API Token:用于访问 API 文档
  • 项目 ID:指定项目标识
  • 解析指定目录:输入需要解析的目录路径;如api(根目录下的 api 目录)或 mobile/api(mobile目录下的 api 目录); 不支持指定多个文件夹
  • Header 模板:API 文件的头部模板

快捷键

  • 快速插入 API 调用代码
    • windows: Alt+F
    • mac: Option+F

APIFox 联动功能

  • 配置响应结构的标准解析

    在 APIFox 中,可以通过添加项目简介来设置标准响应结构和解析路径,以便生成的 JSDoc return 更符合前端开发者使用拦截器提取数据的习惯。

    配置在 APIFox中,更利于多人同步配置;

    • 配置提取路径:[responsePath: {string}]

      通过该配置,定义响应数据中需要提取的路径。例如:

      [responsePath: data.data]
      
    • 配置标准结构:[responseStandard: {string}]

      描述标准响应结构,用于避免业务端数据结构的干扰。标准结构语法规则如下:

      • 描述当前层级的属性名,使用 , 分隔;
      • 若存在多层标准结构,使用 | 分割。
    • 示例:

      假设响应数据结构如下:

      // 响应数据结构
      {
        code: '200',
        data: {
          data: {
            // 业务代码
          },
          status: ''
        },
        message: ''
      }
      

      对应的配置可以是:

      [responseStandard: code,data,message|data,status]
      [responsePath: data.data]
      

icon按钮说明

  • 刷新:同步 API 文档

  • 导出:导出 API 请求文件

  • 全部展开

  • 全部折叠

  • 最小化

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft