Skip to content

VS Code Extension Roadmap

Status: Planning (Not Started) Timeline: Post-Beta (Phase 6 or 7, after beta validation) Estimated Effort: 2-3 weeks Priority: Medium-High (depends on user demand) Strategic Value: HIGH - Developers live in VS Code, not browsers

Executive Summary

Build a VS Code Extension that brings CodeSlick's 79+ security checks directly into the editor. This shifts CodeSlick from a "visit the website" tool to an always-on security assistant that developers use while coding.

Key Insight from Beta Feedback: The user couldn't explain the GitHub App to a beta tester. This suggests friction in the current workflow. A VS Code extension eliminates context switching entirely.

Problem Statement

Current User Experience (Friction Points)

  1. Web-Based Analysis (codeslick.dev):
  2. Copy code → Open browser → Paste → Wait → Copy fixes back
  3. Context switching interrupts flow

  4. No real-time feedback

  5. GitHub App (PR Analysis):

  6. Only works on PRs (not while coding locally)
  7. User sees issues AFTER committing code
  8. Requires understanding GitHub Apps (beta users struggled)

Desired Developer Experience

Developer types code in VS Code
↓
Real-time security warnings appear (like ESLint)
↓
Click "Fix" button → AI generates fix in-editor
↓
No browser, no PR, no context switching

Proposed Solution: CodeSlick VS Code Extension

Core Features (MVP - Week 1-2)

  1. Real-Time Static Analysis
  2. As you type, run CodeSlick's 79+ security checks
  3. Show warnings/errors as inline squiggles (like ESLint)
  4. Hover to see vulnerability details (CVSS, OWASP, CWE)

  5. Works offline (no API calls for static analysis)

  6. AI-Powered Quick Fixes

  7. Right-click on warning → "Fix with AI"
  8. Uses user's own API key (OpenAI, Anthropic, etc.)
  9. Shows diff preview before applying

  10. One-click apply

  11. Language Support

  12. JavaScript (.js)
  13. TypeScript (.ts, .tsx)
  14. Python (.py)

  15. Java (.java)

  16. CodeSlick Panel

  17. Side panel showing all vulnerabilities in current file
  18. Grouped by severity (Critical/High/Medium/Low)
  19. Click to jump to line
  20. Export report (HTML, JSON, Markdown)

Advanced Features (Post-MVP - Week 3+)

  1. Workspace-Wide Scanning
  2. Command: "CodeSlick: Scan Entire Workspace"
  3. Analyzes all files in project
  4. Shows aggregated results

  5. Saves scan history

  6. Team Integration

  7. Connect to CodeSlick account (OAuth)
  8. Sync results with team dashboard
  9. Track quota usage

  10. Share findings with team

  11. Custom Rules

  12. Define team-specific security rules
  13. Severity overrides (e.g., make eval() CRITICAL)
  14. Ignored files/patterns (.codeslickignore)

Technical Architecture

1. Extension Structure

codeslick-vscode/
├── package.json              # Extension manifest
├── src/
│   ├── extension.ts          # Entry point
│   ├── diagnostics.ts        # Security warnings provider
│   ├── codeActions.ts        # Quick fix actions
│   ├── webview/
│   │   └── panel.tsx         # CodeSlick panel UI
│   ├── analyzers/
│   │   ├── javascript.ts     # Copy from codeslick2/src/lib/analyzers/
│   │   ├── python.ts
│   │   └── java.ts
│   ├── ai/
│   │   └── fix-generator.ts  # AI fix integration
│   └── api/
│       └── client.ts         # Connect to codeslick.dev API
└── tests/
    └── extension.test.ts

2. VS Code APIs Used

API Purpose
vscode.languages.registerCodeActionsProvider "Fix with AI" quick fixes
vscode.languages.createDiagnosticCollection Show security warnings
vscode.window.createWebviewPanel CodeSlick results panel
vscode.workspace.onDidChangeTextDocument Real-time analysis on file changes
vscode.commands.registerCommand Commands like "CodeSlick: Scan File"

3. Performance Optimization

Challenge: Running 79+ checks on every keystroke = slow

Solutions: 1. Debouncing: Only analyze after 500ms of no typing 2. Incremental Analysis: Only re-check changed lines 3. Background Thread: Use Web Workers for heavy analysis 4. Caching: Cache results, only re-analyze on change

4. Data Flow

