File search / exploring is not as convinent as before

[kuchaguangjie]

e.g In webstorm, there are shortcut to search for files, and I can input the file name to search.

Since all route endpoint files are called +page.svelte now, it's harder to find & open a specifc page, I need to check which dir it is more carefully than before.

There are similar cases before, but at least there can be various names (e.g index.svelte, login.svelte, [id].svelte, [uuid].svelte), thus much less collisions.

Any suggestion on this ?

[nikfp]

Depending on what editor you are using, you might have access to fuzzy search. In VS Code for example, I can hit ctrl+p for quick open, then type in customer page.sv WITH the space. This will filter by the character sequences for BOTH customer and page.sv, and I get a short list of 3 pages I could be looking for: src/routes/customers/+page.svelte, src/routes/customer/[id]/+page.svelte, src/routes/customer/new/+page.svelte.

Results are as good as they were before the update, maybe this would help in your situation? Not sure if Webstorm behaves the same way.

[gterras]

The .svelte-kit dir showing up is a matter of editor configuration. This discussion isn't really about SvelteKit.

[kuchaguangjie]

@nikfp I could config webstorm to ignore .svelte-kit.

Regarding index.svelte, I mean /src/routes/index.svelte, there is no dir like [id] to input to search for it.

[nikfp]

I see, so you are looking for the base route of / in the browser and related pages. I can understand how that would kick out a ton of files if you just search +page.svelte.

What you can do in this scenario is include the routes portion, so a search of routes/+page.sv (in my case) gets you right to the root index page as the top result, even though VS Code returns a ton of results. Webstorm should behave similar.

I don't think this would be a big difference when the page was index.svelte though. 😕

[kuchaguangjie]

@nikfp Yes, search by routes/+page.sv shows every +page.sv, but sorted, similar as in vs code.

Ok, this has being a useful discussion I think, in short:

prefer search by dir name, instead of file name.

[nikfp]

@kuchaguangjie 👍

[kuchaguangjie]

I'm wondering is there something can be done in the svelte plugins for ide, since all names are +page.svelte or +layout.svelte.
e.g providing a shortcut to search for svelte route pages only, and search by input dir name, not page name (since there are almost only 2 file names).

Maybe this can almost already be done by specify filters (or not ?), anyway specify filter takes time too ..

[david-plugge]

Good idea! Im sure there is something we can do abou that. Maybe even add something like p: about to Filter for pages in about.

[benmccann]

The lastest VS Code nightly release should help here: https://twitter.com/BenjaminMcCann/status/1770847155739144487

[rmunn]

It's now released, and I discovered the "custom labels" setting via reading the release notes. The VS Code release notes example shows a bunch of index.jsx React files being turned into ComponentName.jsx in the editor tab. Should be pretty trivial to set up something similar for turning dirname/+page{.ts,.server.ts,.svelte} into the label(s) dirname{.ts,.server.ts,.svelte}.

[benmccann]

Please see sveltejs/language-tools#2330 which would setup patterns via the extension. We'd love feedback on it!