max/vs-code-vertical-tabs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Update the README for the drawn list

Browse Source 
The colour is a left border now, not a tinted icon; pinning is one toggle;
row spacing and border width are settings; and file-type icons are gone,
which is worth stating plainly along with the reason.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
max
2026-09-07 18:35:01 +02:00
co-authored by Claude Opus 5
parent cf168b2e75
commit 95799c6353
1 changed files with 39 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+39 -29
View File
@@ -7,66 +7,76 @@ It shows up as a **Tabs** view in the Explorer — drag it wherever you want it,
## What it adds over the built-in Open Editors view
- **A colour per project.** Each row's icon is tinted by the project that contains the file — the nearest
`.csproj`/`.fsproj`/`.vbproj`, `package.json`, `Cargo.toml`, `go.mod`, `pyproject.toml`, `pom.xml` or
`build.gradle` above it. The colour comes from a hash of the project name, so a project keeps the same colour
across sessions and windows.
- **A colour per project**, as a border down the left of each row — the way Visual Studio marks them. The
project is the nearest `.asmdef`, `.csproj`/`.fsproj`/`.vbproj`, `package.json`, `Cargo.toml`, `go.mod`,
`pyproject.toml`, `pom.xml` or `build.gradle` above the file. The colour comes from a hash of the project
name, so a project keeps the same colour across sessions and windows.
- **A flat list, not a tree.** One row per open editor, no group nodes to expand.
- **Names that stay readable in a narrow strip.** The stem is ellipsized but the extension never is, so you
get `ClientDogSurgeryCompanionBeha… .cs` rather than losing the `.cs`.
- **Sorting.** Open order (matching the tab bar), by project so the colours run in blocks, or by file name.
Pinned tabs stay on top.
- **The project name beside the file**, along with the directory when two files share a name.
Pinned tabs stay on top, with a rule under the pinned block.
- **Room to breathe.** Row spacing and border width are settings.
Pinning is VS Code's own — this view just exposes it per row, and pinned tabs sort first.
Pinning is VS Code's own — this view exposes it per row as a single toggle, and pinned tabs sort first.
## Usage
| Action | How |
| --- | --- |
| Focus a tab | Click the row |
| Close | The `×` on hover, or the context menu |
| Pin / unpin | The pin icon on hover, or the context menu |
| Close others | Context menu — keeps pinned tabs |
| Close | The `×` on hover, middle-click, or `Delete` |
| Pin / unpin | The pin icon on the left of the row — one button, filled when pinned |
| Close others | Right-click → *Close Others* — keeps pinned tabs |
| Copy path, reveal in Explorer | Right-click |
| Move around | Arrow keys, `Home`, `End`, `Enter` to open |
| Change sorting | The view's `…` menu |
The list follows the active editor, so whatever you switch to is selected.
The list follows the active editor, so whatever you switch to is selected. An unsaved file shows a dot, which
the close button replaces on hover.
## Settings
- `verticalTabs.order` — `open` (default), `project`, or `name`
- `verticalTabs.pinnedFirst` — list pinned tabs above the rest (default `true`)
- `verticalTabs.showProject` — show the project name beside the file (default `true`)
- `verticalTabs.showDirectory` — show the directory beside the file (default `true`)
- `verticalTabs.colorByProject` — tint each row's icon by project (default `true`)
- `verticalTabs.colorByProject` — colour each row's left border by project (default `true`)
- `verticalTabs.borderWidth` — width of that border in pixels (default `3`)
- `verticalTabs.rowSpacing` — pixels between rows (default `2`)
- `verticalTabs.showProject` — also show the project name as text (default `true`)
- `verticalTabs.showDirectory` — also show the directory as text (default `true`)
- `verticalTabs.allGroups` — list every editor group, not just the active one (default `true`)
- `verticalTabs.projectFiles` — file names or extensions that mark a project root
The eight project colours are theme colours (`verticalTabs.project1` … `project8`, plus
`verticalTabs.noProject`), so you can override any of them in `workbench.colorCustomizations`.
The twelve project colours are theme colours (`verticalTabs.project1` … `project12`, plus
`verticalTabs.noProject`), so you can pin a project to a specific colour in `workbench.colorCustomizations`.
## Known limitations
- **Webview tabs cannot be focused from the list.** There is no API to activate an arbitrary tab; a file-backed
tab is focused by re-opening its resource, which webviews (Settings, Keyboard Shortcuts, Markdown preview,
extension panels) do not have. They are listed, with a tooltip saying so, but clicking them does nothing.
- **Pinning another tab focuses it first.** VS Code can only pin the *active* editor, so pinning a row means
opening it and then pinning. Clicking a row's pin icon therefore also switches to it.
- **No drag to reorder.** The list reflects VS Code's own tab order; it cannot rearrange it. Note that VS Code
moves a pinned tab to the front of its group, so `open` order shows pinned tabs first regardless of
`verticalTabs.pinnedFirst` — that setting only changes the `project` and `name` orders.
- **The colour replaces the file-type icon.** Each row shows a tinted dot instead of the usual `.cs`/`.json`
icon. Set `verticalTabs.colorByProject` to `false` to get file icons back and keep the project name in the
description.
- The colour is on the row's icon, not its label. Labels get the theme's own colouring (including Git status),
which an extension cannot override without also recolouring the Explorer.
extension panels) do not have. They are listed in italics, with a tooltip saying so, and clicking does
nothing rather than pretending.
- **Pinning another tab focuses it first.** VS Code can only pin the *active* editor, so the pin button also
switches to that tab.
- **No drag to reorder.** The list reflects VS Code's own tab order. Note that VS Code moves a pinned tab to
the front of its group, so `open` order shows pinned tabs first regardless of `verticalTabs.pinnedFirst` —
that setting only changes the `project` and `name` orders.
- **No file-type icons.** The row shows the project border instead. Adding icons back would mean bundling an
icon set, since a webview cannot reach the active file-icon theme.
- Rows are drawn rather than native, so they do not pick up list styling from every theme the way a tree view
would, and there is no native drag-and-drop.
## Tests
`npm test` launches VS Code with all other extensions disabled on a multi-project folder, opens editors, and
asserts on the resulting list — projects resolved, ordering, pinning through the commands, diff tabs reporting
their modified side, and webview tabs correctly reporting that they cannot be activated.
asserts on the resulting list — projects resolved, ordering, pinning through the real actions, diff tabs
reporting their modified side, and webview tabs correctly reporting that they cannot be activated.
Point it at your own multi-project folder with `VERTICAL_TABS_TEST_FOLDER`:
```bash
VERTICAL_TABS_TEST_FOLDER=/path/to/solution npm test
```
The rendering itself is checked in a browser harness at side-bar width, driving the same `media/tabs.js` with
stub tab data.