Code Connect - VS Code Extension

Visualize your codebase structure with an interactive dependency graph

🚀 Quick Start

Prerequisites

Node.js 18+ (Download)
VS Code 1.74+ (Download)
npm (comes with Node.js)

Installation & Run (3 Commands)

# 1. Navigate to project folder
cd code-connect

# 2. Install dependencies
npm install

# 3. Open in VS Code
code .

Then press F5 to launch the extension!

📦 Dependencies Installation Details

Required Dependencies

The npm install command will automatically install:

{
  "@babel/parser": "^7.23.0",      // JavaScript/TypeScript AST parsing
  "@babel/traverse": "^7.23.0",    // AST tree traversal
  "acorn": "^8.11.0",              // Alternative JavaScript parser
  "minimatch": "^9.0.0"            // File pattern matching
}

Development Dependencies

{
  "@types/node": "^18.0.0",        // Node.js types
  "@types/vscode": "^1.74.0",      // VS Code API types
  "eslint": "^8.0.0"               // Code linting
}

CDN Dependencies (Auto-loaded)

Cytoscape.js 3.28.1 - Graph visualization (loaded in webview)

📖 Usage

1. Launch the Extension

After pressing F5, a new Extension Development Host window opens.

2. Open a Workspace

Open any folder containing JavaScript, TypeScript, or Python files
Or use the included examples/ folder for testing

3. Show the Dependency Graph

Method 1: Command Palette

Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
Type: Code Connect: Show Dependency Graph
Press Enter

Method 2: Editor Title Bar

Open any .js, .ts, or .py file
Click the graph icon in the editor toolbar

4. Interact with the Graph

Click a node → Jump to source code
Double-click → Focus on node
Scroll wheel → Zoom in/out
Drag → Pan around
Fit button → Center all nodes
Reset button → Refresh graph

✨ Features

Core Functionality

✅ Workspace Scanning - Automatically finds all supported files ✅ AST Parsing - Extracts functions, imports, exports, and calls ✅ Interactive Graph - Visual dependency visualization ✅ Click-to-Navigate - Jump directly to code definitions ✅ Real-time Updates - Graph updates when you edit files ✅ Multiple Languages - JavaScript, TypeScript, Python support

Supported Elements

Element	Description
Functions	All function declarations, arrow functions, methods
Imports	ES6 imports, CommonJS require
Exports	Named exports, default exports
Function Calls	Direct function invocations
File Structure	Folder hierarchy and organization

Graph Visualization

🔶 Folders - Orange diamonds
🟢 Files - Green rectangles
🔵 Functions - Blue circles
➡️ Imports - Dashed green arrows
➡️ Calls - Dotted blue arrows
➡️ Contains - Solid gray arrows

⚙️ Configuration

Settings

Open VS Code Settings (Ctrl+,) and search for "Code Connect":

Setting	Default	Description
`codeConnect.maxFilesToScan`	1000	Maximum number of files to analyze
`codeConnect.excludePatterns`	See below	Glob patterns to exclude
`codeConnect.includePatterns`	See below	File patterns to include

Default Patterns

Include:

[
  "**/*.js",
  "**/*.jsx",
  "**/*.ts",
  "**/*.tsx",
  "**/*.py"
]

Exclude:

[
  "**/node_modules/**",
  "**/dist/**",
  "**/build/**",
  "**/.git/**",
  "**/venv/**",
  "**/__pycache__/**"
]

Example Configuration

{
  "codeConnect.maxFilesToScan": 2000,
  "codeConnect.excludePatterns": [
    "**/node_modules/**",
    "**/test/**",
    "**/*.spec.js"
  ],
  "codeConnect.includePatterns": [
    "**/*.js",
    "**/*.ts"
  ]
}

🗂️ Project Structure

code-connect/
├── src/                      # Core extension code
│   ├── extension.js          # Main entry point (340 lines)
│   ├── scanner.js            # File scanning (240 lines)
│   ├── parser.js             # AST parsing (420 lines)
│   ├── graph.js              # Graph builder (340 lines)
│   └── watcher.js            # File monitoring (240 lines)
│
├── resources/                # Webview UI
│   ├── webview.js            # Cytoscape visualization (400 lines)
│   └── styles.css            # UI styling (220 lines)
│
├── examples/                 # Test files
│   ├── sample.js             # JavaScript example
│   ├── sample.ts             # TypeScript example
│   └── sample.py             # Python example
│
├── .vscode/
│   └── launch.json           # Debug configuration
│
├── package.json              # Extension manifest
├── README.md                 # This file
└── LICENSE                   # MIT license

🛠️ Development

Run in Development Mode

# Install dependencies
npm install

# Open in VS Code
code .

# Press F5 to start debugging

Build for Production

# Install VSCE (VS Code Extension Manager)
npm install -g vsce

# Package extension
vsce package

# Creates: code-connect-1.0.0.vsix

Install Packaged Extension

# Install from VSIX
code --install-extension code-connect-1.0.0.vsix

Or in VS Code:

Go to Extensions view (Ctrl+Shift+X)
Click ... menu → Install from VSIX...
Select the .vsix file

Linting

# Run ESLint
npm run lint

# Fix issues automatically
npx eslint src --fix

🧪 Testing

Test with Example Files

# The examples/ folder contains ready-to-test files
cd code-connect
code .
# Press F5
# In Extension Development Host:
# Open examples/ folder
# Run "Code Connect: Show Dependency Graph"

