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、测试文件或构建产物。
• 规则自定义: 自由调整"大组件"的行数阈值，按需开关循环依赖检测。

🚀 快速上手

1. (未来)安装: 在 VS Code 扩展市场搜索并安装 "Code Spider"。
2. 打开项目: 打开您的前端项目文件夹。
3. 运行命令: 在文件资源管理器中，右键点击您想分析的文件 -> 选择 "Show Dependency Graph (Code Spider)"。
4. 开始探索: 在新打开的图谱中，通过缩放、拖拽、点击和搜索来探索您的项目结构吧！

🛣️ 未来路线

我们致力于让这个工具变得更强大。下一步计划包括：

• [ ] 多框架支持增强: 完善对 Svelte、Angular、ios、Android 的支持。
• [ ] Git 版本变更分析: 对比两次 Git 提交，可视化依赖关系的变化，帮助评估 PR 的影响范围。

欢迎提供反馈和建议！