I Got Tired of Writing JSON Configs, So I Built a Visual UI Inside VS Code (DotCommand v2.0)

#vscode #productivity #opensource #javascript

If you use VS Code, you probably know the drill: you install an awesome extension, and then spend 20 minutes digging through a massive settings.json file trying to configure it.

As developers, we build beautiful interfaces for our users, but we often settle for raw JSON files for our own tooling.

With the release of DotCommand v2.0.0 (The Visual Experience Overhaul), I decided to change that. I completely transformed how developers interact with their workspace commands by introducing a native Analytics Dashboard, a drag-and-drop Visual Rule Builder, and an AI-powered Command Palette.

And the best part? I did it all without heavy frameworks—just pure, lightning-fast Vanilla JS.

Here is how we built it and what’s new.

1. Native Analytics Dashboard inside VS Code

You write hundreds of commands a week, but do you know which ones save you the most time? DotCommand v2.0 introduces a full-blown analytics dashboard right inside your editor.

Instead of just logging data, I wanted a sleek, interactive way to visualize it.

The Tech Behind It:

To keep the extension lightweight, I avoided bundling React or Vue. Instead, I used a Native Webview combined with Chart.js loaded via CDN, safely secured using a Content Security Policy (CSP) with dynamic nonces.

Here’s a snippet of how clean the Webview-to-Extension communication is for exporting data:

// Inside the Webview Controller
private exportToCsv(): void {
    const analytics = getAnalyticsService();
    const summary = analytics.getAnalyticsSummary(30);

    const rows = [
        ['Metric', 'Value'],
        ['Suggestions Shown', summary.totalSuggestionsShown],
        ['Suggestions Accepted', summary.totalSuggestionsAccepted],
        // ... mapped data
    ];

    const csv = rows.map(r => r.join(',')).join('\n');

    // Triggering download via browser engine, bypassing VS Code file system complexity!
    this.panel?.webview.postMessage({
        type: 'downloadCsv',
        content: csv,
        filename: `dotcommand-analytics.csv`
    });
}

2. The Visual Rule Builder (Goodbye, JSON!)

DotCommand allows you to set "Context Rules" (e.g., only suggest Docker commands if a Dockerfile exists). Previously, users had to write this logic in JSON.

Now? You get a beautiful, native-feeling UI form.

Why it rocks:

Live Preview: As you change dropdowns (File Pattern, Directory, Dependency), a live preview updates instantly at the bottom to show you exactly how the rule evaluates.
Workspace Testing: Click a single "Test" button, and the extension instantly evaluates the rule against your actual active workspace, returning a ✅ Matched or ❌ No Match badge.

By utilizing HTML5 Native data attributes (data-id), I built a manual two-way binding system that feels as reactive as React, but with zero overhead.

3. Command Palette Plus: AI Ranking & Fuzzy Search

The default vscode.window.showQuickPick is great, but it lacks advanced sorting out of the box.

I supercharged it by introducing Hybrid Views, Category Filtering, and Machine Learning ranking.

Now, if you type #npm or #git, it instantly filters commands by category. The commands are also sorted based on your actual usage history using an ML scoring mechanism.

To ensure the search is incredibly fast (under a few milliseconds), I wrote a custom, zero-dependency fuzzy match algorithm:

// A blazing fast, zero-dependency fuzzy search helper
const fuzzyMatch = (text: string, query: string): boolean => {
    const t = text.toLowerCase();
    const q = query.toLowerCase();
    let ti = 0;

    for (let qi = 0; qi < q.length; qi++) {
        ti = t.indexOf(q[qi], ti);
        if (ti === -1) return false;
        ti++;
    }
    return true;
};

No need to install a 50kb library just to search through 500 commands!

Takeaways from building this update

Vanilla JS is still a beast: You don't always need a heavy frontend framework for VS Code Webviews. CSS Variables (var(--vscode-foreground)) and standard DOM manipulation can create seamless, native-feeling experiences.
UX matters for DevTools: Developers are users too. Giving them a visual interface instead of a config file drastically reduces the onboarding curve.