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.
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
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
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
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 🙏
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.
*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!
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
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 :(
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.
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!
wow you made vs code better. I never knew these settings existed or that I needed them.
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?
Just got into SvelteKit recently and you solved some problems for me. Earned my sub!
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!
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 😊
This was an awesome video. Thanks so much for sharing these tricks!
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.
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! helps me a lot ❤
Awesome tips! I am excited to use the SvelteKit snippets.
I make snippets for so many things now!
Tip #1 === pure gold!
I agree - it's certainly a gamechanger!
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!
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!
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 tips, thank you!
You're welcome!
Thank you sir, this is awesome.
You're very welcome!
Thanks for the tips Huntabyte!
You're very welcome!
Tnx for the tips , although I knew 7 from 10 but the 3 ones was very good
Glad to hear that!
I tried files first too, but it's much better to set hidesExplorerArrows to true. The arrows are ruining the whole thing visually.
Great video, thanks for the tips!
Awesome, waiting for the next 10x tips
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 useful stuff, many thanks.
Great video as always!
Thank you!
Very nice video and tips - very helpful; I like them all!
I’m glad to hear that!
Awesome video ! hopefully svelte will become more popular than react one day
It's possible but certainly a good amount of time away.
Great video!! Very helpful thanks!!
You’re welcome!
A great video as always! Thanks for the tips!
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.
Nice video, now I have to watch it
Great video, Thank you
Thank you! You're very welcome!
Really useful, thank you.
You’re very welcome!
*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
love it 😍
I'm glad that you do!
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!
Awesome ❤
Thank you! Cheers!
Thanks bud :)
You’re welcome!
hello algorithm
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.
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!
tnx
You're welcome!
this is gold!!
Thank you!
very good
Thank you!
Great tips!!
Material Icons theme just reverts to not being installed oddly.
Wow, almost every one of these so far is something that irks me but I assumed wasn't customizable lol
Glad to hear that!
algo :)
Thank you :)
But I'm using webstorm!!!! 😜
hmm, after seeing how the face behind the voice of 'daily dose of internet* looks, i am not surprised anymore how he looks.
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, thanks!
Great video thanks for the tips!
You're very welcome!