VSCode now supports custom tab labels!

plasmatech8 commented 2 weeks ago

We no longer need to put up with +page.svelte, +server.ts all over our editor tabs anymore.

For example, we can define config in our settings.json like below:

{
  // ...
  "workbench.editor.customLabels.patterns": {
    // Page
    "**/routes/**/*/+page.svelte": "${dirname} - Page",
    "**/routes/+page.svelte": "(root) - Page",
    // Layout
    "**/routes/**/*/+layout.svelte": "${dirname} - Layout",
    "**/routes/+layout.svelte": "(root) - Layout",
    // Page Data
    "**/routes/**/*/+page.[tj]s": "${dirname} - Page Data",
    "**/routes/+page.[tj]s": "(root) - Page Data",
    // Layout Data
    "**/routes/**/*/+layout.[tj]s": "${dirname} - Layout Data",
    "**/routes/+layout.[tj]s": "(root) - Layout Data",
    // Page Server Data
    "**/routes/**/*/+page.server.[tj]s": "${dirname} - Page Server Data",
    "**/routes/+page.server.[tj]s": "(root) - Page Server Data",
    // Page Layout Data
    "**/routes/**/*/+layout.server.[tj]s": "${dirname} - Layout Server Data",
    "**/routes/+layout.server.[tj]s": "(root) - Layout Server Data",
    // Error Page
    "**/routes/**/*/+error.svelte": "${dirname} - Error Page",
    "**/routes/+error.svelte": "(root) - Error Page",
    // Server Endpoint
    "**/routes/**/*/+server.[tj]s": "${dirname} - Server Endpoint"
  }
}

And get a result like:

More info on customization here.

plasmatech8 commented 2 weeks ago

A minimal version:


{
  // ...
  "workbench.editor.customLabels.patterns": {
    "**/routes/**/+*": "${dirname} - ${extname}",
  }
}

plasmatech8 commented 2 weeks ago

More examples:

plasmatech8 / vscode-better-sveltekit-tab-labels

VSCode now supports custom tab labels! #2