I Built a Better File Explorer for VSCode Because macOS Finder is Painful

VSCode File Explorer is a TypeScript extension that brings a complete file management experience directly into Visual Studio Code. Built using VSCode's webview API, it uses a client-server architecture where the extension backend handles file I/O through Node.js fs.promises, and a vanilla JavaScript frontend renders a fast, CSP-compliant UI with grid and list view modes.

The extension communicates via VSCode's bidirectional messaging API, persists user preferences (favorites, view mode, hidden files) through globalState, and bundles with esbuild for minimal production output. Features include inline image previews (JPEG, PNG, GIF, SVG, WebP), a favorites/bookmarks system, full file operations (create, rename, delete), copy-path-to-clipboard, and instant file opening in editor tabs.

Available on the VSCode Marketplace and fully open source under MIT.

Developers spend 8+ hours a day inside their code editor, yet constantly switch to the OS file manager for basic tasks like checking image assets, navigating nested directories, or managing files. Each context switch costs mental focus, and research suggests it takes around 23 minutes to regain full concentration after an interruption. Even 5 switches a day adds up to significant lost productivity.

macOS Finder in particular is painful for developer workflows: slow previews, no integration with the editor, no quick way to toggle dotfiles, and a completely separate UI language from the tool you're already working in. VSCode's built-in explorer covers the basics but lacks image previews, a favorites system, flexible view modes, and intuitive right-click CRUD operations.

The extension eliminates context switching entirely by embedding a full file explorer into VSCode's sidebar. The backend runs on Node.js with async file I/O so nothing blocks the editor. The webview frontend uses vanilla JS (no framework overhead) with custom CSS for responsive grid and list layouts, and loads directory contents lazily so large folders stay performant.

Key design decisions: image previews are generated as base64 and cached in the webview to avoid repeated disk reads. User state (favorites, settings, view preference) persists across sessions via VSCode's globalState API. A bidirectional message protocol keeps the backend and webview loosely coupled, with typed messages for navigation, file operations, and state sync. The result is a zero-dependency, privacy-focused file manager that lives exactly where developers already work.