A powerful VS Code extension that shows your currently open editors (tabs) arranged in a folder hierarchy, grouped by editor group. Perfect for managing many open files with enhanced navigation and organization features.
✨ Features
🗂️ Hierarchical Organization
Groups tabs by Editor Group ("Group 1", "Group 2", ...)
Organizes files by workspace folder and subfolders
Special sections for files outside the workspace and untitled files
File and folder counts for better overview
🎯 Smart Indicators
Active file highlighting (●)
Dirty/Modified files (●)
Pinned tabs (📌)
Preview tabs (👁)
File counts on folders
Group status indicators
⚡ Enhanced Actions
Open File - Open without preview mode
Reveal Tab - Focus the tab in editor
Close Tab - Close individual files
Close Others - Close all other tabs in group
Copy Path - Copy file path to clipboard
Refresh - Manual refresh
Collapse All - Collapse tree view
⚙️ Configurable Settings
openEditorsHierarchy.autoRefresh - Auto-refresh on tab changes (default: true)
openEditorsHierarchy.showGroupNumbers - Show group numbers (default: true)
openEditorsHierarchy.showFileExtensions - Show file extensions (default: true)
openEditorsHierarchy.showTabBadges - Show tab state badges (default: true)
openEditorsHierarchy.maxRefreshDelay - Refresh delay in ms for performance (default: 100ms)
🚄 Performance Optimizations
Debounced refresh - Prevents excessive rebuilds during rapid tab changes
Change detection - Only rebuilds when actual changes occur
Incremental updates - Efficient tree construction with caching
Tab filtering - Processes only text tabs, ignores binary/custom editors
Optimized sorting - Non-mutating sort operations for better memory usage
🚀 Commands
Command
Description
Shortcut
Open Editors: Refresh
Manually rebuild the tree
-
Open Editors: Collapse All
Collapse all tree nodes
-
Open File
Open file (non-preview)
Context menu
Reveal Tab
Focus tab in editor
Click / Context menu
Close Tab
Close individual tab
Context menu
Close Others
Close other tabs in group
Context menu
Copy Path
Copy file path
Context menu
🔧 How it Works
The extension listens to tab changes via VS Code's Tabs API (vscode.window.tabGroups), maps each tab to a URI, creates a nested folder structure relative to workspace folders, and renders an interactive tree in the Explorer sidebar.
Supported File Types
Text files - Full support with all features
Diff views - Shows the modified side
Untitled files - Grouped in special section
External files - Files outside workspace
📋 Requirements
VS Code 1.84.0+ (uses the modern Tabs API)
Works with single and multi-root workspaces
🛠️ Development
Install & Run
npm install
npm run watch # Start compilation in watch mode
# Press F5 in VS Code to launch Extension Development Host
Build & Package
npm run build # Compile TypeScript
npm run package # Create .vsix package
📁 Project Structure
src/
├── extension.ts # Main extension entry point
├── OpenEditorsProvider.ts # Tree data provider implementation
└── types.ts # TypeScript interfaces
🎯 Usage Tips
Multi-Group Workflow: Open files in different editor groups to see them organized separately
Folder Navigation: Use the hierarchy to understand your project structure at a glance
Quick Actions: Right-click any file for context menu actions
Configuration: Customize the view via VS Code settings (search "Open Editors Hierarchy")
Performance: Auto-refresh can be disabled for large projects if needed
🐛 Known Limitations
Non-text editors (images, binary files) are filtered out
Complex custom editors may not be fully supported
Very large workspaces with 100+ open files may impact performance
