tessl/npm-anthropic-ai--claude-code

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows

—

Pending

Overview

Eval results

Files

IDE Integration

Name: tessl/npm-anthropic-ai--claude-code
Author: tessl

Claude Code provides native integration with IDEs, particularly VS Code, offering seamless AI-powered coding assistance directly within your development environment.

Capabilities

VS Code Extension

Official VS Code extension providing full Claude Code integration.

// Extension installation
// Install from VS Code marketplace: "anthropic.claude-code"

// Extension activation
{
  "name": "claude-code",
  "displayName": "Claude Code",
  "publisher": "anthropic",
  "version": "1.0.105",
  "engines": {
    "vscode": "^1.80.0"
  }
}

Extension Features:

Real-time diff display
Diagnostics integration
Image paste support
WSL compatibility
File watching and suggestions
Inline code assistance

Real-time Diff Display

View and apply code changes directly in the editor.

// Diff display capabilities
interface DiffDisplay {
  // Show proposed changes
  showDiff(originalCode: string, proposedCode: string): void;
  
  // Apply changes selectively
  applyChanges(changes: CodeChange[]): void;
  
  // Reject changes
  rejectChanges(changes: CodeChange[]): void;
  
  // Preview changes before applying
  previewChanges(changes: CodeChange[]): DiffPreview;
}

interface CodeChange {
  file: string;
  line: number;
  oldContent: string;
  newContent: string;
  type: 'addition' | 'deletion' | 'modification';
}

Diff Features:

Side-by-side diff view
Inline diff annotations
Word-level diff highlighting
Change acceptance/rejection
Batch change operations

Diagnostics Integration

Integration with VS Code's diagnostic system for error reporting.

// Diagnostic integration
interface DiagnosticIntegration {
  // Report issues found by Claude
  reportDiagnostics(file: string, diagnostics: Diagnostic[]): void;
  
  // Clear diagnostics
  clearDiagnostics(file: string): void;
  
  // Quick fix suggestions
  provideQuickFixes(diagnostic: Diagnostic): QuickFix[];
}

interface Diagnostic {
  range: Range;
  message: string;
  severity: DiagnosticSeverity;
  source: 'claude-code';
  code?: string;
}

enum DiagnosticSeverity {
  Error = 0,
  Warning = 1,
  Information = 2,
  Hint = 3
}

Diagnostic Features:

Real-time error reporting
Code quality suggestions
Security vulnerability warnings
Performance optimization hints
Quick fix actions

Image and Media Support

Support for image paste and drag-and-drop operations.

// Image handling capabilities
interface ImageSupport {
  // Handle pasted images
  onImagePaste(image: ImageData): void;
  
  // Handle drag and drop
  onImageDrop(files: File[]): void;
  
  // Process screenshots
  processScreenshot(screenshot: ImageData): void;
  
  // Support file types
  supportedTypes: string[]; // ['png', 'jpg', 'gif', 'svg', 'pdf']
}

// Image paste example
document.addEventListener('paste', (event) => {
  const items = event.clipboardData?.items;
  for (const item of items) {
    if (item.type.startsWith('image/')) {
      const file = item.getAsFile();
      claudeCode.handleImagePaste(file);
    }
  }
});

Image Features:

Clipboard image paste
Drag and drop support
Screenshot analysis
PDF content extraction
Image annotation and markup

File Watching and Suggestions

Intelligent file suggestions and context awareness.

// File watching system
interface FileWatcher {
  // Watch for file changes
  watchFiles(patterns: string[]): void;
  
  // Provide file suggestions
  suggestFiles(context: string): FileSuggestion[];
  
  // Handle @-mentions
  resolveFileMention(mention: string): File[];
  
  // Tab completion
  provideCompletion(partial: string): CompletionItem[];
}

interface FileSuggestion {
  path: string;
  relevance: number;
  reason: string;
  lastModified: Date;
}

File Features:

