# Code Spider

**Repository Path**: song-xinyuan/code-spider

## Basic Information

- **Project Name**: Code Spider
- **Description**: Code Spider 是一款专为现代开发者设计的 VS Code 扩展。它能自动分析您的项目，将组件间的依赖关系（包括正向依赖和反向引用）转换成一张直观、可交互的图谱，帮助您快速理解代码结构，识别重构机会，并精确定位问题。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2025-06-20
- **Last Updated**: 2026-04-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

[![VS Code API](https://img.shields.io/badge/VS%20Code-^1.101.0-blue.svg)](https://code.visualstudio.com/api)
[![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/your-publisher-name.code-spider?label=Installs&color=green)](https://marketplace.visualstudio.com/items?itemName=your-publisher-name.code-spider)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

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

`Code Spider` 是一款专为现代开发者设计的 VS Code 扩展。它能自动分析您的项目，将组件间的依赖关系（包括正向依赖和反向引用）转换成一张直观、可交互的图谱，帮助您快速理解代码结构，识别重构机会，并精确定位问题。


## 使用演示

![使用演示](https://gitee.com/song-xinyuan/all-image/raw/master/code-spider/describe.gif)

---

## ✨ 核心功能

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

欢迎提供反馈和建议！