Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>OpenAPI ViewNew to Visual Studio Code? Get it now.
OpenAPI View

OpenAPI View

xietf

|
3 installs
| (2) | Free
Preview OpenAPI 3.0 interfaces
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

OpenAPI View

在 VS Code 中预览 OpenAPI 3.x 文档,并快速搜索接口。

功能

  • 预览当前打开的 OpenAPI JSON/YAML 文件
  • 左侧按 Tag 分组的接口列表,支持过滤搜索
  • 侧边栏支持拖拽调整宽度、折叠/展开(自动记忆)
  • 详情页展示参数、请求体、响应(含更易读的 Schema 表格与树形展开)
  • 一键复制参数/请求体/响应为 JSON(标题栏提供复制按钮)
  • Schema 表格行在鼠标悬停时显示“复制子节点”,按表格展示结构复制子树(对象为属性字典,数组为单项示例),并将字段描述作为注释插入

使用

预览

  1. 打开一个 OpenAPI 规范文件(*.json 或 *.yaml)
  2. 通过命令面板运行:
    • Preview
  3. 或在编辑器标题栏点击 Preview

preview

搜索接口

打开 OpenAPI 文件后,通过命令面板运行:

  • search

将弹出列表,可按 summary/path/方法等关键词搜索,选择后会在预览页定位并打开对应接口。

复制功能

  • 在 Parameters/Request Body/Responses 区域标题栏点击“复制为 JSON”,会将对应内容复制到剪贴板:
    • Parameters:复制为 { parameters: [{ name, in, required, description }, ...] }
    • Request Body:按媒体类型复制解析后的 Schema 为对象,键为媒体类型
    • Responses:按媒体类型复制解析后的 Schema;无 content 时复制 { description: "..." }
  • 在 Schema 表格中,对含子节点的行(对象/数组),鼠标悬停后可见“复制子节点”按钮:
    • 对象:生成一个包含所有属性的对象字面量,属性前插入 /** Description */ 注释
    • 数组:生成仅含一个示例项的数组,示例项按 items 的结构生成,嵌套对象属性同样插入注释
    • 示例值策略:string 为空字符串或 example,number 为 0,boolean 为 false,enum 使用首项

个人打赏

如果这个项目对你有帮助,欢迎请我喝杯咖啡:

License

MIT License,详见 LICENSE。


OpenAPI View

Preview OpenAPI 3.x specs in VS Code and quickly search operations.

Features

  • Preview the currently opened OpenAPI JSON/YAML file
  • Tag-grouped sidebar with filter
  • Resizable & collapsible sidebar (state persisted)
  • Rich operation details: parameters, request body, responses, and readable schema tables
  • Copy parameters/request body/responses to JSON with one click (buttons in section headers)
  • On schema table rows with children, a “Copy children” button appears on hover; it copies an object/array snippet mirroring the table, and injects field descriptions as comments

Usage

  • Open an OpenAPI spec file (*.json / *.yaml)
  • Run:
    • Preview
    • Search

Copying

  • In section headers of Parameters/Request Body/Responses, click “Copy JSON”:
    • Parameters: { parameters: [{ name, in, required, description }, ...] }
    • Request Body: keyed by media type, resolved schema as JSON
    • Responses: keyed by media type; if no content, { description: "..." }
  • On schema rows (object/array), hover to reveal “Copy children”:
    • Object: produces an object literal with properties; inserts /** Description */ comments
    • Array: produces a single example item; nested objects also include comments
    • Example values: string empty or example, number 0, boolean false, enum first item

Donation

If you find this helpful, consider supporting the project:

  • GitHub Sponsors: https://github.com/sponsors/xietianfu
  • Alipay/WeChat: add your QR code links in this README

License

MIT, see LICENSE.

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