feat: add editor label and formatter configuration defaults

[teemingc]

Uses the VS Code extension configuration defaults contribution point to:

• set the default formatter for svelte files as mentioned in the README (which some people may have missed)
• uses the new VS Code custom labels setting to append the directory name to the editor label for SvelteKit +page and +server files.

Default

Label format

"workbench.editor.labelFormat": "short"

Custom labels

  "workbench.editor.customLabels.patterns": {
    "**/+page.*": "${dirname}/${filename}.${extname}",
    "**/+server.*": "${dirname}/${filename}.${extname}",
  },

[benmccann]

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

[teemingc]

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?

Details

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

[benmccann]

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

[teemingc]

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

[teemingc]

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

[paoloricciuti]

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

[ottomated]

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].

[benmccann]

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]

@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]",
},

[sacrosanctic]

what about +error.svelte?

[teemingc]

Adding a reminder for myself to try elstalky’s config shared on discord:

i'm using these:

"workbench.editor.customLabels.patterns": {
    "**/routes/{+server,+layout,+page,+error}.{svelte,ts,cs,server.ts,js,server.js}": "/ (${filename}.${extname})",
    "**/routes/*/{+server,+layout,+page,+error}.{svelte,ts,cs,server.ts,js,server.js}": "/${dirname} (${filename}.${extname})",
    "**/routes/*/*/{+server,+layout,+page,+error}.{svelte,ts,cs,server.ts,js,server.js}": "/${dirname(1)}/${dirname} (${filename}.${extname})",
    "**/routes/*/*/*/{+server,+layout,+page,+error}.{svelte,ts,cs,server.ts,js,server.js}": "/${dirname(2)}/${dirname(1)}/${dirname} (${filename}.${extname})",
    "**/routes/**/*/*/*/*/{+server,+layout,+page,+error}.{svelte,ts,cs,server.ts,js,server.js}": "…/${dirname(2)}/${dirname(1)}/${dirname} (${filename}.${extname})"
},

i.e. /route/here (filename)

[changeset-bot]

⚠️ No Changeset found

Latest commit: d227c9a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[teemingc]

Alternative which shows pathname then file in paranthesis

Suggested change

	"**/+[layout|page|server|error]*": "${dirname}/${filename}.${extname}"
	"**/routes/{+server,+layout,+page,+error}.{svelte,ts,cs,server.ts,js,server.js}": "/ (${filename}.${extname})",
	"**/routes/*/{+server,+layout,+page,+error}.{svelte,ts,cs,server.ts,js,server.js}": "/${dirname} (${filename}.${extname})",
	"**/routes/*/*/{+server,+layout,+page,+error}.{svelte,ts,cs,server.ts,js,server.js}": "/${dirname(1)}/${dirname} (${filename}.${extname})",
	"**/routes/*/*/*/{+server,+layout,+page,+error}.{svelte,ts,cs,server.ts,js,server.js}": "/${dirname(2)}/${dirname(1)}/${dirname} (${filename}.${extname})",
	"**/routes/**/*/*/*/*/{+server,+layout,+page,+error}.{svelte,ts,cs,server.ts,js,server.js}": "…/${dirname(2)}/${dirname(1)}/${dirname} (${filename}.${extname})"

[teemingc]

Personally, I've been using .. as a separator such as /about .. +page.svelte rather than the parenthesis suggested here