Skip to main content

VSCode Extension Overview

The X-Fidelity VSCode extension provides a comprehensive development experience that integrates X-Fidelity's code analysis capabilities directly into your VSCode workflow. This extension transforms X-Fidelity from a command-line tool into a fully-featured IDE integration with real-time analysis, professional UI components, and advanced debugging capabilities.

Key Benefits​

  • Real-time Analysis: Automatic code analysis on file save with progress tracking
  • Professional UI: Native VSCode integration following extension best practices
  • Enhanced Debugging: Comprehensive logging and performance monitoring
  • Organized Results: Tree views grouped by severity, rule, file, or category
  • Quick Access: Dedicated activity bar and control center for all features

Main Components​

1. Activity Bar Integration​

  • Dedicated X-Fidelity Sidebar: Complete with organized tree views
  • Issues Tree View: Displays analysis results grouped by various criteria
  • Control Center: Quick access to all X-Fidelity functionality
  • Status Indicators: Real-time status updates and progress tracking

2. Analysis Engine Integration​

  • Core Engine: Built on x-fidelity-core package
  • Plugin System: Full access to all built-in plugins
  • Configuration Management: Supports both local and remote configurations
  • Performance Monitoring: Built-in performance tracking and optimization

3. Developer Experience​

  • Native Diagnostics: Integration with VSCode's Problems panel
  • Command Palette: All features accessible via command palette
  • Settings Integration: Comprehensive configuration through VSCode settings
  • Workspace Support: Multi-workspace and monorepo support

Architecture​

The VSCode extension is built as a separate package (x-fidelity-vscode) within the X-Fidelity monorepo and integrates with the core analysis engine while providing a rich user interface:

VSCode Extension Architecture
├── Extension Manager (coordinator)
├── Analysis Manager (workflow management)
├── UI Components
│   ├── Tree View Providers
│   ├── Status Bar Items
│   ├── Panels and Views
│   └── Diagnostic Provider
├── Core Integration
│   ├── Analysis Engine
│   ├── Plugin Registry
│   └── Configuration Manager
└── Utilities
    ├── Performance Monitoring
    ├── Logging System
    └── Result Management

Getting Started​

  1. Development Mode: Press F5 in VSCode to launch the extension in debug mode
  2. Look for the X-Fidelity Icon: Find it in the activity bar (sidebar)
  3. Use the Control Center: Access all features from the main control panel
  4. Run Analysis: Execute analysis and view results in the Issues tree view
  5. Check Output: Monitor detailed logs in the Output panel (X-Fidelity Debug)

Extension Features​

The VSCode extension provides all the functionality of the CLI tool plus additional IDE-specific features:

  • Visual Issue Display: Issues displayed in tree views and diagnostics
  • Interactive Navigation: Click-to-navigate to specific files and lines
  • Progress Tracking: Real-time progress indicators during analysis
  • Settings UI: Visual configuration interface
  • Workspace Integration: Seamless integration with VSCode workspaces
  • Performance Insights: Built-in performance monitoring and reporting

Next Steps​