Function Call Graph for VS Code

Visualize and understand JavaScript/TypeScript function relationships with interactive call graphs. Perfect for code exploration, refactoring, and understanding complex codebases.

Features

📊 Interactive Call Graph Visualization

• View function call relationships in an intuitive, interactive graph
• Navigate through function dependencies visually
• Focus on specific functions to explore their relationships
• Supports JavaScript, TypeScript, and React (JSX/TSX) files

🔍 Smart Analysis

• Analyze entire files or selected functions
• Accurate analysis through Language Server Protocol integration
• Intelligent caching for improved performance
• Cross-file function call detection

Getting Started

1. Install the extension from VS Code Marketplace
2. Open a JavaScript/TypeScript file
3. Cmd+Shift+P (Mac) to analyze the current file
4. Run Command >'Analyze Function Call Graph'

Commands

• Analyze Function Call Graph - Analyze all functions in current file

Requirements

• Visual Studio Code version 1.85.0 or higher
• JavaScript/TypeScript files in your workspace

Extension Settings

The extension activates automatically for supported file types:

• .js, .ts (JavaScript/TypeScript)
• .jsx, .tsx (React)

Tips & Tricks

1. Large Codebases

   • Use selected function analysis for better performance
   • Utilize the focus feature to explore specific areas

2. Navigation

   • Click nodes to view function definitions
   • Double-click to focus on a function
   • Use the export feature to share or document

3. Performance

   • Results are cached for improved speed
   • Incremental analysis for better responsiveness

Troubleshooting

See our troubleshooting guide for common issues and solutions.

Contributing

We welcome contributions! Please see our developer guide for details.

The VS Code extension code is located in the vscodeplugin branch. Make sure to check out this branch when working on the extension:

git checkout vscodeplugin

Publishing the Extension

To publish a new version of the extension:

1. Ensure you have the vsce package installed globally:

   npm install -g @vscode/vsce
   

2. Navigate to the extension directory:

   cd function-call-graph-extension
   

3. Run the publish script with the new version number:

   ./scripts/publish.sh <version>
   

   Example: ./scripts/publish.sh 1.0.1

The publish script will:

• Validate the version number format
• Ensure your working directory is clean
• Update version in package.json
• Run tests and linting
• Build the extension
• Create a VSIX package
• Create a git tag
• Provide instructions for pushing changes

After the script completes, follow the provided instructions to:

1. Push the changes: git push origin main
2. Push the version tag: git push origin v<version>
3. Publish to VS Code Marketplace: vsce publish

Note: You must have the appropriate marketplace publisher access to publish the extension.

Release Notes

See our CHANGELOG for detailed release notes.

License

This extension is licensed under the MIT License - see the LICENSE file for details.

Enjoy exploring your codebase with Function Call Graph!

⭐ Rate this Extension