Open Editor Groups

Group and organize your open editors in a tree view — like Open Editors, with folders you control.

Create nested groups, drag files in and out, sort or rearrange by hand, and auto-assign files with regex patterns. Groupings are saved in the workspace so they come back the next time you open the same files.

Install

Install from the Visual Studio Code Marketplace, or from the Extensions view (Ctrl+Shift+X) by searching for Open Editor Groups.

Features

• Tree view in the Explorer sidebar titled Open Editor Groups
• Ungrouped open editors appear at the root, below an Ungrouped divider (not a folder) so they stay visually separate from groups
• Create groups at the root via the + (Create Group) button in the view title
• Create sub-groups via context menu (right-click) on any existing group
• Sort (header icon changes with the mode):
  • ↑ A-Z — sort by file name ascending
  • ↓ Z-A — sort by file name descending
  • Off (gripper icon) — no sorting; drag a file onto another file to reorder, like moving items in Explorer
  • Click the icon to cycle A-Z → Z-A → Off. Or use Sort in the view … menu, or OEG: Turn Off Sorting (Drag to Reorder)
  • Dragging a file onto a sibling while A-Z/Z-A is on automatically turns sorting off so the new order sticks
• Drag and drop:
  • Drag file entries (ungrouped or grouped) into any group
  • With sorting Off, drag a file onto another file to place it there (inside a group or in the ungrouped list)
  • Drag a file out of a group onto the view background or an ungrouped file to ungroup it
  • Drag groups into other groups to nest them (reparent)
  • Drop on the view background or on ungrouped files to move items back to ungrouped root
  • Drag files in from the Explorer (they are opened and assigned to the drop target)
  • Multi-select files/groups and drag them together
• A file can belong to several groups at once (the same path listed under Issue 1 and Issue 2). When you open it, it shows up in every group it is associated with. Closing a tab hides it from the tree; the association stays in .vscode/editor-groups.json until you Remove from Group.
• Add to Group — add this file to another group and keep existing memberships
• Move to Group — move this entry only; other groups that also list the file are unchanged
• Add to New Group (right-click on a file or group) — wraps the item in a new group; works on ungrouped files and on multi-selections
• Open Files... / Open All Files on a group — pick files from that group (including closed ones) or open them all. Useful when a group is named after an issue and you want to load its classes again.
• Group by Pattern — regex rules that show matching open files under the group (not stored in JSON). The pattern is matched against the whole workspace-relative path, so .*.js matches src/foo.js but not package.json. Groups with a pattern show .* next to the open count, a green folder tint, and a check on the Group by Pattern menu. The dialog is pre-filled so you can edit; Save (Enter) or the trash button to remove. Also OEG: Manage Group Patterns. Typical JS files: .*\\.js$.
• Rename and delete groups (files in a deleted group become ungrouped; nested subgroups are removed too)
• Remove a file from a group via context menu ("Remove from Group")
• Close a file (inline x) or close all open files in a group (inline close all)
• Unsaved files show a ● marker, like Open Editors
• The tree marks the active editor: visible file rows get a ● and a highlighted name. Collapsed groups that contain that file also highlight and show ● filename, so you can see which folders hold it without opening them. VS Code cannot select a hidden child without expanding the folder, so collapsed groups stay closed. If the file is in several expanded groups, the occurrence you were already on is kept instead of jumping to another group
• Group expanded / collapsed state is saved in .vscode/editor-groups.json and restored when you reopen the folder
• Persistent storage: groupings are saved to .vscode/editor-groups.json in your workspace
  • When you reopen a file later, if it was previously assigned to a group it will automatically appear under that group again
• Automatically stays in sync with currently open editors/tabs
• File renames/moves inside VS Code update stored URIs so grouped files stay grouped

Usage

1. Open a workspace/folder.
2. Open some files (they will initially appear under the view as ungrouped at the root).
3. Click the + icon in the "Open Editor Groups" view header to create a top-level group. Give it a name.
4. Drag one or more file lines from the ungrouped section into your new group.
   • Or right-click a file → Add to Group and pick Parent / Child from the list.
   • Or right-click any ungrouped (or grouped) file/group entry → Add to New Group to instantly wrap it.
   • You can also drag files from the Explorer into a group.
5. Right-click a group → Create Subgroup to nest further.
6. Drag groups around to reorganize the hierarchy.
7. Your structure + file assignments are saved automatically to .vscode/editor-groups.json.

Next time you open the workspace (and the same files), the files will be placed in the same groups they were in when last saved.

Commands

Accessible from the view title bar or right-click context menus:

• Create Group (top-level, via title bar + button)
• Create Subgroup (right-click on a group)
• Add to Group (keep other memberships)
• Move to Group (this entry only)
• Add to New Group (right-click on file or group — wraps it)
• Open Files... / Open All Files (right-click a group)
• Group by Pattern (OEG: Group by Pattern — Command Palette, view ... menu, or right-click a group)
• Manage Group Patterns (OEG: Manage Group Patterns)
• Rename Group
• Delete Group
• Remove from Group (on a file entry)
• Copy Path / Copy Relative Path / Copy Filename (right-click a file; filename is without the extension)
• Close (on a file entry; also the inline x)
• Close All in Group (on a group; also the inline close-all)
• Refresh
• Sort A-Z / Sort Z-A / Turn Off Sorting (Drag to Reorder) (OEG: …, view sort icon, or Sort in the view … menu)

Data File

• Location: <workspace>/.vscode/editor-groups.json
• Files are stored as workspace-relative paths (forward slashes), so moving or renaming the project folder does not break groupings. Files outside the workspace stay as full URIs.
• Older files that still contain file:// URIs are migrated to relative paths on the next save.
• Files not mentioned in the file are treated as ungrouped while they are open. Ungrouped files are not stored, so the JSON only grows with groups you create.
• Auto-group regex is stored on the group as "pattern". Those groups do not store file names; matching open files appear in the tree automatically.
• "expanded": true means the group is open in the tree. Collapsed groups omit the field.
• You can edit the JSON manually if needed (e.g. to bulk reorganize), then use the Refresh command.

Example:

{
  "version": 2,
  "groups": [
    {
      "id": "g_abc123",
      "name": "Feature A",
      "expanded": true,
      "children": [
        "src/foo.ts",
        {
          "id": "g_def456",
          "name": "Tests",
          "pattern": ".*\\.test\\.ts$",
          "children": []
        }
      ]
    }
  ],
  "sortMode": "manual"
}

Notes / Limitations (v0.1)

• Tracks text editors, custom editors, and notebooks. Diff editors, terminals, and other non-file tabs are ignored.
• In multi-root workspaces the JSON is stored under the first workspace folder's .vscode.
• Duplicate files in groups are prevented.
• Pattern matching uses JavaScript regular expressions against the whole workspace-relative path (unanchored input is wrapped as ^(?:pattern)$). A file can match more than one pattern group. Pattern groups list currently open matches only; closed files disappear until they are opened again.
• Following the active editor never expands a collapsed group. Those groups are highlighted instead (● filename) so you can open the right one.
• Renames done through VS Code are tracked. Renames that happen only on disk (outside VS Code) are not.

Privacy

Grouping data is stored only in your workspace file .vscode/editor-groups.json. The extension does not send telemetry or network requests.

Development

• Clone / open this folder in VS Code.
• npm install
• npm run compile (or use the watch task)
• Press F5 to launch a new Extension Development Host window.
• The Open Editor Groups view appears in the Explorer panel.

Package a VSIX

npm run package

Install the generated .vsix in VS Code with Extensions: Install from VSIX….

Publish to the Marketplace

1. Create a publisher named esancaro at Visual Studio Marketplace Management (Azure DevOps PAT with Marketplace → Manage).
2. npx vsce login esancaro
3. npm run publish:marketplace

To publish a version bump: npx vsce publish minor (or patch / major).

License

MIT © Esteban Castro