VSCode本身不提供原生代码图谱功能，依赖图必须由外部工具链驱动；dependency-cruiser是当前唯一能稳定解析TS/JS中import/export、defineProps、别名路径（如@/）并生成结构化依赖数据的CLI工具，需配合Graphviz渲染且依赖Volar正确配置。
VSCode 本身不提供原生的“代码图谱”功能，所谓类级依赖分析必须靠外部工具链驱动，不是装个插件点一下就能出图——尤其对 TypeScript/JavaScript 项目，dependency-cruiser 是目前唯一能稳定解析 import/export、defineProps、别名路径（如 @/）并生成结构化依赖数据的 CLI 工具。
为什么 dependency-cruiser 是当前唯一靠谱的选择
其他标榜“一键生成依赖图”的 VSCode 插件（比如 vscode-dependencyGraph 或 CodeGraph）底层要么用正则粗筛 import 字符串，要么依赖不稳定的 AST 解析器，遇到 script setup、动态 import、条件导出或 Volar 别名映射时，90% 以上会漏掉关键边。而 dependency-cruiser 真实走的是模块解析流程，它复用 Webpack 的 enhanced-resolve，能正确处理 tsconfig.json 的 paths、vite.config.ts 的 resolve.alias，甚至 Vue SFC 中 <script setup lang="ts"> 里的类型导入。
常见错误现象：
-
npx depcruise src/报错error: cycle detected，但项目实际没循环 —— 大概率是没配exclude，node_modules里某个包自己有循环引用，直接卡死 - 图中大量
./utils/index.js这类相对路径，点不开、hover 无类型 ——files.associations没设成"*.vue": "vue"，Volar 未接管，路径解析失败 -
import { useUserStore } from '@/store'在图里显示为未解析路径 ——dependency-cruiser默认不扫.vue文件，必须显式加--extensions js,ts,jsx,tsx,vue
配置不写全，图就废一半
运行 npx dependency-cruiser --init 生成的 .dependency-cruiser.js 只是起点，以下字段必须手动补全，否则产出的图不具备可读性或实用性：
-
doNotFollow：指定哪些包不递进扫描，例如["^lodash", "^@types/"]，避免图被第三方类型定义撑爆 -
exclude：明确排除测试文件和构建产物，如["**/__tests__/**", "**/dist/**", "**/node_modules/**"]；Vue 项目还要加"^@myorg/utils"防止内部工具包反向污染主干依赖流 -
moduleSystems：ESM 项目务必设["es6", "commonjs"]，否则require()调用会被忽略 -
tsConfig：指向真实tsconfig.json路径（如./tsconfig.json），否则类型路径别名（paths）全部失效
渲染 SVG 却打不开？先检查 dot 命令和 silent 开关
dependency-cruiser 输出的是 DOT 格式文本，必须经 Graphviz 的 dot 命令转成图像。没装或 PATH 不对，就会报 command not found: dot：
- macOS：
brew install graphviz，验证用dot -V - Windows：去 graphviz.org 下安装包，勾选 “Add Graphviz to the system PATH”，重启终端
- 关键命令必须带
--silent：npx depcruise --silent src/ --output-type dot | dot -Tsvg > deps.svg，不加的话depcruise的 warning 日志混进 DOT 数据，dot直接报syntax error in line X - SVG 打开空白？不是图错了，是浏览器渲染超限。改用
dot -Tpng，或加--max-depth 2控制图层级
真正难的从来不是生成一张图，而是让图里的每个节点都能点进去、hover 出类型、右键跳转到定义——这要求 Volar 必须开启 takeOverMode，且 dependency-cruiser 的输出必须和你的 IDE 解析路径完全一致。漏掉任意一环，图就只是装饰画。
