我构建了一个 VS Code 扩展来将 JSON 可视化为树形图

Source: Dev.to

问题

我们都有过这种经历。调试 API 响应时，盯着一个 500 行的 JSON 文件，寻找埋在三层深处的某个嵌套字段。你在脑中匹配括号，失去定位，上下滚动。

{
  "users": [
    {
      "id": 1,
      "profile": {
        "settings": {
          "notifications": {
            "email": {
              "frequency": "weekly"  // <- 这个东西在哪儿？!
            }
          }
        }
      }
    }
  ]
}

我受够了，于是我构建了 JSON Diagram Viewer。

解决方案：JSON Diagram Viewer

只需一次点击，就能在 VS Code 中将你的 JSON 转换为交互式、可折叠的树形图。再也不需要匹配括号，也不再迷失方向。

功能

• 实时同步 – 编辑 JSON 时，图表实时更新，无需刷新。
• 颜色编码卡片 – 对象、数组和基本类型各自使用不同颜色，帮助你一眼看出结构。
• 可折叠节点 – 点击即可展开/折叠任意部分，专注于重要内容。
• 复制路径与值 – 右键任意节点，可复制其 JSON 路径（例如 users[0].profile.settings）或对应的值。

安装

1. 从 VS Code Marketplace 安装。
2. 打开任意 .json 文件。
3. 右键 → View as Diagram（以图表查看）。

图表会与编辑器并排打开。

使用场景

• API 开发 – 可视化 REST/GraphQL 接口的响应。
• 配置文件 – 浏览 package.json、tsconfig.json 或任何复杂的配置。
• 数据分析 – 在处理之前探索 JSON 数据集。
• 调试 – 理解 React/Vue 开发者工具导出的嵌套状态对象。

技术细节

• TypeScript
• VS Code Webview API
• 使用原生 JS 渲染图表（无沉重依赖）

链接

• VS Code Marketplace
• GitHub (MIT licensed, contributions welcome!)