10X Your SvelteKit Developer Experience in VSCode

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:
Material Icon Folder Color: 43A047
Extensions:

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

[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.

[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

[coderwolfie]

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

[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

[maskman]

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 🙏

[asatorftw]

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

[JamesQQuick]

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

[dziugasbizokas]

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

[AlexUnderCMYK]

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

[ScriptRaccoon]

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

[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 <3

[budivoogt]

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

[everyhandletaken]

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

[iPankBMW]

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

[hnazmul]

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

[naranyala_dev]

Awesome, waiting for the next 10x tips

[itspaulinamac]

A great video as always! Thanks for the 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.

[Mrg-zq]

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

[marlopainter]

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!