Code Spider (代码蜘蛛) - 智能代码依赖可视化插件

厌倦了在复杂的代码库中手动追踪组件关系吗?想一目了然地看到项目的架构和潜在问题吗?
Code Spider 是一款专为现代开发者设计的 VS Code 扩展。它能自动分析您的项目,将组件间的依赖关系(包括正向依赖和反向引用)转换成一张直观、可交互的图谱,帮助您快速理解代码结构,识别重构机会,并精确定位问题。
使用演示

✨ 核心功能
1. 自动双向依赖图谱
一键生成以任意文件为中心的组件依赖关系图。不仅能看到它依赖了谁(Children),还能看到谁依赖了它(Parents)。
- 广泛的语言支持: 支持
.js , .jsx , .ts , .tsx , .vue , .svelte 等主流文件格式。
- 一键启动: 只需在文件资源管理器中右键点击任何支持的文件,选择 "Show Graph" 即可。
2. 智能分析与代码洞察
插件不仅仅是画图,它还是您的智能代码审查助手,自动高亮项目中的潜在问题:
- 🚩 大组件警告: 体积过大的组件会被特殊高亮(默认 >500 行),提醒您它可能需要拆分。阈值可在设置中自定义。
- 🔗 循环依赖高亮: 棘手的循环依赖路径会被清晰地高亮出来,让您不再为此头疼。此功能可按需在设置中开启或关闭。
- 🗑️ 无用组件识别: (待实现) 识别那些从未被引用的"僵尸"组件。
- 👻 异常边界可视化:
- 解析失败: 包含语法错误的组件会被高亮,提醒您需要修正。
- 缺失导入: 如果您导入了一个不存在的模块,图谱会生成一个特殊的"缺失"节点并连接过去。
3. 增强的交互体验与性能
- 悬停显示详情: 将鼠标悬停在任何一个组件上,即可看到其完整路径、代码行数、依赖数、被引用数等关键信息。
- 点击跳转源码: 直接点击图上的任意节点,插件会自动为您在编辑器中打开对应的源文件。
- 动态节点搜索: 在图表右上角的搜索框中输入,实时筛选和高亮您关心的节点。
- 性能监控:
- 状态栏反馈: VS Code 右下角的状态栏会实时显示本次分析的节点总数和耗时。
- 智能提示: 当分析时间过长时(默认 > 5秒),插件会提示您是否需要配置
exclude 规则来缩小分析范围,提升性能。
4. 高度可定制化
- 路径过滤: 通过
settings.json 中的 include 和 exclude 配置项,使用 glob 模式精确控制分析范围,轻松排除 node_modules 、测试文件或构建产物。
- 规则自定义: 自由调整"大组件"的行数阈值,按需开关循环依赖检测。
🚀 快速上手
- (未来)安装: 在 VS Code 扩展市场搜索并安装 "Code Spider"。
- 打开项目: 打开您的前端项目文件夹。
- 运行命令: 在文件资源管理器中,右键点击您想分析的文件 -> 选择 "Show Dependency Graph (Code Spider)"。
- 开始探索: 在新打开的图谱中,通过缩放、拖拽、点击和搜索来探索您的项目结构吧!
🛣️ 未来路线
我们致力于让这个工具变得更强大。下一步计划包括:
- [ ] 多框架支持增强: 完善对 Svelte、Angular、ios、Android 的支持。
- [ ] Git 版本变更分析: 对比两次 Git 提交,可视化依赖关系的变化,帮助评估 PR 的影响范围。
欢迎提供反馈和建议!
| |