DEV Community

Vijay Gangatharan
Vijay Gangatharan

Posted on

The Magic Behind the User Experience: File Insights Features Deep-Dive 🪄

#vscode #codenewbie #productivity #extensions

Part 3 of 5: From User Need to Polished Feature

You know that feeling when you use a tool and it just... works? Everything feels intuitive, responsive, and thoughtfully designed? That's exactly what I wanted to achieve with File Insights. 😊

📊 TL;DR

File Insights transforms a frustrating daily workflow into an effortless experience through 8 carefully crafted features. Real-time updates, smart formatting, detailed tooltips, and comprehensive commands create a seamless user experience that feels like it should have been part of VS Code from day one.

Feature Highlights:

  • ⚡ Real-time updates with 500ms debouncing for perfect responsiveness
  • 🧠 Smart size formatting that adapts to file size (1024 B vs 2.4 MB)
  • 💬 Rich tooltips with file path, size, and modification time
  • 🎹 5 command palette integrations for power users
  • 🔄 Live configuration updates without VS Code restart
  • 🛡️ Large file protection with user-configurable limits

In Part 2, we explored the solid architecture foundation. Now, let's dive into the features that users actually interact with—and the implementation magic that makes them feel effortless.

Feature #1: Real-Time File Size Display 📊

What Users See 👀

A clean, unobtrusive file size indicator in the VS Code status bar that updates instantly as they work:

$(file) 2.4 MB
Enter fullscreen mode Exit fullscreen mode

Simple, right? But beneath this simplicity lies some sophisticated implementation details.

The Breakthrough Moment 🎆

The first time I saw $(file) 2.4 MB appear instantly when switching files, I literally said "YES!" out loud. It was 2 AM, I'd been coding for 6 hours straight, and suddenly the vision became reality. No more right-clicking. No more file explorer. Just... there. Always. ✨

The Implementation Magic ✨

Smart Event Handling 

private registerEventListeners(): void {
  // Listen for active editor changes
  const onDidChangeActiveTextEditor = vscode.window.onDidChangeActiveTextEditor(() => {
    this.scheduleUpdate();
  });

  // Listen for document changes
  const onDidChangeTextDocument = vscode.workspace.onDidChangeTextDocument(event => {
    const activeEditor = vscode.window.activeTextEditor;
    if (activeEditor && event.document === activeEditor.document) {
      this.scheduleUpdate();
    }
  });

  // Listen for document saves
  const onDidSaveTextDocument = vscode.workspace.onDidSaveTextDocument(document => {
    const activeEditor = vscode.window.activeTextEditor;
    if (activeEditor && document === activeEditor.document) {
      this.scheduleUpdate();
    }
  });
}
Enter fullscreen mode Exit fullscreen mode

Why multiple events? Each covers a different user scenario:

  • Editor changes: Switching between files
  • Document changes: Typing and editing content
  • Document saves: File modifications from external tools

Debounced Updates for Performance 

private scheduleUpdate(): void {
  if (this.updateTimeout) {
    clearTimeout(this.updateTimeout);
  }

  this.updateTimeout = setTimeout(() => {
    this.updateFileStats();
  }, this.config.refreshInterval); // Default: 500ms
}
Enter fullscreen mode Exit fullscreen mode

Before File Insights:

  1. Need file size → Right-click → Properties → Wait for dialog → Find size → Close dialog
  2. Flow broken ❌ | Time lost: 8-12 seconds | Mental energy: High

After File Insights:

  1. Need file size → Glance at status bar
  2. Flow maintained ✅ | Time lost: 0.2 seconds | Mental energy: Zero

The psychology: Users expect instant feedback, but file system calls are expensive. The 500ms debounce creates the illusion of real-time updates while preventing performance issues. It feels instant because it is, from their perspective. 🧠

Feature #2: Smart Size Formatting 🤓

What Users Experience

File sizes that make sense:

  • 1024 B (small files stay in bytes)
  • 2.4 KB (medium files get kilobytes)
  • 15.7 MB (large files get megabytes)
  • 1.2 GB (huge files get gigabytes)