User types code in editor
↓
debounce(500ms)
↓
Get file content + language
↓
Run static analyzers (local, no API)
↓
Create diagnostics (warnings/errors)
↓
Display in editor (squiggles + Problems panel)
↓
User right-clicks on warning
↓
"Fix with AI" action triggered
↓
Call AI API (user's key)
↓
Show diff preview
↓
Apply fix on confirm

Implementation Plan (2-3 Weeks)

Week 1: Foundation

Day 1: Project Setup - Initialize VS Code extension project (Yeoman generator) - Set up TypeScript, ESLint, test framework - Copy analyzer code from codeslick2/src/lib/analyzers/ - Test local build

Day 2-3: Real-Time Diagnostics - Implement DiagnosticProvider - Wire up JavaScript/TypeScript analyzer - Show security warnings in editor - Add hover provider (show vulnerability details)

Day 4: Python & Java Support - Integrate Python analyzer - Integrate Java analyzer - Test multi-language support - Add language detection

Day 5: Quick Fix Actions - Implement CodeActionProvider - Add "Explain vulnerability" action - Add "View OWASP reference" action - Prepare AI fix integration

Week 2: AI Features

Day 1-2: AI Fix Generator - Integrate with OpenAI, Anthropic, Together.ai APIs - API key configuration (settings.json) - Generate fix suggestions - Show diff preview before applying

Day 3: CodeSlick Panel (Webview) - Create React-based webview panel - List all vulnerabilities in current file - Severity grouping and filtering - Export report functionality

Day 4: Workspace Scanning - Command: "CodeSlick: Scan Workspace" - Analyze all files in project - Aggregate results - Save scan history (local storage)

Day 5: Testing & Polish - Unit tests (10+ tests) - Integration tests (extension activation, diagnostics) - Performance testing (large files, large workspaces) - Icon design, README, demo GIF

Week 3: Team Integration & Publishing

Day 1-2: Team Account Integration - OAuth flow (connect to codeslick.dev account) - Sync results with team dashboard - Team quota tracking - Settings UI for team config

Day 3: Marketplace Preparation - Polish README.md (screenshots, demo) - Create demo video (Loom/YouTube) - Write changelog - Add telemetry (anonymous usage tracking)

Day 4: Beta Testing - Internal testing (Vikthor + team) - Fix bugs from testing - Performance optimization - Documentation updates

Day 5: Publish to Marketplace - Submit to VS Code Marketplace - Announce on LinkedIn, Twitter, Reddit - Blog post: "CodeSlick for VS Code is here" - Monitor first user feedback

User Experience Examples

Example 1: Real-Time SQL Injection Detection

// User types this code:
const query = `SELECT * FROM users WHERE id = ${userId}`;

// ❌ Immediately see red squiggle under the line
// Hover message:
//   🔴 CRITICAL: SQL Injection (CVSS 9.8)
//   User input concatenated into SQL query.
//   OWASP: A03:2021 Injection | CWE-89
//   [View Details] [Fix with AI]

// User clicks "Fix with AI"
// AI suggests:
const query = 'SELECT * FROM users WHERE id = ?';
db.query(query, [userId]);

// User clicks "Apply" → Code updated instantly

Example 2: Quick Security Audit

User: Command Palette → "CodeSlick: Scan Workspace"
↓
Progress bar: "Analyzing 42 files..."
↓
Results panel shows:
  🔴 Critical: 2
  🟠 High: 5
  🟡 Medium: 12
  ⚪ Low: 8

Click on any issue → Jump to file + line
Click "Export Report" → Save as HTML/JSON/Markdown

Example 3: Team Collaboration

User: Settings → CodeSlick → "Sign in with CodeSlick"
↓
OAuth flow → Connected to Team "Acme Corp"
↓
All scans sync to team dashboard
↓
Quota usage: 47 / 100 analyses this month
↓
Team members see shared findings

Pricing & Monetization

Free Tier

  • ✅ Full static analysis (79+ checks)
  • ✅ Real-time diagnostics
  • ❌ No AI fixes (must use own API key)
  • ❌ No team sync
  • Limit: 20 workspace scans/month

Team Plan (€99/month)

  • ✅ All free features
  • ✅ AI fixes with CodeSlick credits (100 fixes/month)
  • ✅ Team dashboard sync
  • ✅ Shared rules and configurations
  • Limit: Unlimited workspace scans

Enterprise Plan (€299/month)

  • ✅ All team features
  • ✅ Unlimited AI fixes
  • ✅ Custom rules and policies
  • ✅ Priority support
  • ✅ On-premise deployment option

Competitive Analysis

Feature CodeSlick Extension SonarLint Snyk GitHub Copilot
Real-time security checks ✅ 79+ checks ✅ 100+ checks ✅ 50+ checks ❌ No security focus
AI-powered fixes ✅ Multi-provider ❌ Manual only ✅ Limited ✅ General code
Multi-language ✅ JS/TS/Python/Java ✅ 25+ languages ✅ 10+ languages ✅ All languages
Team dashboard ✅ Sync with web ❌ No dashboard ✅ Web dashboard ❌ Individual only
Offline mode ✅ Static analysis ✅ Works offline ❌ Requires internet ❌ Requires internet
Pricing €99/mo team Free (limited) €25/user/mo $10/user/mo

Competitive Advantage: - ✅ AI-powered fixes (not just detection) - ✅ Multi-provider AI (user choice) - ✅ Integrated with web platform (team sync) - ✅ Security-first focus (not general linting)

Success Metrics

Adoption Metrics

  • Extension installs (target: 1000 installs in first month)
  • Monthly active users (MAU)
  • Average scans per user per week
  • User retention (7-day, 30-day)

Engagement Metrics

  • % of users who connect team account
  • % of users who use AI fixes
  • Average fixes applied per user
  • Time spent in CodeSlick panel

Business Metrics

  • Extension-driven team signups
  • Conversion rate (free → team plan)
  • Average revenue per extension user
  • Customer testimonials mentioning extension

Risks & Mitigation

Risk 1: Performance Issues

Problem: Extension slows down VS Code Mitigation: - Debounce analysis (500ms) - Use Web Workers for heavy computation - Only analyze visible files - Performance benchmarking before launch

Risk 2: Low Adoption

Problem: Users don't install extension Mitigation: - Announce to existing codeslick.dev users - Demo video on landing page - Reddit/HackerNews launch post - Offer 1-month free Team plan for early adopters

Risk 3: Marketplace Approval Delays

Problem: VS Code Marketplace takes weeks to approve Mitigation: - Submit early (even before fully polished) - Follow all marketplace guidelines strictly - Have backup plan (direct .vsix distribution)

Risk 4: AI API Costs

Problem: Users generate too many AI fixes, costs explode Mitigation: - Quota limits per plan tier - Rate limiting (1 fix per 5 seconds) - Require user API key for free tier - Monitor costs closely in beta

Decision Gates

Build Extension If:

  • ✅ 30%+ of beta users ask "Is there a VS Code extension?"
  • ✅ User surveys show VS Code is #1 editor (likely yes)
  • ✅ GitHub App adoption is low (suggests UX friction)
  • ✅ Team has 2-3 weeks bandwidth after beta

Don't Build If:

  • ❌ <10% of users mention wanting VS Code integration
  • ❌ GitHub App adoption is high (users are happy)
  • ❌ Team is focused on other priorities (auto-fix PRs, billing issues)
  • ❌ Technical complexity is higher than estimated

User Feedback Questions (Before Building)

Survey beta users:

  1. "What code editor do you primarily use?"
  2. VS Code
  3. WebStorm/IntelliJ
  4. Sublime Text
  5. Vim/Neovim

  6. Other: ___

  7. "Would you use a CodeSlick VS Code extension?"

  8. Yes, absolutely
  9. Yes, maybe
  10. No, prefer web interface

  11. No, use different editor

  12. "What would you expect from a CodeSlick VS Code extension?"

  13. Real-time security warnings as you type
  14. AI-powered quick fixes
  15. Team dashboard sync
  16. Workspace-wide scanning

  17. Other: ___

  18. "Would you pay for a VS Code extension if it saved you time?"

  19. Yes, already pay for other VS Code extensions
  20. Yes, if it's <€10/month
  21. Maybe, depends on features
  22. No, expect it free

Decision Gate: Build if 60%+ use VS Code AND 50%+ would use extension

Next Steps

  1. After Beta Launch (Week 2-4):
  2. Survey users about VS Code usage
  3. Track GitHub App adoption rate

  4. Collect feature requests

  5. Week 5-6 (If validated):

  6. Start VS Code extension development
  7. Week 1: Foundation + diagnostics
  8. Week 2: AI fixes + panel

  9. Week 3: Team integration + publish

  10. Week 7-8 (Post-launch):

  11. Beta test extension with 10 users
  12. Fix bugs, optimize performance
  13. Official marketplace launch
  14. Marketing push (blog, social, email)

Conclusion

A VS Code Extension is a strategic priority because:

  1. Eliminates Friction: Developers don't leave their editor
  2. Always-On Security: Real-time feedback beats PR-based detection
  3. Competitive Differentiator: Few security tools have AI-powered in-editor fixes
  4. Revenue Driver: Extensions convert free users to paid teams

Recommended Timeline: - Phase 5 (Now): Beta testing web platform + GitHub App - Phase 6 (Month 2): VS Code Extension (if validated) - Phase 7 (Month 3): Repository scanning OR JetBrains plugin

Final Decision: Build VS Code extension before repository scanning if beta users are primarily VS Code users.

Last Updated: 2025-11-08 Status: Planning (awaiting beta user feedback) Decision Date: Mid-December 2025 (after 4 weeks of beta testing) Estimated Cost: 2-3 weeks eng time (~€15k if outsourced)