Introduction to SvelteKit DX Tips
In today's video, I'm going to give you 10 tips you can apply today to improve your developer experience when building applications with SvelteKit. Now, I've got some of these tips from this Reddit post here, which I will leave a link to in the video description, but I thought this would be useful to all of you out there. So let's go ahead and get into it.
Tip 1: Clarify Editor Tab Labels for +page.svelte
Alright, so this first tip comes with the fact that all of our pages are now named +page.svelte, right? So let me open one of these. Let's just say we had a bunch of different pages open here. It's really hard for us to tell which page this actually is.
Now, if we have multiple ones open, VS Code will take the path name here and append it to this label, but we can actually make sure this is always showing. Because now we have these two +page.svelte showing, but we don't know what page.server this is, right? So what we can do is we can go into our user settings and we can type in label format. And the first setting here, workbench.editor.labelFormat, if we change this to short, you can see that now no matter what, I'm going to be able to see which page I'm actually working with. So even if I only have one page that's filled open, I can now see that this belongs to the login directory. Okay? And if I have another one open, we can see that belongs to the register directory, and so on and so forth. That's the first tip. Let's move on to tip number two.
Tip 2: Sort Files First in the File Explorer
All right, so tip number two I actually don't use, and that maybe it's because old habits die hard, I'm not too sure, but I could never really get behind this one. But if we open up our user settings, and again, this is stemming from the fact that we have, if you have a ton of nested routes here, you can see it becomes a little bit tricky to tell which file belongs to what directory. You kind of have to walk the dog up this line here to figure out, okay, this belongs to this, I'm not too sure which one these belong to. This is supposed to help with that.
So if we go into our user settings and we go to sort order and we scroll down to explorer.sortOrder and we change this to filesFirst, you're going to see on the left here, this looks pretty foreign to me. And again, I couldn't get used to this. I tried it for three days because I did notice a benefit in the fact that I can see all the files first before the directories, but it just felt a little bit weird to me.
So now if we look at our directories, our source directories here at the bottom, and it's going to have the files first, meaning that any nested directories are going to come after the files that belong to that directory. So we look at our routes here, let me actually collapse these, we can see that the layout.server.ts and the layout.svelte for this specific root route here is before the layout group folders. So then the layout for this layout group comes before the routes that are within this layout group, right? So you can see this, that the files come first. Now again, I couldn't get behind this, but this may be something that you're interested in. So if it is, this is here for you if you'd like to turn this on.
Tip 3: Disable Compact Folders for Clarity
All right, for this third tip here, this occurs if you want to have a route without actually anything in that route, and then a sub-route of that route. So in this case here, you can see we have /login, then we have activate/join, and then our files here are inside of /join. So this +page.svelte is actually inside of /join. However, it does this weird thing where it actually makes the folder compact if there's nothing in it, and that tends to confuse people from time to time. So to turn this off, we can open up our user settings and we want to go to compact folders and we want to uncheck this, and you'll see right away that now we actually can tell that activate is its own directory, right? And then within that activate directory, we have join. So that's just a quick little tip there.
Tip 4: Customize Folder Colors with Material Icon Theme
Alright, so for tip number four has to do with the Material Icon Theme for VS Code. That's the theme that I use here. A lot of people ask me what icon theme I use; that is what it is. And you can see here that the routes directory in SvelteKit is green. So in order to make all these subdirectories also green, so I know which, when I'm in a route... now obviously if you name something a name that's going to trigger, like jobs for example, it's going to trigger its own folder icon, then that, you know, obviously it'll override your colors. But I want all my routes to be green generally, right? That way I can tell that, hey, these are part of my routes.
We can do that if we go to our settings and we type in material icon theme, we scroll down here, we can see that we can change the color of the folder icons. So I just change these to this green color here, 43a047, and then now all my folders are going to be green, right? Rather than the default color. I'm not even sure what the default color is at this point, but this is what I prefer to do here.
Tip 5: Increase Tree Indentation for Readability
All right, so this next tip has to do with again, being able to tell which route you're actually in. So if you notice from my previous tips, the indentions shifted in quite a bit because I set it back to the default setting, which is probably what yours looks like right now. But we can actually change this because look how close these are. When you get down into these deeply nested routes, it's really hard to tell which files belong to which directory.
So what we can do, we can open up our user settings and we can do tree indent. And you can see that the workbench.tree.indent controls the tree indentation in pixels. So if we change this to 12, we can see now that there's a lot more indention happening. And if I change this to 16, I believe, you know, the further over, the more easiest it can be for you to see, but it's going to take up more of that space on your explorer. So for most videos that I'm making, I don't want this to take up so much space, so I usually keep it at about 12, which is enough for me to be able to tell which files belong to which directories.
Tip 6: Use Essential SvelteKit Extensions & Snippets
Alright, so the next thing we're going to cover is extensions. I get asked a lot what extensions I'm using or how I'm doing something in a certain way, and these are the three extensions I use that are related to SvelteKit and Svelte. So let's see how we can actually use these and take full advantage of these. So let's go into our routes, and let's just say we want to create a new route inside of employers. So I have to do is right-click on this, go to SvelteKit files here, click on create route, and I can do /employer/something. I hit enter and let's just say that I want a +page.svelte and a +page.server.ts and click OK. You can see that now a route called something was created. We now have a +page.svelte with some boilerplate already covered. And we also have a load function set up here with the proper satisfies types added. Everything is good to go. So that's a really quick way that you can add routes.
Another one is going to be the Snippets. So let's just say that inside of employers, I want to create a new file, let's just call this +page.ts. All I have to do is type in kit, and you can see that a couple of these things start to pop out, right? So we have kit submit, which I actually created this myself, we'll cover that in just a second. But we have kit actions, kit endpoint, kit load, and kit param matcher. So in this case, let's just say we're going to put a load function here. So we can hit enter on kitload, and now it gives us the option to choose a page load, page server load, or layout load or layout server load, depending on what if you're using TypeScript or not. In this case, it would just be a page load and then we can start to, you know, import whatever we wanted to import here, yada yada. So that's a really quick way. And they have the same thing for actions too. And again, we're not on a page that can support actions, but we can still add them anyways. And you can see here that now we have actions, we can add our first action, and so on and so forth.
Now the kit submit I actually created myself, and I'll show you guys that here in just a second. I'll also leave a link in the description to be able to copy it over, but it just makes adding the progressive enhancement or the submit functions to my +page.svelte that much easier. You can see here that now I already have all the boilerplate that I typically would want inside of a submit function added here. Anything that I don't want, of course, I could remove. So that's a quick way to do this.
Tip 7: Navigate Files Efficiently with 'Go to File'
Now, this next tip has to do with being able to more easily navigate different pages within your application. So this is kind of counterintuitive as to the other tips, because those things help you, you know, navigate your files like this. And I'm also bad at this, clicking around wasting time trying to find things like this. Really there's a much easier way.
So here we have a few different nested routes inside of resume, which is inside of candidates, which is inside of my. So in order to easily find routes, what we can do is we can hit Ctrl+P or Command+P if you're on a Mac, and then if we type in +, we can instantly see all the plus pages and plus servers and plus layouts within our application. You can see here that I have quite a bit, right? But let's just say that I want to find this create page here. So what I can do is I can type create and then +, and now we can see that we have all the pages inside of create first. So I have the +page.svelte and the +page.server that belong to resumes/create. So if I want to do education, I could do education+, and now this is the two pages that are within education. That's just a quick way to switch between files without having to go over here and click these different directories. I myself am trying to improve on this proficiency as well.
Tip 8: Leverage the Svelte Discord Server
All right, so for this last tip, it's going to be using the Svelte Discord server. This thing is a gold mine of resources. Anytime I have a question—I mean, right now obviously the Svelte community is still growing, so there's not as many resources out there as there are for other languages—but if you just use this Discord, search functionality is really good. So if I just want to type in something like loading data here in the Svelte Discord server, I'm going to see questions and answers related to loading data. So you can see here that getting a cookie, right, getting URL parameters in a +page.server. So people have a lot of the same questions that you probably have, and you can easily find the answers to these by searching for the right keywords inside of the Svelte Discord. I can't, you know, say enough as to how much I've been able to learn from following this Discord and searching for things that I have questions about. There's a lot of really experienced individuals here that have been using Svelte since the beginning of its inception. So definitely take advantage of this.
Conclusion
Alright, so that's going to include this video on 10 tips for improving the developer experience working with SvelteKit and Svelte. If you have any questions, you can leave them in the comments below or join the Discord server that I have linked below. And if you got value out of this video, I'd greatly appreciate if you would like and subscribe. It greatly helps the channel. And if nothing else, I will see you all in the next video.
