Better tab labels for SvelteKit in VSCode

The problem

SvelteKit’s routing system is useful as it makes it abundantly clear what code is running where. It achieves this by making the developer explicitly choose where their code should run. E.g., route-name/+page.js runs locally on the client and route-name/+page.server.js runs on the server.

By default Visual Studio Code (VSCode) labels tabs with the file name. As your project grows you may find yourself with many route files open simultaneously and it can be difficult to rapidly distinguish which tab you need because you need the directory name AND the file name.

VSCode does try to help here by displaying the path in small text if you have multiple files open with the same name, however there is now an improved way.

The solution

Visual Studio Code (VSCode) added customisable tab labels in March 2024.

From their changelog on the new feature:

We now let you customize the display label for editor tabs and the Open editors view. This functionality can be useful to distinguish between editors for files with the same name.

To make use of these add the following to your settings.json (via Command Palette > Preferences: Open User Settings (JSON) or the Workspace equivalent if you prefer):

"workbench.editor.customLabels.enabled": true,
"workbench.editor.customLabels.patterns": {
    "**/src/routes/**/+page.svelte": "${dirname} - Page",
    "**/src/routes/**/+page.ts": "${dirname} - Page Load",
    "**/src/routes/**/+page.js": "${dirname} - Page Load",
    "**/src/routes/**/+page.server.ts": "${dirname} - Page Server",
    "**/src/routes/**/+page.server.js": "${dirname} - Page Server",
    "**/src/routes/**/+error.svelte": "${dirname} - Error",
    "**/src/routes/**/+layout.svelte": "${dirname} - Layout",
    "**/src/routes/**/+layout.ts": "${dirname} - Layout Load",
    "**/src/routes/**/+layout.js": "${dirname} - Layout Load",
    "**/src/routes/**/+layout.server.ts": "${dirname} - Layout Server",
    "**/src/routes/**/+layout.server.js": "${dirname} - Layout Server",
    "**/src/routes/**/+server.ts": "${dirname} - API",
    "**/src/routes/**/+server.js": "${dirname} - API"
}

Now instead of seeing tab labels like +page.server.js ../signup you will see signup - Page Server. If you’d prefer different names simply update the values above!

Alternative solution

If you don’t like the custom tab label approach you can improve the default display by updating your settings.json with:

"workbench.editor.labelFormat": "short"