Intelligent file suggestions based on context
@-mention file completion
Tab completion for file paths
Symlink support in suggestions
Real-time file change detection

WSL Compatibility

Full Windows Subsystem for Linux support.

# WSL integration
# Automatic detection of WSL environment
# Path translation between Windows and WSL
# File system access across boundaries
# Remote development support

# WSL configuration
{
  "claude-code.wsl.enabled": true,
  "claude-code.wsl.distribution": "Ubuntu-20.04",
  "claude-code.wsl.remotePathPrefix": "/mnt/c"
}

WSL Features:

Automatic WSL environment detection
Path translation between Windows and Linux
Cross-platform file access
Remote development support
Performance optimization for WSL

Auto-connection and Session Management

Automatic IDE connection and session persistence.

// Auto-connection configuration
interface AutoConnection {
  // Enable/disable auto-connection
  enabled: boolean;
  
  // Connection timeout
  timeout: number;
  
  // Retry configuration
  retryAttempts: number;
  retryDelay: number;
  
  // Session persistence
  persistSession: boolean;
}

// Environment variable control
CLAUDE_CODE_AUTO_CONNECT_IDE=true

Auto-connection Features:

Automatic connection on IDE startup
Session restoration after disconnection
Multi-workspace support
Connection health monitoring
Graceful reconnection handling

Configuration and Settings

VS Code-specific configuration options.

{
  "claude-code": {
    // General settings
    "enabled": true,
    "autoConnect": true,
    "showDiffPreview": true,
    
    // Diff display settings
    "diff": {
      "showInlineChanges": true,
      "highlightWords": true,
      "showLineNumbers": true
    },
    
    // Diagnostics settings
    "diagnostics": {
      "enabled": true,
      "showQuickFixes": true,
      "severity": "warning"
    },
    
    // Image support settings
    "images": {
      "enablePaste": true,
      "enableDragDrop": true,
      "maxFileSize": "10MB"
    },
    
    // Performance settings
    "performance": {
      "debounceTime": 500,
      "maxFileSize": "1MB",
      "excludePatterns": ["node_modules/**", ".git/**"]
    }
  }
}

Command Palette Integration

Access Claude Code features through VS Code's command palette.

// Command palette commands
const commands = [
  'claude-code.start',              // Start Claude Code session
  'claude-code.stop',               // Stop Claude Code session
  'claude-code.restart',            // Restart Claude Code
  'claude-code.showDiff',           // Show diff for current file
  'claude-code.applyChanges',       // Apply pending changes
  'claude-code.rejectChanges',      // Reject pending changes
  'claude-code.clearDiagnostics',   // Clear diagnostics
  'claude-code.openSettings',       // Open extension settings
  'claude-code.showLogs',           // Show extension logs
  'claude-code.reportIssue'         // Report issue
];

Command Features:

Full command palette integration
Keyboard shortcuts support
Context menu integration
Status bar controls
Quick access to common functions

Status Bar Integration

Display Claude Code status and controls in VS Code status bar.

// Status bar item
interface StatusBarItem {
  // Connection status
  status: 'connected' | 'connecting' | 'disconnected' | 'error';
  
  // Active features
  features: string[];
  
  // Quick actions
  actions: StatusBarAction[];
  
  // Click handler
  onClick(): void;
}

// Status display examples
"Claude Code: Connected"
"Claude Code: Processing..."
"Claude Code: Error - Click to retry"
"Claude Code: 3 pending changes"

Status Bar Features:

Real-time connection status
Processing indicators
Error notifications
Quick action buttons
Click-to-configure

Keybinding Support

Customizable keyboard shortcuts for common operations.

{
  "keybindings": [
    {
      "command": "claude-code.start",
      "key": "ctrl+shift+c",
      "when": "editorTextFocus"
    },
    {
      "command": "claude-code.showDiff",
      "key": "ctrl+shift+d",
      "when": "claude-code.active"
    },
    {
      "command": "claude-code.applyChanges",
      "key": "ctrl+shift+a",
      "when": "claude-code.hasPendingChanges"
    },
    {
      "command": "claude-code.rejectChanges",
      "key": "ctrl+shift+r",
      "when": "claude-code.hasPendingChanges"
    }
  ]
}

Multi-root Workspace Support

Support for VS Code multi-root workspaces.

// Multi-root workspace handling
interface WorkspaceSupport {
  // Handle multiple workspace folders
  workspaceFolders: WorkspaceFolder[];
  
  // Per-folder configuration
  getFolderConfig(folder: WorkspaceFolder): Configuration;
  
  // Cross-folder operations
  performCrossFolderOperation(operation: string): void;
  
  // Workspace-specific sessions
  getSessionForFolder(folder: WorkspaceFolder): Session;
}

Multi-root Features:

Per-folder Claude Code sessions
Cross-folder file references
Workspace-specific configuration
Unified diff view across folders
Context awareness across projects

Extension API

Programmatic access to Claude Code functionality from other extensions.

// Extension API
interface ClaudeCodeAPI {
  // Session management
  createSession(options?: SessionOptions): Promise<Session>;
  getCurrentSession(): Session | undefined;
  
  // File operations
  analyzeFile(path: string): Promise<Analysis>;
  suggestChanges(path: string, context: string): Promise<Change[]>;
  
  // Diagnostics
  getDiagnostics(path: string): Diagnostic[];
  addDiagnostic(path: string, diagnostic: Diagnostic): void;
  
  // Events
  onSessionStart(callback: (session: Session) => void): Disposable;
  onFileChange(callback: (change: FileChange) => void): Disposable;
}

// Usage by other extensions
const claudeCode = vscode.extensions.getExtension('anthropic.claude-code');
const api = claudeCode?.exports as ClaudeCodeAPI;

if (api) {
  const session = await api.createSession();
  const analysis = await api.analyzeFile('src/main.ts');
}

Debug Integration

Integration with VS Code debugging capabilities.

// Debug integration
interface DebugIntegration {
  // Debug session awareness
  onDebugSessionStart(session: DebugSession): void;
  onDebugSessionStop(session: DebugSession): void;
  
  // Variable inspection
  inspectVariable(variable: Variable): Promise<VariableAnalysis>;
  
  // Call stack analysis
  analyzeCallStack(stack: StackFrame[]): Promise<StackAnalysis>;
  
  // Breakpoint suggestions
  suggestBreakpoints(file: string): Promise<BreakpointSuggestion[]>;
}

Debug Features:

Debug session context awareness
Variable value analysis
Call stack investigation
Intelligent breakpoint suggestions
Error diagnosis during debugging

Performance Optimization

Optimize extension performance for large codebases.

{
  "performance": {
    // File size limits
    "maxFileSize": "1MB",
    "maxTotalFiles": 1000,
    
    // Debouncing
    "debounceTime": 500,
    "batchChanges": true,
    
    // Exclusions
    "excludePatterns": [
      "node_modules/**",
      ".git/**",
      "dist/**",
      "build/**"
    ],
    
    // Memory management
    "maxMemoryUsage": "256MB",
    "cleanupInterval": 300000
  }
}

Performance Features:

Intelligent file filtering
Change batching and debouncing
Memory usage optimization
Background processing
Lazy loading of features

Troubleshooting and Diagnostics

Built-in troubleshooting tools for IDE integration issues.

# Extension diagnostics
"Claude Code: Show Logs"         # View extension logs
"Claude Code: Run Diagnostics"   # Run diagnostic checks
"Claude Code: Reset Connection"  # Reset IDE connection
"Claude Code: Clear Cache"       # Clear extension cache
"Claude Code: Report Issue"      # Report bug with logs

Troubleshooting Features:

Comprehensive logging system
Connection diagnostics
Performance profiling
Error reporting with context
Automatic issue detection

Install with Tessl CLI

npx tessl i tessl/npm-anthropic-ai--claude-code

docs