How to get started with VS Code

Рет қаралды 36,692

Күн бұрын

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
✅ VS Code Extensions that I can’t live without: • VS Code extensions tha...
✅ VS Code Shortcuts that I use all the time: • Unlock VS Code Efficie...
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZfaq channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 64

@KevinPowell 9 ай бұрын

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.

@magoxxii 9 ай бұрын

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!

@lawrencepsteele 9 ай бұрын

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 9 ай бұрын

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

@_ric 9 ай бұрын

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

@goodshiro10 9 ай бұрын

Live server + Auto save = unstoppable

@theodorealenas3171 9 ай бұрын

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.

@13falseidentity 9 ай бұрын

Yesterday I had to install VS Code to try to fix some code on web page and I'm absolute beginner :) This video was so helpful so keep them coming :) Thanks Kevin 🍺🍺🍺

@theodorealenas3171 9 ай бұрын

I've been into Vim the past few years and only now I realize what I've paid with. This comment is so soothing. I almost want to go back to those simple times. But I'm a bit confused, how come there's a page you can fix but you didn't have VSCode already?

@Rampage-Sama 9 ай бұрын

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 😅

@RealityCheck6969 7 ай бұрын

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

@bikinglikebecker 9 ай бұрын

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!

@ElementoryMyDearWatson 5 ай бұрын

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.

@julianvelez6563 9 ай бұрын

Nice work ❤

@wilytohel 9 ай бұрын

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.

@Element_Finland 9 ай бұрын

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.

@jarrodurban6927 9 ай бұрын

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.

@alessandropini9308 9 ай бұрын

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.

@007KrausBean 9 ай бұрын

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.

@KevinPowell 9 ай бұрын

Thanks for the clarification on that one!

@SmetadAnarkist 9 ай бұрын

VIM FTW!

@codebite590 9 ай бұрын

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.

@explorer8279 7 ай бұрын

Lovely videos

@j-janz 9 ай бұрын

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

@theodorealenas3171 9 ай бұрын

I like this topic.There's a logical conclusion to this path, and it looks extreme the first time you see it. It's like maximalism is a pet on the back, while minimalism comes from comfort with the tool. And an in-between helps people connect.

@theodorealenas3171 9 ай бұрын

Ok sorry I should go to bed.

@j-janz 9 ай бұрын

@@theodorealenas3171 Interesting train of thought. It seems there's more to be explored the than just that but, considering quality of thoughts in proportion to bed time approaching, that was fine. 😅 Well, good night to you. =)

@mahadevovnl 9 ай бұрын

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.

@0xtz_ 9 ай бұрын

Niiice

@Dexter101x 9 ай бұрын

Do you recommend using Autosave on the file menu?

@victorjr969 9 ай бұрын

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

@alessandropini9308 9 ай бұрын

May i suggest toggling screencast mode for the next videos?

@loopeeloops 4 ай бұрын

Can't find "redefine your editing skills" in Learn the Fundamentals - mentioned at the end of the video. Has it been taken off?

@dankierson 9 ай бұрын

Good walkthrough. But I feel Sublime Text is better. It's browser based so it never jams on rapid fire use like VSC does. It's effectively free, has a good community, a good library of ST specific extensions, an instant switch project function, integrated Git functions and a simple means of writing your own extensions in Python. Why, Mistah Powell, *you* used to use it and sing its praises once. 😅

@cryptokingdom617 8 ай бұрын

Hi there! I'm just to learn coding within HTML and CSS, pictures in CSS I am struggling with.

@s3ig3playz77 6 ай бұрын

um this is irrelevant but just wanted to say great video and you look like King Chris

@LordUzumaki 9 ай бұрын

Hey Kevin , I use display flex a lot, all most for everything is it a bad practice ? Does it have some performance issues or something like that??? Please reply.

@benzflynn 9 ай бұрын

Your comment/question is off this video's topic. But briefly, yes, using _display: flex;_ for *everything* is bad practice as _grid_ and _block_ display modes have been devised for common use-cases. Refer to KP videos on block, grid and flex for best selection criteria.

@LordUzumaki 9 ай бұрын

@@benzflynn thanks ! I asked this question here because this was his latest video.

@VolodymyrInTech 9 ай бұрын

💛💙💛💙👍👍👍Good video

@favourgold7212 9 ай бұрын

Please do you mind sharing your prettier formatter settings? I don't know why mine keeps adding " />" to my html file tags that doesn't require it like the meta and link tags inside of a head tag and it's driving me nuts 🥺

@theodorealenas3171 9 ай бұрын

I hate polppy stuff with a passion.

@yolocat-dev 9 ай бұрын

tags that has no content *should* end in “/>”, using “>” works but isn’t recommended

@favourgold7212 9 ай бұрын

@@yolocat-dev Ohk Now my vs code doesn't bring up the autocomplete or suggestions for me anymore Both HTML and CSS

@cbbcbb6803 8 ай бұрын

Extensions should be nestable in vscode and vscodium.

@tompkka 23 күн бұрын

Nice you to skip to make actual file, im just starting to use this program

@gelbehexe2010 9 ай бұрын

Possibly not a good time to start with vscode if you owe a Mac. Maybe a time to change to an alternative.

@kacperkonieczny7333 9 ай бұрын

Only Visual Studio and not VS Code

@gelbehexe2010 9 ай бұрын

@@kacperkonieczny7333 Okay, thanks for the information. Hoping that this is not the beginning of the end!

@KevinPowell 9 ай бұрын

They are stopping Visual Studio, not VS Code

@cekuhnen 9 ай бұрын

Sadly VS code is dead now for macOS

@JansGuitarJourney 9 ай бұрын

VS Code is not dead for macOS, it is Visual Studio that will be discontinued.

@VaibhavPareek 9 ай бұрын

Bro I love your content please come back

@Noam-Bahar 9 ай бұрын

@@JansGuitarJourneyMicrosoft logic anyway 🤠

@KevinPowell 9 ай бұрын

VS Code is alive and well, its Visual Studio that they are pulling the plug on, since it's primarily for .NET anyway

@cekuhnen 9 ай бұрын

FACE PALM to myself ;)

@Thekidisalright 9 ай бұрын

Can someone tell me why every time I use VScode it asks me to “Sign in to sync Setting”? I don’t usually close the program I just close my laptop and continue the next day but almost everyday it ask me to do the same thing, I tried to Google with no avail :(

@andrews8733 9 ай бұрын

If you have multiple installations on multiple machines, many editors allow you to synchronize your settings/configuration. Login would allow for this. I would just sign in, or look into disabling synchronization.