Visualize the complexity of your code in real-time. This extension calculates the Cyclomatic Complexity of your functions and applies a colorful heatmap directly to your editor, helping you identify areas that might need refactoring.
Features
Real-time Heatmap: Colors update as you type, providing immediate feedback on code branches.
Multi-language Support:
JavaScript & TypeScript (including JSX/TSX)
Python
C & C++
Java
HTML (embedded scripts)
Cyclomatic Complexity Scoring: Counts branch-introducing keywords (if, for, while, catch, case), short-circuit operators (&&, ||) and ternaries (?). Comments and string literals are ignored, so keywords inside them do not inflate the score.
Smart Fallback: Works even without specialized language extensions using a regex-based fallback parser that understands function declarations and ignores calls, control-flow statements and prototypes.
Performance Optimized: Debounced updates (500 ms) ensure a smooth editing experience without UI lag.
Color Coding
The extension uses the following color scheme based on complexity:
Complexity Score
Color
Interpretation
1 - 3
🟩 Green
Simple, easy to maintain.
4 - 7
🟧 Orange
Moderate complexity, consider monitoring.
8+
🟥 Red
High complexity, high risk, consider refactoring!
Usage
Auto-activation: The extension activates automatically when you open a supported file.
Command Palette: Run Show Complexity Heatmap from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) to manually trigger the update.
Typing: As you add logic (like if statements or nested loops), the background color of the function will shift along the gradient.
Supported Languages
Javascript (.js, .jsx)
Typescript (.ts, .tsx)
Python (.py)
C (.c)
C++ (.cpp)
Java (.java)
HTML (.html - script tags)
Installation
You can install this extension from here or go to VS Code Marketplace and search for "Function Complexity Heatmap".
