vs code需先正确识别json语言模式并确保语法合法才能实现树状图预览；可通过设置files.associations、启用原生折叠或安装data preview/json插件实现结构化查看。
VS Code 本身不直接渲染 JSON 树状图，但通过启用语言模式 + 折叠支持，或安装轻量插件，就能实现接近“树状图”的结构化预览——关键不是装一堆插件，而是先让 VS Code 正确识别和解析 JSON。
确认文件被识别为 JSON 语言模式
双击打开 data.json 却只显示纯文本、无折叠箭头、悬停没结构提示？大概率是 VS Code 没把它当 JSON 处理。
- 看右下角状态栏，点击当前语言（如
Plain Text），输入json并选中JSON（不是JSON with Comments） - 临时生效后，按
Ctrl+Shift+P运行Change Language Mode可快速切换 - 一劳永逸：在
settings.json中加这一行："files.associations": {"*.json": "json"} - 注意：如果写成
"*.jsonc"或漏引号，配置不生效；package.json等常见名通常默认识别，但自定义名如config.json常需手动关联
用原生折叠功能展开/收起层级
VS Code 1.70+ 原生支持 JSON 折叠（Ctrl+Shift+[ / ]），但前提是 JSON 语法严格合法——一个多余逗号、少个引号，整个折叠就失效，小三角都不出现。
- 检查控制台：按
Ctrl+Shift+I打开开发者工具 → Console 标签，看是否有Invalid JSON报错 - 验证格式：用
npx json -c data.json（需npm install -g json）或粘贴到jsonlint.com - 别依赖插件“强行渲染”错误 JSON——这会掩盖真实结构问题，后期调试更难
- 折叠生效后，鼠标悬停节点可看到完整路径（如
users[0].profile.name），比肉眼数大括号快得多
用 Data Preview 或 Json 插件启用树状视图
如果你需要左侧独立面板展示可交互的树形结构（类似文件资源管理器），就得借助扩展。推荐两个轻量、维护活跃的方案：
-
Data Preview：内置支持，无需额外安装。在
settings.json加配置："files.associations": {"*.json": "data-preview"}，之后双击.json就直接进折叠树状视图（非编辑模式） -
Json for Visual Studio Code（GitCode 地址：
https://gitcode.com/gh_mirrors/vs/vscode-json）：提供左侧面板树状视图，支持点击跳转、右键Rename、自动统计对象数量等。它不替换编辑器，只是叠加一层导航层 - 两者都支持搜索键名（
Ctrl+F在树视图内搜），但注意：Data Preview 的树是只读预览；Json 插件的树支持右键修改并同步到编辑区 - 大文件（>5MB）慎用树状视图——容易卡顿。此时优先用原生折叠 +
Ctrl+F搜"key_name":（正则模式勾选）
真正容易被忽略的是：树状图只是辅助，不是替代语法校验。哪怕插件渲染出“漂亮”的树，只要 JSON 有语法错误，后续程序解析仍会失败。先确保 JSON.parse() 能过，再谈怎么看得舒服。
