Better Explorer

A VS Code sidebar extension that combines a file explorer and open tabs panel, providing a more intuitive workspace navigation experience.

Motivation

Since October 2020, the VS Code community has been requesting vertical tabs support through issue #108264. The feature request has accumulated significant community interest — three related duplicate issues alone gathered 57 upvotes, and earlier vertical tab extensions have attracted nearly 10,000 installs. Despite this demand, the feature has remained on the backlog without being assigned or implemented by the official team.

This extension was built to fill that gap. It provides a sidebar panel that displays open tabs vertically alongside a file explorer, making it much easier to navigate between files when many tabs are open — no more scrolling through a crowded horizontal tab bar.

Features

Dual Panel Layout

• Files Panel (left): Full-featured file tree with multi-workspace folder support
• Open Tabs Panel (right): All open editor tabs grouped by editor group
• Resizable divider between panels

File Explorer

• Multi-workspace folder support — each folder displayed as an independent root node
• Expand/collapse directories with persistent state across sessions
• Single click to preview files, double click to open as permanent tabs
• Drag and drop to move files and folders
• Auto-expand folders when dragging over them (750ms delay)
• Auto-scroll when dragging near top/bottom edges
• File search with real-time filtering
• Codicon-based file type icons

Context Menus

File context menu: New File, New Folder, Reveal in Finder, Open in Integrated Terminal, Open in Images Preview (image files), Find in Folder, Copy Path, Copy Relative Path, Rename, Delete

Folder context menu: New File, New Folder, Reveal in Finder, Open in Integrated Terminal, Find in Folder, Open Folder Settings, Remove Folder from Workspace (root folders only), Copy Path, Copy Relative Path, Rename, Delete

Empty area context menu: New File, New Folder, Open in Integrated Terminal, Add Folder to Workspace

Tab context menu: Close, Close Others, Close to the Right, Copy Path, Reveal in Explorer

Tab Integration

• Clicking a tab automatically reveals the file in the file tree
• Tabs grouped by editor group with active group indicator
• Modified file indicator
• Close button on hover

Panel Actions

• New File / New Folder — creates in the selected folder or workspace root
• Refresh — reloads the file tree
• Collapse All — collapses all expanded directories

Configuration

You can customize the extension behavior in VS Code settings (Cmd+, / Ctrl+, → search "Better Explorer"):

Example settings.json:

{
  "betterExplorer.excludeDirs": [".git", "node_modules", ".next"],
  "betterExplorer.maxItems": 10000
}

Changes take effect immediately — no reload required.

Installation

1. Clone this repository
2. Run npm install
3. Run npm run build
4. Press F5 in VS Code to launch the Extension Development Host

Development

# Build
npm run build

# Watch mode
npm run watch

# Package
npm run package

Tech Stack

• TypeScript
• VS Code Extension API (WebviewViewProvider)
• esbuild bundler
• @vscode/codicons

Developed with XiaoMi Mimo

This extension was developed using the XiaoMi Mimo AI model.

https://platform.xiaomimimo.com