彦祖 ! ! ! 你是否在千行代码中「迷路」？重构时总怕「踩雷」关键依赖？
Code Spider 专为前端开发者打造，通过双向依赖图谱与智能代码洞察，将复杂代码结构转化为可交互的视觉模型，助你精准定位架构瓶颈，快速发现重构机会。
🔍 核心能力：从「代码黑箱」到「透明架构」
🌐 全栈依赖图谱引擎
- 双向依赖追踪：一键生成当前文件的依赖关系网，同时展示：
- **正向依赖（Children） **：该文件引用了哪些模块
- **反向引用（Parents） **：哪些文件引用了该模块
- 跨语言支持：深度解析
.js/.jsx/.ts/.tsx/.vue文件，未来将扩展至 Angular/Java 等生态 - 零配置启动：右键文件 → 选择 "Show Dependency Graph" → 3秒内生成可视化图谱
🔍 智能代码审查助手
- ⚠️ 代码健康度检测：
- 大组件识别：默认标记行数 >500 的组件（可自定义阈值），提供拆分建议
- 循环依赖追踪：自动检测并高亮
A→B→C→A这样的「致命依赖环」 - 僵尸组件扫描（开发中）：识别从未被引用的冗余代码
- 🛠️ 异常状态可视化：
- 语法错误标记：解析失败的组件节点显示为红色警告
- 缺失导入提示：不存在的模块导入生成特殊「缺失节点」并标注调用路径
🎮 沉浸式交互体验
- 节点详情悬浮窗：鼠标悬停显示：
- 完整路径
- 代码行数
- 依赖/被依赖数
- 源码无缝跳转：点击图谱节点直接打开对应文件，支持多文件并行分析
- 智能搜索过滤：顶部搜索框支持：
- 实时筛选节点
- 正则表达式匹配
- 性能监控看板：
- 状态栏实时显示「节点数/耗时」
- 分析超时（默认>5s）时提示优化
exclude规则
🎛️ 企业级配置能力
- 路径精准控制：通过
settings.json配置：{ "codeSpider.include": ["src/**"], "codeSpider.exclude": ["node_modules/ ****", "** **/*.test.ts"] } - 规则动态调整：
{ "codeSpider.largeComponentThreshold": 800, // 自定义大组件阈值 "codeSpider.enableCycleDetection": true // 开关循环依赖检测 }
🚀 3分钟上手指南
- 安装扩展：VS Code 搜索 "Code Spider" 或通过命令面板安装
- 打开项目：确保项目根目录包含
package.json或配置文件 - 生成图谱：右键文件 → 选择 "Show Dependency Graph"
- 深度探索：
- 拖拽节点调整布局
- 滚轮缩放查看细节
- 搜索框定位关键组件
🛣️ 未来演进路线
| 阶段 | 目标 |
|---|---|
| Q3 2025 | 📱 移动端支持（iOS/Android/Flutter） 🔄 Git 版本对比分析 |
| 2025 | 📊 团队级依赖看板（集成 CI/CD） 🔗 跨项目依赖分析 |
💡 为什么选择 Code Spider？
- 比 LSP 更懂架构：传统 LSP 仅提供符号跳转，我们构建完整的依赖关系模型
- 比 UML 更轻量：无需额外工具，直接在编辑器中完成架构分析
- 比人工审查更高效：自动发现 90% 的架构问题，节省 50%+ 重构时间
立即安装，让代码结构可视化成为你的「第六感」！
