I wonder if we could drop routes from the example. It makes sense to include the directory for URLs like /about, but we don't necessarily need it for the root directory where we could show just /+page.js. Maybe we can have another entry earlier without the leading **?

I also wonder if we could show /about/+page.js if it's only one level deep and .../[id]/+page.js if it's multiple levels deep

I wonder if we could drop routes from the example. It makes sense to include the directory for URLs like /about, but we don't necessarily need it for the root directory where we could show just /+page.js. Maybe we can have another entry earlier without the leading **?

I had this initially too but realised it could break if anyone changed the files.routes config and it no longer points to src/routes. But this should be a minority of users? https://kit.svelte.dev/docs/configuration#files

I also wonder if we could show /about/+page.js if it's only one level deep and .../[id]/+page.js if it's multiple levels deep

Maybe something like this?

"workbench.editor.customLabels.patterns": {
    "src/routes/+[page|server]*": "/${filename}.${extname}",
    "src/routes/*/+[page|server]*": "/${dirname}/${filename}.${extname}",
    "src/routes/*/*/**/+[page|server]*": ".../${dirname}/${filename}.${extname}",
},

I had this initially too but realised it could break if anyone changed the files.routes config and it no longer points to src/routes. But this should be a minority of users? https://kit.svelte.dev/docs/configuration#files

We could potentially duplicate the rules and remove the src/routes from the second set as a fallback for users who have changed that config setting

I had this initially too but realised it could break if anyone changed the files.routes config and it no longer points to src/routes. But this should be a minority of users? kit.svelte.dev/docs/configuration#files

We could potentially duplicate the rules and remove the src/routes from the second set as a fallback for users who have changed that config setting

I'm not sure how to get the fallback rules to recognise the nesting level since without knowing the files.routes configuration. I did add a very general fallback rule to just append the directory name which isn't as nice but maybe it's better than nothing

Another suggestion regarding layout groups:

If you had layout groups, your tabs wouldn't give you the context of what route the file if for:

So maybe we can show the directory before the layout group?

"src/routes/(*)/+[layout|page|server]*": "/${filename}.${extname} ${dirname}",
"src/routes/*/**/(*)/+[layout|page|server]*": "/${dirname(1)}/${filename}.${extname} ${dirname(0)}",

EDIT: actually this is a terrible idea since it would be inconsistent for deeper nested directories while we don't have capture groups

I wonder if we could drop routes from the example. It makes sense to include the directory for URLs like /about, but we don't necessarily need it for the root directory where we could show just /+page.js. Maybe we can have another entry earlier without the leading **?

I also wonder if we could show /about/+page.js if it's only one level deep and .../[id]/+page.js if it's multiple levels deep

I tried exactly this in my configuration but removed it because:

1. With very nested stuff it can get very long and it will still not reflect the actual route
2. With not so nested stuff it will include routes which I didn't like
3. In the end I got already used to the current version and I prefer being precise and not changing stuff and maybe make it more confusing

This is what I came up with:

"workbench.editor.customLabels.patterns": {
	// Root
	"**/routes/+layout.svelte": "/ [layout]",
	"**/routes/+page.server.ts": "/ [server]",
	"**/routes/+layout.server.ts": "/ [layout.server]",
	"**/routes/+server.ts": "/ [endpoint]",
	"**/routes/+page.svelte": "/ [page]",
	// 1st level
	"**/routes/*/+layout.svelte": "/${dirname} [layout]",
	"**/routes/*/+page.server.ts": "/${dirname} [server]",
	"**/routes/*/+layout.server.ts": "/${dirname} [layout.server]",
	"**/routes/*/+server.ts": "/${dirname} [endpoint]",
	"**/routes/*/+page.svelte": "/${dirname} [page]",
	// Nested
	"**/routes/*/*/**/+layout.svelte": "${dirname(1)}/${dirname} [layout]", 
	"**/routes/*/*/**/+page.server.ts": "${dirname(1)}/${dirname} [server]",
	"**/routes/*/*/**/+layout.server.ts": "${dirname(1)}/${dirname} [layout.server]",
	"**/routes/*/*/**/+server.ts": "${dirname(1)}/${dirname} [endpoint]",
	"**/routes/*/*/**/+page.svelte": "${dirname(1)}/${dirname} [page]",
}

Very convoluted but this makes things like src/routes/+page.svelte -> / [page] but src/routes/api/nested/endpoint/+server.ts -> nested/endpoint [endpoint].

I tried exactly this in my configuration but removed it because: With not so nested stuff it will include routes which I didn't like

@paoloricciuti I'm not sure you did try the same thing then. My suggestion was that routes should never be shown

@ottomated your setup can't differentiate between +page.svelte and +page.js

@ottomated your setup can't differentiate between +page.svelte and +page.js

Good catch, here's a more comprehensive version:

"workbench.editor.customLabels.patterns": {
	// Root
	"**/routes/+layout.svelte": "/ [layout]",
	"**/routes/+layout.server.[jt]s": "/ [layout.server.load]",
	"**/routes/+layout.[jt]s": "/ [layout.load]",
	"**/routes/+page.svelte": "/ [page]",
	"**/routes/+page.server.[jt]s": "/ [server.load]",
	"**/routes/+page.[jt]s": "/ [load]",
	"**/routes/+server.[jt]s": "/ [endpoint]",
	// 1st level
	"**/routes/*/+layout.svelte": "/${dirname} [layout]",
	"**/routes/*/+layout.server.[jt]s": "/${dirname} [layout.server.load]",
	"**/routes/*/+layout.[jt]s": "/${dirname} [layout.load]",
	"**/routes/*/+page.svelte": "/${dirname} [page]",
	"**/routes/*/+page.server.[jt]s": "/${dirname} [server.load]",
	"**/routes/*/+page.[jt]s": "/${dirname} [load]",
	"**/routes/*/+server.[jt]s": "/${dirname} [endpoint]",
	// Nested
	"**/routes/*/*/**/+layout.svelte": "${dirname(1)}/${dirname} [layout]",
	"**/routes/*/*/**/+layout.server.[jt]s": "${dirname(1)}/${dirname} [layout.server.load]",
	"**/routes/*/*/**/+layout.[jt]s": "${dirname(1)}/${dirname} [layout.load]",
	"**/routes/*/*/**/+page.svelte": "${dirname(1)}/${dirname} [page]",
	"**/routes/*/*/**/+page.server.[jt]s": "${dirname(1)}/${dirname} [server.load]",
	"**/routes/*/*/**/+page.[jt]s": "${dirname(1)}/${dirname} [load]",
	"**/routes/*/*/**/+server.[jt]s": "${dirname(1)}/${dirname} [endpoint]",
},

what about +error.svelte?