The Intelligence Behind It 

static formatSize(bytes: number, config: FileInsightsConfig): FormattedSize {
  if (bytes === 0) {
    return { value: 0, unit: 'B', formatted: '0 B' };
  }

  // Handle forced format
  if (config.displayFormat !== 'auto') {
    return this.formatToSpecificUnit(bytes, config.displayFormat, config);
  }

  // Auto format based on size
  const unitIndex = Math.floor(Math.log(bytes) / Math.log(1024));
  const clampedIndex = Math.max(0, Math.min(unitIndex, this.UNITS.length - 1));

  const value = bytes / Math.pow(1024, clampedIndex);
  const unit = this.UNITS[clampedIndex]; // ['B', 'KB', 'MB', 'GB', 'TB']

  // Format with appropriate decimal places
  const decimals = clampedIndex === 0 ? 0 : 2;
  const formattedValue = Number(value.toFixed(decimals));

  return {
    value: formattedValue,
    unit,
    formatted: `${formattedValue} ${unit}`
  };
}
Enter fullscreen mode Exit fullscreen mode

The "Aha!" moment for formatting: 💫

I was testing with a 512-byte file and File Insights showed "0.5 KB". It felt... wrong. Not technically wrong, but emotionally wrong. That's when I realized:

Users don't want mathematical consistency — they want *contextual appropriateness*

// The breakthrough insight
const decimals = clampedIndex === 0 ? 0 : 2;
// Small files need precision ("512 B")
// Large files need readability ("2.4 MB")
Enter fullscreen mode Exit fullscreen mode

The math magic: Using logarithms to determine the appropriate unit automatically. But here's the human touch—small files (< 1KB) stay in bytes because "0.5 KB" feels weird, but "512 B" feels precise. Psychology beats mathematics every time. 💫

User Control When Needed 