Test with Your Project

Press F5 to launch extension
In the Extension Development Host window
Open your actual project folder
Run the "Show Dependency Graph" command
Verify all files are scanned correctly

Debug Mode

Open Developer Tools: Help > Toggle Developer Tools
Go to Console tab
See detailed logs:
- Files scanned
- Parse errors
- Graph statistics
- Performance metrics

📊 Performance

Benchmarks

Tested on MacBook Pro M1, 16GB RAM:

Project Size	Files	Functions	Scan Time	Render Time
Small	10-50	100-500	< 1s	< 1s
Medium	50-200	500-2000	2-5s	2-3s
Large	200-500	2000-5000	5-15s	3-8s

Optimization Tips

Exclude test files: Add **/test/** to exclude patterns
Increase max files: If you have more than 1000 files
Use specific patterns: src/**/*.js instead of **/*.js
Close unused extensions: Reduce VS Code memory usage

🐛 Troubleshooting

Graph Doesn't Appear

Check:

✓ Workspace folder is open
✓ Files match include patterns
✓ Files aren't in exclude patterns
✓ Open Developer Tools → Console for errors

Solution:

# Verify dependencies installed
npm install

# Reload VS Code window
Ctrl+Shift+P → "Developer: Reload Window"

Parse Errors

Symptom: "Parse error in [file]" in console

Cause: Complex or invalid syntax

Solution:

File still appears in graph (without full details)
Check console for specific error
Verify file syntax is valid

Slow Performance

Solutions:

Reduce maxFilesToScan in settings
Add more exclude patterns
Close other resource-intensive applications
Use a smaller test workspace first

Extension Won't Activate

Check:

✓ Node.js 18+ installed
✓ VS Code 1.74+ installed
✓ No errors in package.json

Solution:

# Reinstall dependencies
rm -rf node_modules
npm install

# Check Node version
node --version  # Should be 18+

🎯 Commands

Command	Description	Shortcut
`Code Connect: Show Dependency Graph`	Open graph visualization	-
`Code Connect: Refresh Graph`	Re-scan and rebuild graph	-

🔧 Advanced Usage

Custom Graph Layouts

Edit resources/webview.js:

// Change from breadthfirst to other layouts:
layout: {
  name: 'circle',    // Circular layout
  // name: 'grid',   // Grid layout
  // name: 'concentric', // Concentric circles
}

Custom Node Colors

Edit resources/webview.js:

// Change folder color from orange to purple:
{
  selector: 'node[type="folder"]',
  style: {
    'background-color': '#9C27B0'  // Purple
  }
}

Add New File Types

Edit src/scanner.js:

// Add .java files
includePatterns: [
  '**/*.js',
  '**/*.ts',
  '**/*.py',
  '**/*.java'  // Add this
]

Then implement Java parsing in src/parser.js.

📚 Documentation

File	Purpose
`README.md`	Quick start & features (this file)
`START_HERE.md`	Beginner-friendly guide
`INSTALL.md`	Detailed installation steps
`WHY_AND_HOW.md`	Architecture & design decisions
`VISUAL_GUIDE.md`	System diagrams & data flow
`CHEAT_SHEET.md`	Quick reference
`PROJECT_SUMMARY.md`	Technical overview

🤝 Contributing

Contributions welcome! Please:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit changes (git commit -m 'Add amazing feature')
Push to branch (git push origin feature/amazing-feature)
Open a Pull Request

📝 License

MIT License - see LICENSE file for details.

🙏 Credits

Cytoscape.js - Graph visualization library
Babel - JavaScript/TypeScript parser
VS Code - Extension platform
Acorn - Fast JavaScript parser
Minimatch - Glob pattern matching

📞 Support

📧 Email: sansankar472@gmail.com

🗺️ Roadmap

[ ] Java, C++, Go, Rust support
[ ] Export graph as PNG/SVG
[ ] Search and filter nodes
[ ] Custom graph layouts
[ ] Code metrics integration
[ ] Git history visualization
[ ] Multi-workspace support
[ ] Performance profiling

Made with ❤️ for developers who love clean code architecture

Star ⭐ this repo if you find it useful!

Code Connect dev

Code Connect

Code Connect - VS Code Extension

🚀 Quick Start

Prerequisites

Installation & Run (3 Commands)

📦 Dependencies Installation Details

Required Dependencies

Development Dependencies

CDN Dependencies (Auto-loaded)

📖 Usage

1. Launch the Extension

2. Open a Workspace

3. Show the Dependency Graph

4. Interact with the Graph

✨ Features

Core Functionality

Supported Elements

Graph Visualization

⚙️ Configuration

Settings

Default Patterns

Example Configuration

🗂️ Project Structure

🛠️ Development

Run in Development Mode

Build for Production

Install Packaged Extension

Linting

🧪 Testing

Test with Example Files

Test with Your Project

Debug Mode

📊 Performance

Benchmarks

Optimization Tips

🐛 Troubleshooting

Graph Doesn't Appear

Parse Errors

Slow Performance

Extension Won't Activate

🎯 Commands

🔧 Advanced Usage

Custom Graph Layouts

Custom Node Colors

Add New File Types

📚 Documentation

🤝 Contributing

📝 License

🙏 Credits

📞 Support

🗺️ Roadmap