Dependency Tracker - VS Code Extension

Track and visualize file dependencies with a clean, professional Output Panel. Understand what files use your code and what your code depends on - instantly.

✨ Features

🔍 Search any file to see its complete dependency tree
📄 Right-click context menu on any file for instant analysis
⬆️ "Used By" analysis - See what files import this file (upstream dependencies)
⬇️ "Uses" analysis - See what files this file imports (downstream dependencies)
📊 Dependency metrics - Impact score, coupling score, and total dependencies
🤖 Smart analysis - AI-powered insights about dead code, entry points, and coupling issues
💾 Smart caching - Fast repeated searches with automatic cache invalidation
🎨 Beautiful formatting - Professional box-drawing characters and clean layout
⚡ Zero configuration - Works out of the box with sensible defaults

🎯 Why Use This?

Impact Analysis

Question: "If I change this file, what breaks?"
Answer: Check the "Impact Score" - shows exactly how many files depend on it

Refactoring Safety

Question: "Can I safely delete this file?"
Answer: "Used By: 0" = safe to delete!

Debugging

Question: "Why is this file broken?"
Answer: Check the "Uses" section to see all its dependencies

Code Quality

Question: "Is this file well-designed?"
Answer: Smart analysis tells you if it's too coupled, unused, or healthy

Architecture Understanding

Question: "How does this codebase fit together?"
Answer: Explore dependencies to understand the architecture flow

📦 Installation

From Source (Development)

Clone or create project:

mkdir dependency-tracker
cd dependency-tracker

Create files:
- package.json (from artifacts)
- extension.js (from artifacts)
- README.md (this file)
Install dependencies:
```
npm install
```
Test the extension:
- Open the folder in VS Code
- Press F5 to launch Extension Development Host
- Open any JavaScript/TypeScript project
- Try the commands!

Package for installation:

npm install -g @vscode/vsce
vsce package

Install the .vsix file:
- VS Code → Extensions → "..." menu → Install from VSIX
- Or: code --install-extension dependency-tracker-1.0.0.vsix

🚀 Usage

Open any .js, .jsx, .ts, .tsx, .vue, or .svelte file
Right-click in the editor
Select "Dependency Tracker: Show Current File Dependencies"
View results in the OUTPUT panel at the bottom

Method 2: Command Palette (Search Any File)

Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
Type: "Dependency Tracker: Search File Dependencies"
Select a file from the list (shows preview of dependency counts)
View results in the OUTPUT panel

Method 3: Current File Shortcut

Open any file
Press Ctrl+Shift+P
Type: "Dependency Tracker: Show Current File"
Instant results!

📊 Understanding the Output

Header Section

╔══════════════════════════════════════════════════════════════════════╗
║                         📄  Button.jsx                               ║
║                   src/components/ui/Button.jsx                       ║
╠══════════════════════════════════════════════════════════════════════╣
║                      Total Dependencies: 5                           ║
╚══════════════════════════════════════════════════════════════════════╝

Shows the file name, full path, and total dependency count.

Used By Section (⬆️ Upstream)

⬆️  USED BY (3)
Files that import this file

    1. 📄 Header.jsx
       📁 src/components/Header.jsx
       🔗 Dependencies: 5

What it means:

Shows which files import the current file
Each file shows its full path and complexity (dependency count)
Impact Score - How many files will break if you change this file

Uses Section (⬇️ Downstream)

⬇️  USES (2)
Files that this file imports

    1. 📄 utils.js
       📁 src/utils.js
       🔗 Dependencies: 0

What it means:

Shows which files the current file depends on
Each dependency shows its path and complexity
Coupling Score - How many files this file needs to work

Dependency Summary

📊 DEPENDENCY SUMMARY
──────────────────────────────────────────────────────────────────────
   • Impact Score (Used By):       3 files
   • Coupling Score (Uses):        2 files
   • Total Dependencies:           5 files

Interpreting the scores:

Metric	Good ✅	Warning ⚠️	Critical 🔴
Impact Score	0-5 files	6-10 files	11+ files
Coupling Score	0-3 files	4-8 files	9+ files
Total Dependencies	0-8 files	9-15 files	16+ files

Smart Analysis

The extension provides intelligent insights:

⚠️ Dead Code Detection

⚠️  WARNING: This file appears to be unused (dead code)

When: Used By = 0, Uses = 0
Action: Consider removing this file

💡 Entry Point Detection

💡 This file is likely an entry point or root component

When: Used By = 0, Uses > 0
Meaning: This is where your app starts (like index.js, main.tsx)

💡 Utility Component

💡 This file is a utility/leaf component with no dependencies

When: Used By > 0, Uses = 0
Meaning: Pure, reusable component (like Button.jsx, formatDate.js)

⚠️ High Impact Warning

⚠️  HIGH IMPACT: Changing this file affects many other files!

When: Used By > 10
Action: Be very careful when making changes. Extensive testing needed.

⚠️ High Coupling Warning

⚠️  HIGH COUPLING: This file depends on many other files

When: Uses > 10
Action: Consider refactoring to reduce dependencies

✅ Healthy Balance

✅ This file has a healthy dependency balance

When: Moderate dependencies
Meaning: Well-designed, maintainable code

⚙️ Configuration

Customize in VS Code Settings (settings.json):

{
  "dependencyTracker.fileExtensions": [
    ".js",
    ".jsx",
    ".ts",
    ".tsx",
    ".vue",
    ".svelte"
  ],
  "dependencyTracker.excludePatterns": [
    "node_modules",
    "dist",
    "build",
    ".git",
    "coverage"
  ],
  "dependencyTracker.maxDepth": 10
}

Settings Explained

Setting	Default	Description
`fileExtensions`	`[".js", ".jsx", ".ts", ".tsx", ".vue", ".svelte"]`	File types to analyze
`excludePatterns`	`["node_modules", "dist", "build", ".git", "coverage"]`	Folders to ignore during scanning
`maxDepth`	`10`	Maximum depth for dependency tree traversal

Adding More File Types

Want to track .mjs or .astro files?

{
  "dependencyTracker.fileExtensions": [
    ".js",
    ".jsx",
    ".ts",
    ".tsx",
    ".vue",
    ".svelte",
    ".mjs",
    ".cjs",
    ".mts",
    ".cts",
    ".astro"
  ]
}

🎨 Supported Languages & Frameworks

Works with any language that uses these import patterns:

JavaScript/TypeScript

import { Button } from "./Button";
import * as utils from "../utils";
const api = require("./api");
const { helper } = require("../helpers");
import("./dynamic-import");

Vue/Svelte/React

import Component from "./Component.vue";
import { writable } from "svelte/store";
import React from "react";

What's Tracked

✅ ES6 imports (import ... from)
✅ CommonJS requires (require())
✅ Dynamic imports (import())
✅ Relative imports (./ and ../)

What's NOT Tracked

❌ Node modules (import React from 'react')
❌ Absolute imports without path mapping
❌ Dynamic imports with variables (import(variablePath))
❌ CSS/SCSS @import (different syntax)

🔧 Troubleshooting

"No dependency information found"

Make sure the file extension is in fileExtensions setting
Check that the file isn't in an excluded folder
Verify the file has been saved
Cache will refresh automatically on file changes

Output panel not showing

Press Ctrl+J (or Cmd+J on Mac) to toggle bottom panel
Or: View → Output
Make sure dropdown says "Dependency Tracker"

Make sure you have a supported file open (.js, .jsx, .ts, .tsx, etc.)
Click inside the editor to focus it, then right-click
Check that the extension is activated (look for "Dependency Tracker" in Extensions)

Analysis is slow

Reduce maxDepth setting (default: 10)
Add more patterns to excludePatterns
For very large projects (1000+ files), consider analyzing specific subdirectories

Missing dependencies

Extension only tracks relative imports (./ or ../)
Node modules and external packages are intentionally not tracked
Dynamic imports with variables cannot be detected

🚀 Pro Tips

1. Set a Keyboard Shortcut

Make analysis super fast:

File → Preferences → Keyboard Shortcuts
Search: "Show Current File Dependencies"
Add your preferred shortcut (e.g., Ctrl+Shift+D or Cmd+Shift+D)

2. Before Deleting Files

Always check: "Used By: 0" and "Uses: 0" = safe to delete

3. Before Big Refactors

Check the Impact Score to understand the blast radius

4. Finding Dead Code

Search files with "Used By: 0" and "Uses: 0" - these are likely unused

5. Identifying Core Utilities

Files with high "Used By" count are your core utilities - handle with care!

6. Understanding Project Architecture

Start with entry points (Used By: 0) and follow the dependency chains

7. Code Review Focus

Files with "HIGH COUPLING" or "HIGH IMPACT" warnings deserve extra attention

📝 Example Workflows

Workflow 1: Refactoring a Component

Assess Impact:
```
Button.jsx → Used By: 12 files
```
⚠️ High impact! Need to update 12 files.

Check Dependencies:

Button.jsx → Uses: 2 files (Icon.jsx, theme.js)

✅ Low coupling, easy to test.

Make Changes to Button.jsx
Test All Affected Files:
- Click each file in "Used By" section
- Open and verify still works
Re-run Analysis to confirm

Workflow 2: Understanding New Codebase

Find Entry Points:

Search for files with "Used By: 0"
→ Found: index.js, main.tsx

Trace Dependencies:

index.js → Uses: App.jsx
App.jsx → Uses: Header.jsx, Footer.jsx, Router.jsx

Identify Core Utilities:

utils.js → Used By: 25 files (core utility!)
Button.jsx → Used By: 15 files (shared component)

Map Architecture in your mind

Workflow 3: Finding Dead Code

Run Analysis on suspicious files

Look for:

⚠️  WARNING: This file appears to be unused (dead code)
Used By: 0 | Uses: 0

Double-Check:
- Search in codebase to confirm not used
- Check if it's a new file not integrated yet
Remove Safely if truly unused

Workflow 4: Reducing Coupling

Identify Problem:

Dashboard.jsx
⚠️  HIGH COUPLING: This file depends on many other files
Uses: 15 files

Analyze Dependencies:
- Are all 15 necessary?
- Can some be combined?
- Can some be lazy-loaded?
Refactor:
- Extract shared logic to utilities
- Use dependency injection
- Split into smaller components
Verify Improvement:
```
Dashboard.jsx → Uses: 8 files ✅
```

🎓 Understanding Dependency Patterns

Pattern 1: Entry Point

index.js
└─ Used By: 0
└─ Uses: 1 (App.jsx)

Healthy: Every app needs entry points

Pattern 2: Utility/Library

Button.jsx
└─ Used By: 10
└─ Uses: 0

Healthy: Pure, reusable component. Well-designed!

Pattern 3: Hub Component

Dashboard.jsx
└─ Used By: 5
└─ Uses: 12

Warning: Central component, risky to change

Pattern 4: Dead Code

OldComponent.jsx
└─ Used By: 0
└─ Uses: 0

Action Required: Remove it!

Pattern 5: God Object (Anti-pattern)

AppState.js
└─ Used By: 25
└─ Uses: 15

Critical: Everything depends on it, needs refactoring

🤝 Contributing

Found a bug or have a feature request? Issues and PRs are welcome!

Ideas for Contributions

Export dependency graph as JSON/GraphViz
Circular dependency detection with visualization
Dependency metrics dashboard
Integration with test coverage
Support for more languages (Python, Go, Rust)
Suggest refactoring opportunities based on metrics
Track dependency changes over time

📊 Performance Notes

Small projects (< 100 files): Instant analysis
Medium projects (100-500 files): 1-3 seconds
Large projects (500-1000 files): 3-10 seconds
Very large projects (1000+ files): 10-30 seconds

Results are cached, so subsequent analyses are instant until files change.

📄 License

MIT - Feel free to use in your projects!

🙏 Acknowledgments

Built with ❤️ for developers who want to understand and maintain their codebases better.

Special thanks to the VS Code extension API and the open-source community.

Enjoy tracking your dependencies! 🎉

Dependency Tracker

Akshat Singh