// Configuration options
"fileInsights.displayFormat": {
  "type": "string",
  "enum": ["auto", "bytes", "kb", "mb"],
  "default": "auto",
  "enumDescriptions": [
    "Automatically choose the best format",
    "Always show in bytes", 
    "Always show in kilobytes",
    "Always show in megabytes"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Why provide override options? Real user feedback taught me this:

"I work with web assets that must be under 100KB. When File Insights shows '97.3 KB' vs '99.6 KB', I immediately know which is safe. When it shows 'auto' format mixing MB and KB, I have to do mental math."

User workflow transformation:

  • Before: Mental conversion every time ("Is 0.1 MB over or under 100KB?")
  • After: Instant decision making ("97.3 KB = safe, 101.2 KB = too big")

Sometimes consistency trumps intelligence. 🎯

Feature #3: Detailed Tooltips 💬

The User Experience

Hover over the status bar item and get rich context:

File: /Users/dev/project/assets/hero-image.jpg
Size: 2.4 MB
Last Modified: 12/15/2024, 3:24:17 PM
Enter fullscreen mode Exit fullscreen mode

Implementation Details 

private showFileSize(size: FormattedSize, stats: FileStats): void {
  if (!this.statusBarItem) return;

  this.statusBarItem.text = `$(file) ${size.formatted}`;

  if (this.config.showTooltip) {
    this.statusBarItem.tooltip = SizeFormatter.createTooltip(
      size, 
      stats.path, 
      stats.lastModified
    );
  }

  this.statusBarItem.show();
}

// In SizeFormatter class
static createTooltip(size: FormattedSize, filePath: string, lastModified: Date): string {
  const modifiedTime = lastModified.toLocaleString();
  return `File: ${filePath}\nSize: ${size.formatted}\nLast Modified: ${modifiedTime}`;
}
Enter fullscreen mode Exit fullscreen mode

User delight in the details: 🎉

The tooltip was almost an afterthought until beta users said:

"I love seeing the full path! I work with 5 'index.js' files and this tells me exactly which one I'm looking at."

"The timestamp is perfect for when I'm wondering if this is the latest version."

The thoughtful details that became essential:

  • Full file path: Eliminates confusion in projects with duplicate filenames
  • Localized timestamp: Respects user's time zone and date format preferences
  • Configurable: Can be disabled if users prefer minimal UI
  • Click action: Connects to detailed view for power users

Impact: What started as "nice to have" became "couldn't live without" for many users.

Feature #4: Comprehensive Command Palette Integration 🎛️

What Users Can Do

Open Command Palette (Ctrl+Shift+P) and type "File Insights":

  • File Insights: Enable - Turn on the extension
  • File Insights: Disable - Turn off the extension
  • File Insights: Refresh - Force update file information
  • File Insights: Show Details - Display detailed file info dialog
  • File Insights: Show Output Channel - Open debug logs

The Implementation 

private registerCommands(context: vscode.ExtensionContext): void {
  const commands = [
    vscode.commands.registerCommand('fileInsights.enable', () => this.enableExtension()),
    vscode.commands.registerCommand('fileInsights.disable', () => this.disableExtension()),
    vscode.commands.registerCommand('fileInsights.refresh', () => this.refreshFileStats()),
    vscode.commands.registerCommand('fileInsights.showDetails', () => this.showFileDetails()),
    vscode.commands.registerCommand('fileInsights.showOutputChannel', () => this.showOutputChannel())
  ];

  commands.forEach(command => {
    context.subscriptions.push(command);
    this.disposables.push(command);
  });
}
Enter fullscreen mode Exit fullscreen mode

The Show Details Feature 

private async showFileDetails(): Promise<void> {
  const activeEditor = vscode.window.activeTextEditor;
  if (!activeEditor || !FileService.isValidFile(activeEditor.document)) {
    vscode.window.showWarningMessage('No valid file is currently open');
    return;
  }

  const result = await FileService.getFileStats(activeEditor.document.uri);
  if (!result.success) {
    vscode.window.showErrorMessage(`Unable to retrieve file statistics: ${result.error}`);
    return;
  }

  const stats = result.data;
  const items = [
    `File Path: ${stats.path}`,
    `File Size: ${stats.size} bytes`,
    `Last Modified: ${stats.lastModified.toLocaleString()}`
  ];

  vscode.window.showQuickPick(items, {
    placeHolder: 'File Details',
    canPickMany: false
  });
}
Enter fullscreen mode Exit fullscreen mode

Command palette breakthrough: 🎯

Initially, I thought commands were just "checkbox features" for power users. Then I watched a colleague use File Insights:

He opened Command Palette, typed "file ins", hit Enter on "Show Details", and copied the file path in one fluid motion. Faster than any right-click menu.

Workflow optimization unlocked:

  • Traditional: Right-click → Properties → Manually select path → Copy
  • File Insights: Ctrl+Shift+P → "file" → Enter → Click path → Copied

The UX thinking: Uses VS Code's native showQuickPick for a familiar, accessible interface. Users can even copy individual details by selecting them! Power users get superpowers. 📋

Feature #5: Live Configuration Updates ⚙️

The User Experience

Change any setting and see the effect immediately—no restart required!

The Implementation Magic 

private registerConfigurationListener(): void {
  const configListener = ConfigurationService.onDidChangeConfiguration(newConfig => {
    this.config = newConfig;
    this.statusBarManager.updateConfig(newConfig);
    this.updateFileStats();
    this.logger.info('Configuration updated');
  });

  this.disposables.push(configListener);
}

// In ConfigurationService
static onDidChangeConfiguration(callback: (config: FileInsightsConfig) => void): vscode.Disposable {
  return vscode.workspace.onDidChangeConfiguration(event => {
    if (event.affectsConfiguration('fileInsights')) {
      callback(this.getConfiguration());
    }
  });
}
Enter fullscreen mode Exit fullscreen mode

The "no restart" victory: 🎆

During development, I changed settings constantly for testing. Restarting VS Code 50+ times per day was torture. When I finally implemented live config updates, I literally saved myself hours of restart time.

User testimonial that made me smile:

"I changed the position from right to left and it moved instantly. I actually gasped. This is how ALL extensions should work!"

Before vs After:

  • Traditional extensions: Change setting → Restart VS Code → Wait 10-15 seconds → See result
  • File Insights: Change setting → See result instantly

Why this matters: Traditional extensions often require restart for settings changes. File Insights respects users' time by applying changes instantly. Instant gratification builds trust. ⚡

Feature #6: Smart Status Bar Positioning 📍

User Control 

"fileInsights.statusBarPosition": {
  "type": "string",
  "enum": ["left", "right"],
  "default": "right",
  "description": "Position of the status bar item"
}
Enter fullscreen mode Exit fullscreen mode

Implementation 

private createStatusBarItem(): void {
  const alignment = this.config.statusBarPosition === 'left' 
    ? vscode.StatusBarAlignment.Left 
    : vscode.StatusBarAlignment.Right;

  this.statusBarItem = vscode.window.createStatusBarItem(alignment, 100);
  this.statusBarItem.command = 'fileInsights.showDetails';
}

private updateStatusBarPosition(): void {
  if (this.statusBarItem) {
    this.statusBarItem.dispose();
    this.createStatusBarItem();
  }
}
Enter fullscreen mode Exit fullscreen mode

The "seamless transition" challenge: 🎭

My first attempt at changing status bar position was embarrassing:

  1. User changes position setting
  2. Status bar item disappears
  3. 2-second pause (why?!)
  4. New item appears in new position

Users thought it was broken! The solution required careful state management:

// Store current state before recreation
const wasVisible = this.statusBarItem?.visible;
const currentText = this.statusBarItem?.text;
// Dispose → Create → Restore state
Enter fullscreen mode Exit fullscreen mode

The result: Position changes look like smooth animations even though we're recreating objects. Magic is in the details. 🎭

Feature #7: Large File Protection 🛡️

The Safety Net 

updateFileStats(stats: FileStats | null): void {
  if (!this.config.enabled || !stats) {
    this.hide();
    return;
  }

  try {
    if (stats.size > this.config.maxFileSize) {
      this.showMessage('File too large to analyze');
      return;
    }

    const formattedSize = SizeFormatter.formatSize(stats.size, this.config);
    this.showFileSize(formattedSize, stats);
  } catch (error: unknown) {
    this.logger.error('Failed to update file stats display', error);
    this.hide();
  }
}
Enter fullscreen mode Exit fullscreen mode

The "5GB video file" disaster: 💪

Beta testing revealed my worst nightmare: A user opened a 5GB video file and File Insights froze VS Code for 8 seconds. The entire editor became unresponsive.

That's when I learned: File operations that seem instant can become disasters at scale.

Protection strategy evolution:

  • v1: No limits → VS Code freezes with huge files ❌
  • v2: Hard 100MB limit → Users couldn't analyze legitimate large assets ❌
  • v3: 1GB default, user-configurable → Perfect balance ✅

User experience transformation:

  • Before: Silent failure or editor freeze
  • After: Clear message "File too large to analyze" with option to increase limit

Default protection: 1GB limit prevents performance issues with massive files, but power users can configure higher limits.

User-friendly messaging: Instead of crashing or hanging, users get a clear "File too large to analyze" message. Failure can be a feature when handled gracefully. 💪

Feature #8: Intelligent File Type Detection 🔍

What Gets Analyzed 

static isValidFile(document?: vscode.TextDocument): boolean {
  if (!document) {
    return false;
  }

  // Skip untitled documents and non-file schemes
  if (document.isUntitled || document.uri.scheme !== 'file') {
    return false;
  }

  return true;
}
Enter fullscreen mode Exit fullscreen mode

The thinking:

  • Untitled documents: No file on disk = no meaningful size
  • Remote files: http://, ftp:// schemes don't have local file sizes
  • Virtual files: Git diffs, search results, etc. aren't real files

The "Git diff confusion" lesson: 🎯

Early versions tried to analyze everything - including Git diffs, search results, and virtual files. Users got confused:

"Why does my Git diff show as 2.3KB? That's not a real file!"

Clarity through exclusion:

// Only analyze real files that exist on disk
if (document.isUntitled || document.uri.scheme !== 'file') {
  return false; // Skip virtual/remote files
}
Enter fullscreen mode Exit fullscreen mode

User experience improvement:

  • Before: Confusing size info for virtual files
  • After: Clean, focused experience only for real files

This prevents confusing error states and keeps the extension focused on its core purpose. Sometimes the best feature is the one you don't build. 🎯

The Human Touch: Emotional Design 💝

Consistent Visual Language

Every status bar item uses the $(file) icon for immediate recognition. Users learn to associate this specific icon with file size information.

Progressive Disclosure

  • Default view: Just the essential info (2.4 MB)
  • Hover: More context in tooltip
  • Click: Detailed information dialog
  • Command palette: Advanced actions

Users get exactly the level of detail they need, when they need it. 🎪

Graceful Degradation

When things go wrong, File Insights fails gracefully:

  • Can't read file? Hide the status bar item
  • File too large? Show explanatory message
  • No file open? Silently wait for one

No jarring error dialogs or broken states—just smooth, professional behavior. ✨

Performance: The Invisible Feature ⚡

Lazy Loading 

export function activate(context: vscode.ExtensionContext): void {
  try {
    extensionManager = new ExtensionManager(context);
    context.subscriptions.push(extensionManager);
  } catch (error: unknown) {
    const errorMessage = error instanceof Error ? error.message : String(error);
    vscode.window.showErrorMessage(`Failed to activate File Insights: ${errorMessage}`);
    throw error;
  }
}
Enter fullscreen mode Exit fullscreen mode

Activation strategy: onStartupFinished means File Insights loads after VS Code is fully ready, never blocking the editor startup. 🚀

Memory Management 

dispose(): void {
  if (this.updateTimeout) {
    clearTimeout(this.updateTimeout);
  }

  this.statusBarManager.dispose();
  this.disposables.forEach(disposable => disposable.dispose());
  this.logger.dispose();

  this.logger.info('File Insights extension disposed');
}
Enter fullscreen mode Exit fullscreen mode

Clean shutdown: Every resource is properly disposed, preventing memory leaks that could slow down VS Code over time. 🧹

What Makes This Special? 🌟

1. Thoughtful Defaults

Every default setting was chosen based on real usage patterns, not developer convenience.

2. User Agency

Users can customize everything that matters without overwhelming configuration options.

3. Performance Obsession

Every feature is implemented with VS Code's performance in mind—no janky animations or blocking operations.

4. Error Recovery

When things go wrong (and they will), the extension gracefully recovers instead of crashing.

5. Accessibility

Standard VS Code patterns ensure screen readers and keyboard navigation work perfectly.

The Feedback Loop 🔄

The most rewarding part of building these features? Hearing from users:

"Finally! This should have been built into VS Code from the beginning."

"I didn't know I needed this until I used it."

"It just works exactly how I expected it to."

These aren't just compliments—they're validation that thoughtful feature design matters. When users say "it just works," that's hundreds of implementation decisions working in harmony. 🎵

What's Coming Next? 🗺️

In Part 4, we'll explore the technical challenges that weren't obvious from the outside—performance optimization, cross-platform compatibility, error handling strategies, and the debugging techniques that saved the day.

Part 5 will cover testing strategies, performance monitoring, and the roadmap for future features.

Feature fanatics! 🤩 Which File Insights feature surprised you the most? What other VS Code productivity improvements would you love to see? Share your thoughts below!

🔗 **Useful Links:**

📖 **Next up: Part 4 - Technical Challenges: The Problems You Don't See

Great software is 10% inspiration and 90% thoughtful implementation. If File Insights makes your workflow smoother, please consider ⭐ starring the repository! 🙏

Top comments (0)