在 vscode 中可通过内置功能与插件生成项目引用关系图。1. 使用“peek references”（快捷键 shift + f12）查看特定符号的引用位置，适合局部查找；2. javascript/typescript 项目可安装并运行 dependency cruiser 生成全局依赖图；3. 使用 project graph viewer 插件快速可视化 import/export 关系；4. 配合 breadcrumbs 或 code graph 插件辅助理解代码结构；5. 根据项目类型选择合适工具组合即可满足依赖分析需求。
在大型项目开发中，搞清楚各个文件之间的引用关系非常重要。VSCode 本身虽然没有内置的“一键生成引用关系图”功能，但通过一些插件和内置工具，是可以实现对项目依赖的分析和可视化查看的。下面我来分享几种实用的方法。
使用 VSCode 内置的“Peek References”功能
如果你只是想快速查看某个函数、变量或类被哪些地方引用了，可以使用 VSCode 自带的 Peek References 功能。
操作步骤：
- 将光标放在你想查询的符号上（比如一个函数名）。
- 按下快捷键
Shift + F12或者右键选择 “Find All References”。 - VSCode 会在下方弹出一个面板，列出所有引用位置。
这个方法适合局部查找，但对于整个项目的依赖结构来说还不够直观。
安装插件：JavaScript/TypeScript 可用 Dependency Cruiser
如果你用的是 JavaScript 或 TypeScript 项目，推荐安装 Dependency Cruiser 插件。
安装方式：
- 打开终端，运行
npm install -g dependency-cruiser - 然后在项目根目录运行
depcruise --output-dot . | dot -T svg > dependencies.svg
这会生成一个 SVG 格式的依赖图，可以用浏览器打开查看。你还可以配置排除某些路径或者检查循环依赖。
优点是它能帮你从整体上把握模块之间的引用关系，特别适合重构前做梳理。
使用 VSCode 插件：Project Graph Viewer
还有一个更轻量级的插件叫 Project Graph Viewer，可以在不写额外配置的情况下，快速生成当前项目的引用图。
使用方法：
- 安装插件后，在命令面板（Ctrl+Shift+P）里输入“Generate Project Graph”。
- 插件会根据你的 import/export 语句生成一张图。
它的界面比较简洁，适合小型到中型项目，对于理解模块间的连接很有帮助。
配合代码地图插件：如 Breadcrumbs 或 Code Graph
还有一些辅助性插件可以帮助你在编辑器内更好地感知结构，例如：
- Breadcrumbs：在底部显示当前文件的引用链。
- Code Graph：基于语法树生成可视化的代码结构图（适合理解单个文件内部逻辑）。
这些插件不能替代完整的依赖分析，但在日常编码时能提供不少便利。
总的来说，VSCode 虽然不是专门的架构分析工具，但借助插件和部分原生功能，已经可以满足大多数项目依赖分析的需求。关键是根据自己的项目类型选择合适的工具组合。基本上就这些，不复杂但容易忽略。
