Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Code SpiderNew to Visual Studio Code? Get it now.
Code Spider

Code Spider

songxinyuan

|
22 installs
| (1) | Free
Visually explore component dependencies, component references, and code structure as an interactive graph. Like a spider web for your code!
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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

VS Code API Visual Studio Marketplace Installs License: MIT

厌倦了在复杂的代码库中手动追踪组件关系吗?想一目了然地看到项目的架构和潜在问题吗?

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 的影响范围。

欢迎提供反馈和建议!

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft