⚡ CodeMedic — DevFix v2.0

Understand common JavaScript & TypeScript errors instantly — no AI APIs required.

CodeMedic detects errors from VS Code diagnostics and shows human-friendly explanations with actionable fix suggestions, all powered by a local rule-based engine. 100% offline and private.

✨ Features

🔍 Advanced Error Detection

• Listens to VS Code Diagnostics API in real-time
• 25+ error patterns across 6 categories:
  • ReferenceError — not defined, const reassignment, temporal dead zone
  • TypeError — cannot read property, not a function, not iterable
  • SyntaxError — unexpected token, missing semicolons, unterminated strings
  • RangeError — stack overflow, invalid array length
  • ModuleError — cannot find module, missing exports
  • General — undefined, null, deprecated, promise rejections
• Multi-rule matching — shows all applicable explanations
• Context analysis — reads surrounding code to detect missing imports, typos, null assignments

📋 DevFix Sidebar Panel

A premium dark-themed sidebar with 3 tabs:

• Errors — Card-based layout with collapsible sections (Explanation, Fix, Context, Beginner Tip, Code Example)
• History — Timestamped list of recent errors, clickable to navigate
• Insights — Learning analytics showing most frequent error types with progress bars

🎓 Beginner Mode

Toggle on/off via button or Ctrl+Alt+B:

• Extra explanations using real-world analogies
• Working code examples for each error pattern
• Designed for students and junior developers

🖱️ Inline Hover Support

Hover over any error squiggle to see:

• Error category and explanation
• Suggested fix
• Context-aware hints
• Beginner tip (expandable)
• MDN documentation link

⚡ Click to Fix (Code Actions)

Lightbulb menu offers quick fixes like:

• "Declare with let/const"
• "Add null check"
• "Use optional chaining (?.)"
• "Add .catch()"
• "Change const to let"

⌨️ Commands & Shortcuts

📊 Status Bar Indicator

• Shows ⚠ DevFix: N Issues in the bottom bar
• Click to open the errors panel
• Shows ✅ DevFix: Clear when no errors

🧠 Learning Insights

• Tracks your most frequent error types
• Shows: "You often get 'undefined' errors"
• Progress bars for error type distribution

🔔 Smart Notifications

• Subtle popup when critical errors are detected
• 10-second cooldown prevents spam
• "Open Panel" button for quick access

🎨 Smart Line Highlighting

• Red left border + background for errors
• Amber for warnings
• Overview ruler markers for quick scanning

🔐 Privacy

• No data leaves your system — zero network calls
• No AI APIs — purely rule-based
• Privacy badge shown in the panel: 🔒 100% Offline

Getting Started

# 1. Install dependencies
npm install

# 2. Compile TypeScript
npm run compile

# 3. Press F5 in VS Code to launch the Extension Development Host

Architecture

src/
├── extension.ts        → Main entry, wires all components
├── errorParser.ts      → Diagnostic parser & line decorations
├── rules.ts            → 25+ rule patterns with examples & quick fixes
├── uiPanel.ts          → Premium webview sidebar (3 tabs)
├── errorHistory.ts     → History tracking & learning insights
├── contextAnalyzer.ts  → Context-aware code analysis
└── quickFixProvider.ts → Code Action provider (Click to Fix)

Supported Error Patterns (25+)

License

MIT