Тёмный
No video :(

10X Your SvelteKit Developer Experience in VSCode 

Huntabyte
Подписаться 24 тыс.
Просмотров 37 тыс.
50% 1

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

Опубликовано:

 

1 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 108   
@JoyofCodeDev
@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
@philippsteinke5694 Год назад
every comment got a heart but yours! :(
@jordancalhouncom
@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
@Huntabyte Год назад
@Phillip I hadn’t checked all the comments yet!
@Huntabyte
@Huntabyte Год назад
I completely agree! I wonder if possible via an extension of some sort? I’m sure a lot of people would benefit!
@dand4485
@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?
@SRG-Learn-Code
@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
@Huntabyte Год назад
Thank you!
@maskman4821
@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
@Huntabyte Год назад
You’re very welcome!
@asatorftw
@asatorftw Год назад
Just got into SvelteKit recently and you solved some problems for me. Earned my sub!
@dziugasbizokas5359
@dziugasbizokas5359 6 месяцев назад
Watched a lot of your tutorials, they're great! Much love for putting the effort in all of this, keep it up! :3
@balls991
@balls991 Год назад
Not only for svelte but this would be useful for any programmer. Thank you
@budivoogt491
@budivoogt491 10 месяцев назад
Great video! Loved the displaying of file path in the tabs.
@ravannaidoo2298
@ravannaidoo2298 Год назад
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
@hamburgerfatso Год назад
what does that do?
@AlexUnderCMYK
@AlexUnderCMYK Год назад
Great content and video production, no BS and all pretty clear. Thanks
@Huntabyte
@Huntabyte Год назад
You’re welcome!
@romer-dev
@romer-dev 5 месяцев назад
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
@itspaulinamac
@itspaulinamac Год назад
A great video as always! Thanks for the tips!
@iPankBMW
@iPankBMW Год назад
Thanks for videos on new and hyped topics so early :) I live how we can adapt VSCode tips for Nextjs13 aswell :) Thanks!
@Huntabyte
@Huntabyte Год назад
You’re very welcome!
@JamesQQuick
@JamesQQuick Год назад
This was an awesome video. Thanks so much for sharing these tricks!
@ScriptRaccoon
@ScriptRaccoon Год назад
Awesome tips! I am excited to use the SvelteKit snippets.
@Huntabyte
@Huntabyte Год назад
I make snippets for so many things now!
@gorandamchevski
@gorandamchevski Год назад
Great video, thanks for the tips!
@naranyala_dev
@naranyala_dev Год назад
Awesome, waiting for the next 10x tips
@everyhandletaken
@everyhandletaken Год назад
whoah.. that first tip, why did I not know about this before?! sooo helpful !!
@Huntabyte
@Huntabyte Год назад
It's a game changer especially when you don't have the explorer open!
@everyhandletaken
@everyhandletaken Год назад
@@Huntabyte absolutely! Really useful & several other tips adopted from this video, thank you 😊
@hnazmul
@hnazmul Год назад
its really an beneficial video. and these are very rare tips. very few people give tips like him. Thank you man.
@Huntabyte
@Huntabyte Год назад
You're very welcome!
@Noritoshi-r8m
@Noritoshi-r8m 11 месяцев назад
Very useful stuff, many thanks.
@bmehder
@bmehder Год назад
Tip #1 === pure gold!
@Huntabyte
@Huntabyte Год назад
I agree - it's certainly a gamechanger!
@cedigasser
@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
@Huntabyte Год назад
Great suggestion!
@andrew.derevo
@andrew.derevo Месяц назад
Thanks! helps me a lot ❤
@senseicodes
@senseicodes Год назад
Great video as always!
@Huntabyte
@Huntabyte Год назад
Thank you!
@BoukeGroenescheij
@BoukeGroenescheij Год назад
Very nice video and tips - very helpful; I like them all!
@Huntabyte
@Huntabyte Год назад
I’m glad to hear that!
@Jorge78712
@Jorge78712 Год назад
Great video!! Very helpful thanks!!
@Huntabyte
@Huntabyte Год назад
You’re welcome!
@garmendash3726
@garmendash3726 Год назад
Nice video, now I have to watch it
@stoobe
@stoobe 6 дней назад
Great tips, thanks!
@mannuelf
@mannuelf Год назад
Thank you sir, this is awesome.
@Huntabyte
@Huntabyte Год назад
You're very welcome!
@alittlegreyhair1104
@alittlegreyhair1104 Год назад
Really useful, thank you.
@Huntabyte
@Huntabyte Год назад
You’re very welcome!
@sefpai424
@sefpai424 Год назад
Great video thanks for the tips!
@Huntabyte
@Huntabyte Год назад
You're very welcome!
@0791679
@0791679 Год назад
Tnx for the tips , although I knew 7 from 10 but the 3 ones was very good
@Huntabyte
@Huntabyte Год назад
Glad to hear that!
@iteammy
@iteammy Год назад
Great video, Thank you
@Huntabyte
@Huntabyte Год назад
Thank you! You're very welcome!
@theIbraDev
@theIbraDev Год назад
Thanks for the tips Huntabyte!
@Huntabyte
@Huntabyte Год назад
You're very welcome!
@xeon7879
@xeon7879 Год назад
hello algorithm
@cory2300
@cory2300 Год назад
Great tips!!
@aanes1dev869
@aanes1dev869 Год назад
this is gold!!
@Huntabyte
@Huntabyte Год назад
Thank you!
@nijinnazar2160
@nijinnazar2160 Год назад
Awesome ❤
@Huntabyte
@Huntabyte Год назад
Thank you! Cheers!
@twd2
@twd2 Год назад
love it 😍
@Huntabyte
@Huntabyte Год назад
I'm glad that you do!
@forno_nicolas
@forno_nicolas Год назад
THANKS! 💯💯
@Huntabyte
@Huntabyte Год назад
You're welcome!
@mrgio369
@mrgio369 Год назад
Awesome video ! hopefully svelte will become more popular than react one day
@Huntabyte
@Huntabyte Год назад
It's possible but certainly a good amount of time away.
@it-s-me-mohit
@it-s-me-mohit Год назад
Great video 👌👌
@Huntabyte
@Huntabyte Год назад
Thank you!
@nazuu
@nazuu Год назад
Thanks bud :)
@Huntabyte
@Huntabyte Год назад
You’re welcome!
@bozidarbralic1937
@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
@YuGoCheff Год назад
Error handling is big and important thing for everyone, so would also appreciate a video (series) on it ! :)
@mcdba41
@mcdba41 Год назад
tnx
@Huntabyte
@Huntabyte Год назад
You're welcome!
@marlopainter8246
@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
@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.
@luminox1
@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
@Huntabyte Год назад
Facts! Couldn't get past that at all.
@jordancalhouncom
@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
@Huntabyte Год назад
Oh really? I thought it was a part of the Svelte for VSCode extension.
@frosty2912
@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
@Huntabyte Год назад
Glad it was helpful!
@babyfeavel71
@babyfeavel71 Год назад
very good
@Huntabyte
@Huntabyte Год назад
Thank you!
@nobodyshomeuk
@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
@Huntabyte Год назад
I agree!
@rubickthegrandmagus137
@rubickthegrandmagus137 Год назад
I can't seem to find that SvelteKit File in my context menu
@rubickthegrandmagus137
@rubickthegrandmagus137 Год назад
Found it in extension settings. Hope you include it on your next video to help noobs like me. Thanks
@szigyartom
@szigyartom 5 месяцев назад
I tried files first too, but it's much better to set hidesExplorerArrows to true. The arrows are ruining the whole thing visually.
@scott_itall8638
@scott_itall8638 Год назад
Material Icons theme just reverts to not being installed oddly.
@crowdozer3592
@crowdozer3592 Год назад
Wow, almost every one of these so far is something that irks me but I assumed wasn't customizable lol
@Huntabyte
@Huntabyte Год назад
Glad to hear that!
@ambig1
@ambig1 Год назад
hmm, after seeing how the face behind the voice of 'daily dose of internet* looks, i am not surprised anymore how he looks.
@christopherhornle4513
@christopherhornle4513 Год назад
algo :)
@Huntabyte
@Huntabyte Год назад
Thank you :)
@flogginga_dead_horse4022
@flogginga_dead_horse4022 Год назад
But I'm using webstorm!!!! 😜
@aramp
@aramp Год назад
comment for the algo
@Huntabyte
@Huntabyte Год назад
Thank you!
@JustBCWi
@JustBCWi Год назад
Should be "how to 10X with VSCode in Sveltekit."
@Huntabyte
@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
@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
@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.
@frederikclement7795
@frederikclement7795 Год назад
great tips, thank you!
@Huntabyte
@Huntabyte Год назад
You're welcome!
Далее
Build a Reactive Search Filter with Svelte
16:11
Просмотров 24 тыс.
Svelte 5's Secret Weapon: Classes + Context
18:14
Просмотров 14 тыс.
Meninas na academia
00:11
Просмотров 2,1 млн
IQ Level: 10000
00:10
Просмотров 8 млн
Protect SvelteKit Routes with Hooks
21:10
Просмотров 55 тыс.
The Svelte 5 Guide: Runes And Universal Reactivity
21:41
Svelte 5 is Bigger Than You Think
9:35
Просмотров 17 тыс.
I Tried Every Svelte UI Library
20:57
Просмотров 44 тыс.
SvelteKit is my mistress
4:19
Просмотров 416 тыс.
React VS Svelte...10 Examples
8:35
Просмотров 538 тыс.
2024 Supabase + Sveltekit Tutorial (0 to prod)
59:21
Practical Svelte 5 - Shopping Cart
25:10
Просмотров 12 тыс.