10X Your SvelteKit Developer Experience in VSCode

[@JoyofCodeDev]

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.

[@philippsteinke5694]

every comment got a heart but yours! :(

[@jordancalhouncom]

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

[@Huntabyte]

@Phillip I hadn’t checked all the comments yet!

[@Huntabyte]

I completely agree! I wonder if possible via an extension of some sort? I’m sure a lot of people would benefit!

[@dand4485]

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?

[@coderwolfie2201]

wow you made vs code better. I never knew these settings existed or that I needed them.

[@SRG-Learn-Code]

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

[@Huntabyte]

Thank you!

[@ra-v-y]

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

[@hamburgerfatso]

what does that do?

[@asatorftw]

Just got into SvelteKit recently and you solved some problems for me. Earned my sub!

[@maskman4821]

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 🙏

[@Huntabyte]

You’re very welcome!

[@romer-dev]

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

[@dziugasbizokas5359]

Watched a lot of your tutorials, they're great! Much love for putting the effort in all of this, keep it up! :3

[@budivoogt491]

Great video! Loved the displaying of file path in the tabs.

[@JamesQQuick]

This was an awesome video. Thanks so much for sharing these tricks!

[@everyhandletaken]

whoah.. that first tip, why did I not know about this before?! sooo helpful !!

[@Huntabyte]

It's a game changer especially when you don't have the explorer open!

[@everyhandletaken]

@@Huntabyte absolutely! Really useful & several other tips adopted from this video, thank you 😊

[@andrew.derevo]

Thanks! helps me a lot ❤

[@AlexUnderCMYK]

Great content and video production, no BS and all pretty clear. Thanks

[@Huntabyte]

You’re welcome!

[@bmehder]

Tip #1 === pure gold!

[@Huntabyte]

I agree - it's certainly a gamechanger!

[@ScriptRaccoon]

Awesome tips! I am excited to use the SvelteKit snippets.

[@Huntabyte]

I make snippets for so many things now!

[@hnazmul]

its really an beneficial video. and these are very rare tips. very few people give tips like him. Thank you man.

[@Huntabyte]

You're very welcome!

[@iPankBMW]

Thanks for videos on new and hyped topics so early :) I live how we can adapt VSCode tips for Nextjs13 aswell :) Thanks!

[@Huntabyte]

You’re very welcome!

[@marlopainter8246]

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!

[@marlopainter8246]

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.

[@naranyala_dev]

Awesome, waiting for the next 10x tips

[@cedigasser]

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.

[@Huntabyte]

Great suggestion!

[@0791679]

Tnx for the tips , although I knew 7 from 10 but the 3 ones was very good

[@Huntabyte]

Glad to hear that!

[@Mrg-z3q]

Awesome video ! hopefully svelte will become more popular than react one day

[@Huntabyte]

It's possible but certainly a good amount of time away.

[@szigyartom]

I tried files first too, but it's much better to set hidesExplorerArrows to true. The arrows are ruining the whole thing visually.

[@BoukeGroenescheij]

Very nice video and tips - very helpful; I like them all!

[@Huntabyte]

I’m glad to hear that!

[@rossvold]

Thanks for the tips Huntabyte!

[@Huntabyte]

You're very welcome!

[@itspaulinamac]

A great video as always! Thanks for the tips!

[@gorandamchevski]

Great video, thanks for the tips!

[@jordancalhouncom]

*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!

[@Huntabyte]

Oh really? I thought it was a part of the Svelte for VSCode extension.

[@Noritoshi-r8m]

Very useful stuff, many thanks.

[@frederikclement7795]

great tips, thank you!

[@Huntabyte]

You're welcome!

[@garmendash3726]

Nice video, now I have to watch it

[@Jorge78712]

Great video!! Very helpful thanks!!

[@Huntabyte]

You’re welcome!

[@rubickthegrandmagus137]

I can't seem to find that SvelteKit File in my context menu

[@rubickthegrandmagus137]

Found it in extension settings. Hope you include it on your next video to help noobs like me. Thanks

[@mannuelf]

Thank you sir, this is awesome.

[@Huntabyte]

You're very welcome!

[@bozidarbralic1937]

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

[@YuGoCheff]

Error handling is big and important thing for everyone, so would also appreciate a video (series) on it ! :)

[@frosty2912]

Most tip videos are not that good but this one had some really great tips that I applied to my setup immediately. Thank you!

[@Huntabyte]

Glad it was helpful!

[@senseicodes]

Great video as always!

[@Huntabyte]

Thank you!

[@luminox1]

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

[@Huntabyte]

Facts! Couldn't get past that at all.

[@it-s-me-mohit]

Great video 👌👌

[@Huntabyte]

Thank you!

[@iteammy]

Great video, Thank you

[@Huntabyte]

Thank you! You're very welcome!

[@alittlegreyhair1104]

Really useful, thank you.

[@Huntabyte]

You’re very welcome!

[@nobodyshomeuk]

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 :(

[@Huntabyte]

I agree!

[@xeon7879]

hello algorithm

[@twd2]

love it 😍

[@Huntabyte]

I'm glad that you do!

[@nijinnazar2160]

Awesome ❤

[@Huntabyte]

Thank you! Cheers!

[@nazuu]

Thanks bud :)

[@Huntabyte]

You’re welcome!

[@babyfeavel71]

very good

[@Huntabyte]

Thank you!

[@cory2300]

Great tips!!

[@aanes1dev869]

this is gold!!

[@Huntabyte]

Thank you!

[@mcdba41]

tnx

[@Huntabyte]

You're welcome!

[@crowdozer]

Wow, almost every one of these so far is something that irks me but I assumed wasn't customizable lol

[@Huntabyte]

Glad to hear that!

[@scott_itall8638]

Material Icons theme just reverts to not being installed oddly.

[@ambig1]

hmm, after seeing how the face behind the voice of 'daily dose of internet* looks, i am not surprised anymore how he looks.

[@flogginga_dead_horse4022]

But I'm using webstorm!!!! 😜

[@christopherhornle4513]

algo :)

[@Huntabyte]

Thank you :)

[@aramp]

comment for the algo

[@Huntabyte]

Thank you!

[@JustBCWi]

Should be "how to 10X with VSCode in Sveltekit."

[@Huntabyte]

Yeah except the last one - so I guess it should be How to 10X with VSCode and Discord in SvelteKit eh?

[@j.m.manhard]

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.

[@Huntabyte]

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.

[@stoobe]

Great tips, thanks!

[@sefpai424]

Great video thanks for the tips!

[@Huntabyte]

You're very welcome!