Skip to content

Vscode Extension to jump to implementation with Symbols #1870

@MohammedBashiru

Description

@MohammedBashiru

Is there an existing proposal similar to this?

  • I have searched the existing proposals

What are you proposing?

I'm proposing Inverigator, a VS Code extension specifically designed for InversifyJS developers that provides intelligent code navigation for dependency injection containers.

The extension enables developers to:

  • Navigate instantly from injection tokens to their concrete implementations with a single click or keyboard shortcut
  • Jump from interfaces to their bound implementations without manually searching through container configurations
  • Navigate from injected properties (e.g., this.userService) directly to their implementation classes
  • View all container bindings in a searchable list to understand the complete dependency graph
  • Use CodeLens for clickable "Go to Implementation" links above injections, similar to TypeScript's native "Go to Definition"

The extension uses advanced TypeScript AST parsing to understand your InversifyJS container configuration, supporting:

  • Symbol-based tokens (Symbol.for("UserService"))
  • String-based tokens ("UserService")
  • Identifier tokens (TYPES.UserService)
  • Complex modular container architectures with deep import following
  • TypeScript path aliases from tsconfig.json

Is there any specific group of users that will benefit from this?

Primary Beneficiaries:

  1. Teams working on large-scale InversifyJS applications

    • Enterprise developers managing hundreds of services and complex dependency graphs
    • Teams where multiple developers need to quickly understand service relationships
    • Developers onboarding to existing InversifyJS codebases
  2. Full-stack TypeScript developers

    • Developers working across both frontend and backend with InversifyJS
    • Teams using InversifyJS in Node.js microservices architectures
    • React/Angular/Vue developers using InversifyJS for frontend DI
  3. DevOps and maintenance teams

    • Engineers debugging production issues who need to quickly trace dependency chains
    • Developers performing refactoring and need to understand impact analysis
    • Code reviewers who need to verify correct dependency injection implementations
  4. InversifyJS newcomers

    • Developers learning InversifyJS who benefit from visual navigation aids
    • Teams migrating from other DI frameworks who need better tooling support
    • Bootcamp students and educators teaching dependency injection patterns

What problems are you trying to solve?

Core Problems Addressed:

  1. Navigation Complexity

    • Problem: InversifyJS bindings can be defined anywhere in the codebase, making it difficult to find implementations
    • Solution: Content-based scanning finds all bindings regardless of file location or naming conventions
  2. Lost Developer Productivity

    • Problem: Developers waste time manually searching for implementations using text search or grep
    • Solution: Single-click navigation from token to implementation saves hours of searching
  3. Onboarding Difficulties

    • Problem: New team members struggle to understand the dependency graph and service relationships
    • Solution: Visual CodeLens hints and "Show All Bindings" command provide immediate understanding
  4. Refactoring Risks

    • Problem: Changing service implementations or bindings can have hidden impacts
    • Solution: Quick navigation helps developers verify all injection points before making changes
  5. Debugging Challenges

    • Problem: When debugging, developers need to quickly jump between injection points and implementations
    • Solution: Multiple navigation methods (keyboard shortcuts, context menus, CodeLens) provide instant access
  6. Modular Container Complexity

    • Problem: Modern InversifyJS apps use modular containers with imports across multiple files
    • Solution: Deep import following and recursive scanning handles complex architectures
  7. TypeScript Path Alias Confusion

    • Problem: Path aliases like @/services make it harder to locate actual implementation files
    • Solution: Automatic resolution of tsconfig.json path mappings

Do you have any references or examples that can illustrate your idea?

Live Extension

Visual Examples:

Example 1: Token Navigation

// Before: Manual search required
container.bind(TYPES.UserService).to(UserService);
//            ^^^^^^^^^^^^^^^^^ 
// With Inverigator: Ctrl+Alt+F12 instantly jumps to UserService implementation

Example 2: Interface Navigation

// In your service file
interface IUserService {
  getUser(id: string): User;
}
//        ^^^^^^^^^^^^
// With Inverigator: Click on interface name to jump to concrete implementation

Example 3: Property Navigation

// In your controller
@inject(TYPES.UserService) 
private userService: IUserService;
//      ^^^^^^^^^^^ 
// With Inverigator: Navigate from property usage to implementation

Example 4: CodeLens Integration

@injectable()
export class AuthController {
  constructor(
    @inject(TYPES.AuthService) authService: IAuthService,
    // ^ "Go to Implementation → AuthService" (clickable link appears above)
    @inject(TYPES.Logger) logger: ILogger
    // ^ "Go to Implementation → ConsoleLogger" (clickable link appears above)
  ) {}
}

Comparable Tools in Other Ecosystems:

  • Angular Language Service: Provides similar DI navigation for Angular's injector
  • IntelliJ IDEA: Has built-in Spring dependency injection navigation
  • Visual Studio: Offers Unity container navigation for .NET

Performance Metrics:

  • Initial scan of 1000+ files: ~3 seconds
  • Cached navigation: Instant (<50ms)
  • Memory footprint: Minimal (~10MB for large projects)
  • Supports workspaces with 10,000+ TypeScript files

Community Feedback Features:

Based on early user feedback, we've implemented:

  • .inverigatorignore file support for excluding test files
  • Intelligent caching for instant startup after initial scan
  • Progress indicators for large workspace scanning
  • Configurable scan depth for modular containers
  • Multiple keyboard shortcut options for different user preferences

The extension represents 6 months of development focused specifically on InversifyJS developer experience, with continuous improvements based on real-world usage in production codebases.

What type of idea is this?

Innovation: No similar idea exists

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions