maxandClaude Opus 5
95799c6353
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>
83 lines
4.5 KiB
Markdown
83 lines
4.5 KiB
Markdown
# Vertical Tabs
|
||
|
||
Your open editors as a flat vertical list, colour-coded by project. Built for working with the tab bar turned
|
||
off (`"workbench.editor.showTabs": "none"`), where a side list *is* the tab bar.
|
||
|
||
It shows up as a **Tabs** view in the Explorer — drag it wherever you want it, including the secondary side bar.
|
||
|
||
## What it adds over the built-in Open Editors view
|
||
|
||
- **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, 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 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, 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. 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.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 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 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 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.
|