How to get started with VS Code

When we first get started with VS Code, it can feel a little overwhelming, so in this video I take a look at the basics, starting off with a fresh install of VS Code and I explore the very basics of opening folders vs. files, how the tabs work, and a few basic settings.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:32 - Visual Studio vs. Visual Studio Code
01:30 - Opening folders
03:25 - Tabs
05:00 - Auto save
05:50 - Mutiple panes
07:20 - Font sizes and other settings
10:00 - Themes
12:40 - Emmet
14:30 - Moving the sidebar
15:40 - Get Started with VS Code Walkthrough and the interactive playground

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[KevinPowell]

A few comments about VS Code no longer being supported on Mac. They are killing Visual Studio on Mac, not VS Code. Similar names, but very different, with Visual Studio primarily being used for .NET development.

[lawrencepsteele]

Nice! This sure beats TextPad, which was the editor in use at the office when I started my website work all those years ago. Even though I'm now retired, I think I might play around with this just for fun.

[penguinxed]

I appreciate every content you provide to us mr kevin, also i love your new podcast!

[RealityCheck]

Thx for the video. I changed my theme because of this video and it helped my work a lot.

[Rampage-Sama]

Thanks for this Kevin, I've been mentoring one of my friends and he's about to start working on his portfolio in the next coming months. I'll definitely share this video with him so and I'm sure there's a few things I'll learn myself 😅

[bikinglikebecker]

thx 4 uploading... I have learned to make a (somewhat professional looking) web page in a week.. with background, nav bar & a form..
I haven't done this in 30 years and back then I was just about to learn about banners & GIF links... I am at the next level now... Great Videos!

[theodorealenas]

I wish I was introduced to VSCode this way. I can't make such videos. This was beautiful.

What I really appreciate is that you didn't praise the tool, nor the user.
It was more of a reassuring guidance, that helps people relate.

Self promotion: I've made a Vim tutorial that's the opposite extreme.

[magoxxii]

I just noticed that you have four years' worth of videos, and I feel like I might be missing out on a lot. Even though I'm still a newbie, I'm somewhere between a beginner and intermediate level. I'd really appreciate it if you could provide a guide or a list of your older content that's still worth watching.

Thanks anyway, Kevin, for all the valuable content you've created over the years. Your contributions are greatly appreciated!

[alessandropini]

I have to point out one minor danger of multi-cursor mode.

You accidentally turn it on, possibly without even realizing, while you're a beginner.
Or you intentionally turn it on and forget to turn it off, because sometimes it happens when you use it *all the time* since it is a great feature.

You end up unintentionally editing in several spots at the same time, some of which are possibly off-screen.

Maybe you find out days later that something's off and you don't know why until you realize that the *same* wrong text/code got in several places around the file.

It just happened once to me, now I always double-check I turned it off after use. To be clear, I *love* this feature. It almost makes me forget Cygnus Editor on the Amiga.

[wilytohel]

Thanks again for the great content, Kevin! How about continuing the series with an introduction to Git?
I had no idea about the interactive editor playground so thanks for the tip. I will have to play around with that later.

[_ric]

Live Server, by Ritwick Dey, is an absolute must have. Free to use, easy to install and easy to configure.

[ElementoryMyDearWatson]

The other feature of the mini map I love is that it will flag any code errors it detects and puts the section in qquestion in the map in red so you can immediately scroll to and debug. Has saved me so many hours of trying to figure out why something isn't working in a very long code sheet.

[jarrodurban]

Great video. I am going to use this video when onboarding new people to VS Code.

Any chance you have another video in the same style, go learn the basics of Git? Maybe, another Tuesday video idea.

[KrausBean]

The info about italic file names at the 4:00 min mark is a bit incorrect. When the name is italic it means it is in something like a quick view mode and it will not be kept open when another file is selected. To keep a file open you don't need to go making edits or having to add weird spaces and things. You just double click the file in the file list to the left and it will open and remain open ready for work. This is how you can click all of your needed files right away to have them ready to work.

[codebite]

I already know all of these features of vs code, i came here just to see how you setup your style file 😂, i pause it and stare at it 😅, cause I know kevin always use best practices.

[Element_Finland]

Personally would recommend VSCodium uness you have a specific reason you need one of the closed-source Microsoft components. It's a stripped fully open source version with no Micro$oft telemetry.

[mahadevovnl]

First thing I always do: Workbench › Tree: Indent - change to 16 instead of whatever the tiny default is. Now your files in folders are clearly indented.

[j-janz]

12:58 I, too, prefer my sidebar on the right, also using an extension (add-ons that I try to keep to a minimum) to auto-close it when unfocused/unneeded: Auto Hide *, from sirmspencer. And, to unclutter more, I also went full minimap **, which I loved from the beginning and set to 98 width (optimized by my tests to the maximum ideal indenting code should get), and got rid of scrollbar ** altogether by making it hidden.

These focus on content and free up space and from extra clicks, all with no content jumping sideways. I only wish sidebar autohide settings were from vscode already.

* w/Extension Settings > Auto Hide: Side Bar Delay set to 450;
** Respectively, these are on Settings / "Editor > Minimap: Max Column" and "Editor > Scrollbar: Vertical".

[Dexterx]

Do you recommend using Autosave on the file menu?

[victorjr]

Hi Kevin 👋👋
I just wanna ask if you use Webflow or once did.
Is it worth learning as well?