10X Your SvelteKit Developer Experience in VSCode
Vložit
- čas přidán 2. 08. 2024
- If you find my content useful and want to support the channel, consider contributing a coffee ☕: hbyt.us/coffee
SvelteKit is a framework for building modern, high-performance, browser-based applications. It was developed by the team behind the popular Svelte framework and is powered by Svelte. Unlike other JavaScript frameworks, it doesn't use a virtual DOM or deliver a bloated and slow application.
In this video, I cover 10 tips to improve your developer experience when building web applications with SvelteKit & VSCode.
📚 Resources Mentioned In This Video:
Reddit Post: / quality_of_life_tips_w...
SubmitFunction Snippet: pastebin.com/D9ipCALC
Material Icon Theme: marketplace.visualstudio.com/...
Material Icon Folder Color: 43A047
Extensions:
- marketplace.visualstudio.com/...
- marketplace.visualstudio.com/...
- marketplace.visualstudio.com/...
🚀 Become a channel member: hbyt.us/join
💬 Discord: hbyt.us/discord
🐦 Twitter: hbyt.us/twitter
🖥️ Setup Stuff: hbyt.us/gear
🔖 Chapters:
00:00 - Intro
00:14 - Tab Labels
01:08 - Explorer: Files First
02:38 - Compact Folders
03:23 - Material Icons Theme
04:23 - Tree Indentation
05:17 - Extensions
07:21 - Quicker Navigation
08:29 - Svelte Discord
09:22 - Outro
📃 Topics Covered:
- SvelteKit VSCode Extensions
- What is SvelteKit?
- SvelteKit Snippets
- SvelteKit Tips
- Svelte Tips
- SvelteKit VSCode theme
- SvelteKit intellisense
- SvelteKit Productivity
__________________________________________
(Affiliate links may be included in this description. If you choose to purchase a product from one of those links, I may receive a small commission at no cost to you. Thank you for supporting the channel!)
This is almost exactly the same video I wanted to make. One thing I would love for VS Code is to have an adjustable line height for the explorer because it's hard to parse the project structure sometimes and increasing the indentation helps but I would also like to increase the line height.
every comment got a heart but yours! :(
Totally agree with you, this has always been a pain point for me in VS Code, ,apps like Nova do a much better job at this layout - alas that app is full of its own issues, esp for Svelte devs
@Phillip I hadn’t checked all the comments yet!
I completely agree! I wonder if possible via an extension of some sort? I’m sure a lot of people would benefit!
Might be nice if someone does this, might be me but just seems to make sense there would be a file height and a directory/folder height gap? Just thinking it might be nice to have 2x or 3x the file height gap to help see the separations between the files in one folder vs another?
00:00 Intro
00:14 Tab label format
01:08 Explorer sort files first
02:38 Compact folders
03:23 Material Icons #43a047
04:23 Tree indent
05:17 Extensions
07:21 Navigation
08:29 Svelte Discord
09:22 Outro
Thank you!
Just got into SvelteKit recently and you solved some problems for me. Earned my sub!
Great video. I'm learning SvelteKit from your practical videos. In this video you mentioned that you could not get used to the "Explorer: Files First" concept. I had the same until I discovered the "Explorer › File Nesting: Patterns".
The patterns that help me clean up the individual files that clutter the tree before the folders.
Item: package.json
Value:
playwright.config.ts, pnpm-lock.yaml, postcss.config.cjs, svelte.config.js, tailwind.config.cjs, tsconfig.json, vite.config.ts, .eslintignore, .eslintrc.cjs, .npmrc, .prettierignore, .prettierrc
Item: +layout*.svelte
Value: ${basename}*.ts
Item: +page*.svelte
Value: ${basename}*.ts
what does that do?
Watched a lot of your tutorials, they're great!
Much love for putting the effort in all of this, keep it up! :3
This is a valuable lesson, these shortcut / tricks make Sveltekit development easier and enjoyable, I particularly like No.1 and No.3 settings, very useful, practical and minimize the confusion, thank you so much 🙏
You’re very welcome!
Tip #1 === pure gold!
I agree - it's certainly a gamechanger!
Not only for svelte but this would be useful for any programmer. Thank you
Great content and video production, no BS and all pretty clear. Thanks
You’re welcome!
Great video! Loved the displaying of file path in the tabs.
A great video as always! Thanks for the tips!
Thank you, this is very helpful as beginner in sveltekit even though its my first time using svelte the settings made my vsc more productive
Thanks for videos on new and hyped topics so early :) I live how we can adapt VSCode tips for Nextjs13 aswell :) Thanks!
You’re very welcome!
This was an awesome video. Thanks so much for sharing these tricks!
Awesome, waiting for the next 10x tips
Great video, thanks for the tips!
Awesome tips! I am excited to use the SvelteKit snippets.
I make snippets for so many things now!
Thanks! helps me a lot ❤
Very useful stuff, many thanks.
Nice video, now I have to watch it
hello algorithm
Very nice video and tips - very helpful; I like them all!
I’m glad to hear that!
Great tips, thanks!
its really an beneficial video. and these are very rare tips. very few people give tips like him. Thank you man.
You're very welcome!
Great video!! Very helpful thanks!!
You’re welcome!
whoah.. that first tip, why did I not know about this before?! sooo helpful !!
It's a game changer especially when you don't have the explorer open!
@@Huntabyte absolutely! Really useful & several other tips adopted from this video, thank you 😊
Great video! Some of those tips apply to vs code in general, you could do a video on how to work more efficient with vs code in general.
Great suggestion!
Great video as always!
Thank you!
Great video thanks for the tips!
You're very welcome!
Really useful, thank you.
You’re very welcome!
Awesome ❤
Thank you! Cheers!
Thank you sir, this is awesome.
You're very welcome!
Great tips!!
love it 😍
I'm glad that you do!
Tnx for the tips , although I knew 7 from 10 but the 3 ones was very good
Glad to hear that!
Great video, Thank you
Thank you! You're very welcome!
THANKS! 💯💯
You're welcome!
Awesome video ! hopefully svelte will become more popular than react one day
It's possible but certainly a good amount of time away.
this is gold!!
Thank you!
tnx
You're welcome!
Thanks for the tips Huntabyte!
You're very welcome!
Thanks bud :)
You’re welcome!
I kinda like tip #2 as it puts all the files you rarely go into after project setup at the top and out of the way. I understand how you didn't like it, but I will also give it a try.
#3 - omg I hated that, thank you!
UPDATE - I coupled Tip #2 with a `Hide Files in Explorer` extension to get rid of the files I never open... and I don't think I can go back now. I opened Webstorm after making these changes to VS Code, and I was angry, lol. I just closed it and went back to VS Code, instead of configuring Webstorm.
I've also gone in and tweaked indent, line height, added padding to the top of the editor, setup the icons... I love VS Code now.
Thanks again for the video.
Would be great if you did a video on Error handling with hooks in SvelteKit. I've got a real problem at work concerning Error handling and if you'd consider it I would be very grateful. Ex. HandleClientError.
Thank you for the great and up-to-date series on Sveltekit
Error handling is big and important thing for everyone, so would also appreciate a video (series) on it ! :)
Great video 👌👌
Thank you!
*EDIT*
That feature is included with the File Utils extension
In the extensions section with those 3 installed the right click "Sveltekit files" is not listed for me. Is it possible this is included in another extension? thanks for the great video!
Oh really? I thought it was a part of the Svelte for VSCode extension.
I can't seem to find that SvelteKit File in my context menu
Found it in extension settings. Hope you include it on your next video to help noobs like me. Thanks
im with you on the second tip, looks alien to me ahaha. Maybe if was brand spankin new to vscode i might be able to deal with it
Facts! Couldn't get past that at all.
Most tip videos are not that good but this one had some really great tips that I applied to my setup immediately. Thank you!
Glad it was helpful!
very good
Thank you!
VS Code really needs to make a sort order for filesFirstExcludingRoot. I love the root folders up top but also love the files at the top of nested folders. Shame i can't have both :(
I agree!
I tried files first too, but it's much better to set hidesExplorerArrows to true. The arrows are ruining the whole thing visually.
Wow, almost every one of these so far is something that irks me but I assumed wasn't customizable lol
Glad to hear that!
Material Icons theme just reverts to not being installed oddly.
algo :)
Thank you :)
hmm, after seeing how the face behind the voice of 'daily dose of internet* looks, i am not surprised anymore how he looks.
But I'm using webstorm!!!! 😜
comment for the algo
Thank you!
Should be "how to 10X with VSCode in Sveltekit."
Yeah except the last one - so I guess it should be How to 10X with VSCode and Discord in SvelteKit eh?
Beside the last one this is all just about VS Code. I admit it's pretty commonly used but it's by far not the only one out there and thus framing the video in a general way "Improve DX for Svelte kit" is a bit clickbaity in my opinion. You should narrow it down to be more accurate by adding "in VS Code" or something.
If I hadn't included the last one then I would have added 'in VSCode' to the title. I did include it in the thumbnail though as I realize most are relating to VSCode. I know with the latest StackOverflow survey 75% of developers prefer VSCode, and I'd be willing to bet that >90% of web developers prefer it.
great tips, thank you!
You're welcome!