syntax-lens

Advanced code complexity analysis and design pattern detection for VS Code.

syntax-lens analyzes your code in real-time, detecting complex patterns, anti-patterns, code smells, and architectural issues. Provides visual indicators, detailed metrics, and actionable suggestions for improving code quality and maintainability.

Similar to: SonarQube (code quality), Code Metrics (complexity), ESLint (pattern detection)

Features

• ✅ Real-time Complexity Analysis - Cyclomatic and cognitive complexity metrics
• ✅ Design Pattern Detection - Identifies common architectural patterns
• ✅ Anti-Pattern Recognition - Flags code smells and problematic patterns
• ✅ Code Metrics - Nesting depth, lines of code, parameter count analysis
• ✅ Visual Annotations - Inline complexity indicators and hover information
• ✅ Diagnostic Reports - Detailed analysis panel with suggestions
• ✅ Pattern Suggestions - Recommendations for refactoring opportunities
• ✅ Multi-language Support - JavaScript, TypeScript, Python, Java
• ✅ Workspace Analysis - Analyze entire project for complexity hotspots
• ✅ Configuration - Customizable thresholds and analysis rules

Installation

Prerequisites

• VS Code 1.60+ (Latest recommended)
• Node.js 14+ (for development)

From Marketplace

1. Open VS Code Extensions (Ctrl+Shift+X / Cmd+Shift+X)
2. Search for "syntax-lens"
3. Click Install
4. Reload VS Code

Quick Start

Analyze Current File

1. Open a TypeScript/JavaScript file
2. Open Command Palette (Ctrl+Shift+P)
3. Run "Syntax Lens: Analyze File"
4. View results in the Analysis Panel (left sidebar)

View Complexity Metrics

Hover over any function to see inline complexity indicators:

function calculateTotal(items: Item[]): number {  // 🔴 Cyclomatic: 4, Cognitive: 5
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    if (items[i].active) {
      if (items[i].discountable) {
        total += items[i].price * 0.9;
      } else {
        total += items[i].price;
      }
    }
  }
  return total;
}

Detect Patterns

Patterns detected in real-time appear in the Analysis Panel:

• Design Patterns: Factory, Observer, Singleton, Strategy, etc.
• Anti-Patterns: God Class, Long Method, Feature Envy, etc.
• Code Smells: Duplicate code, Complex conditionals, Dead code paths

Configuration

Open VS Code Settings and search for "syntax-lens":

{
  "syntax-lens.enabled": true,
  "syntax-lens.complexityThreshold": 10,
  "syntax-lens.cognitiveThreshold": 7,
  "syntax-lens.maxNestingDepth": 4,
  "syntax-lens.languages": ["typescript", "javascript", "python"],
  "syntax-lens.showInlineMetrics": true,
  "syntax-lens.enablePatternDetection": true,
  "syntax-lens.enableAntiPatternDetection": true
}

Available Commands

Keyboard Shortcuts

• Analyze File: Ctrl+Shift+A (Windows/Linux), Cmd+Shift+A (macOS)
• Show Metrics: Ctrl+Shift+M (Windows/Linux), Cmd+Shift+M (macOS)

Metrics Explained

Cyclomatic Complexity

Measures the number of independent paths through code. Higher values = harder to test and maintain.

• 1-5: Simple, low risk
• 6-10: Moderate, review recommended
• 11+: Complex, refactoring suggested

Cognitive Complexity

Measures how difficult code is to understand. Penalizes nesting and complex conditionals more heavily than cyclomatic complexity.

Code Metrics

• Lines of Code (LOC): Total lines in function/class
• Nesting Depth: Maximum levels of nested blocks
• Parameter Count: Number of function parameters
• Return Statements: Multiple return paths

Detected Patterns

Design Patterns:

• Factory, Observer, Singleton, Strategy, Adapter, Decorator, etc.

Anti-Patterns:

• God Class, Feature Envy, Long Method, Duplicate Code, Dead Code, etc.

Packaging

Package Extension

npm run package:pre

Creates syntax-lens-1.1.0.vsix ready for distribution.

Troubleshooting

Analysis Not Running

• Check if syntax-lens is enabled: syntax-lens.enabled: true
• Verify file language is supported (JS, TS, Python, Java)
• Open Debug Console: View > Debug Console

High Memory Usage

• Disable workspace analysis: syntax-lens.analyzeWorkspace: false
• Adjust complexity thresholds to reduce overhead
• Restart VS Code

No Patterns Detected

• Ensure pattern detection is enabled: syntax-lens.enablePatternDetection: true
• Check code structure matches known patterns
• Try analyzing a file with obvious patterns

Contributing

Contributions welcome! Please:

1. Fork the repository
2. Create feature branch: git checkout -b feature/my-feature
3. Commit changes: git commit -am 'Add my feature'
4. Push to branch: git push origin feature/my-feature
5. Submit pull request

License

MIT

See Also

• ESLint - JavaScript linting
• SonarQube - Code quality platform
• Cyclomatic Complexity
• VS Code Extension API