10X Your SvelteKit Developer Experience in VSCode

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 spell kit 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 alright so this first tip comes with the fact that all of our pages are now named plus page.svelt 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 right now if we have multiple ones open vs code will will take the path name here and append it to this label but we can actually make sure this is always showing right because now we have these two page that's felt 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 label format 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 is 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 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 uh 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 explore sort order and we change this to files first 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 direct directory so we look at our routes here uh let me actually collapse these we can see that the layout.server.ts and the layout.felt for this specific root route route here is big4 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 all right for this third tip here uh 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 slash login then we have activate slash join and then our files here are inside of Slash join so this page.s felt is actually inside of Slash 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 all right 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 and spell kit 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 go to whoops 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 four three a047 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 um but this is what I prefer to do here 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 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 um you know the further over the more easiest 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 all right 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 spell kit and spell 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 spell kit files here click on create route and I can do slash employer slash something I hit enter and let's just say that I want a page.spell and a page.server.ts and click OK you can see that now a route called something was created we now have a page dot spell with some boilerplate already covered and we all 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 Plus 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 right now the kids snippet I actually created myself and I'll show you guys that here in just a second I'll leave also leave a link in the description to uh be able to copy it over but it just makes adding the progressive enhancement or the submit functions to my page that spells 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 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 um 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 instead 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 plus we can instantly see all the plus pages and plus servers and plus layouts uh 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 plus and now we can see that we have all the pages inside of create first so I have the plus page that's felt and the plus page.server they belong to resumes create so if I want to do education I could do Education Plus 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 all right so for this last tip it's going to be using the svelt Discord server this thing is a gold mine of resources anytime I have a question I mean right now obviously the spell 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 these felt 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 plus 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 these fault 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 all right so that's gonna include this video on 10 tips for improving the developer experience working with spell kit 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 by 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 [Music] foreign [Music] [Music]

Channel: Huntabyte

Views: 31,002

Keywords: sveltekit, sveltekit tutorial, sveltekit crash course, sveltekit load functions, sveltekit endpoints, sveltekit routing, sveltekit form actions, sveltekit forms, sveltekit actions, form actions sveltekit, +server, api route svelte, sveltekit API routes, svelte routes, layouts, sveltekit layout groups, advanced layout sveltekit, sveltekit vscode, sveltekit icons, sveltekit extensions, sveltekit productivity, sveltekit best practices, sveltekit webapp, sveltekit tips

Id: 13v50nLh67Q

Length: 10min 0sec (600 seconds)

Published: Wed Dec 21 2022