How to get started with VS Code

Подписаться 908 тыс.

Просмотров 30 тыс.

50% 1

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 RU-vid 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!

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

18 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 63

@KevinPowell 8 месяцев назад

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.

@_ric 8 месяцев назад

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

@goodshiro10 8 месяцев назад

Live server + Auto save = unstoppable

@penguinxed 8 месяцев назад

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

@julianvelez6563 8 месяцев назад

Nice work ❤

@RealityCheck6969 6 месяцев назад

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

@Rampage-Sama 8 месяцев назад

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 😅

@lawrencepsteele 8 месяцев назад

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.

@magoxxii 7 месяцев назад

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!

@wilytohel 8 месяцев назад

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.

@007KrausBean 8 месяцев назад

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 8 месяцев назад

Thanks for the clarification on that one!

@theodorealenas3171 8 месяцев назад

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 8 месяцев назад

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 8 месяцев назад

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?

@SmetadAnarkist 8 месяцев назад

VIM FTW!

@bikinglikebecker 7 месяцев назад

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!

@Element_Finland 8 месяцев назад

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.

@ElementoryMyDearWatson 3 месяца назад

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.

@jarrodurban6927 8 месяцев назад

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.

@codebite590 8 месяцев назад

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.

@alessandropini9308 8 месяцев назад

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.

@explorer8279 5 месяцев назад

Lovely videos

@mahadevovnl 8 месяцев назад

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 8 месяцев назад

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 8 месяцев назад

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 8 месяцев назад

Ok sorry I should go to bed.

@j-janz 8 месяцев назад

@@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. =)

@victorjr969 8 месяцев назад

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

@Dexter101x 8 месяцев назад

Do you recommend using Autosave on the file menu?

@0xtz_ 8 месяцев назад

Niiice

@alessandropini9308 8 месяцев назад

May i suggest toggling screencast mode for the next videos?

@VolodymyrInTech 8 месяцев назад

💛💙💛💙👍👍👍Good video

@dankierson 8 месяцев назад

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

@LordUzumaki 8 месяцев назад

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 8 месяцев назад

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 8 месяцев назад

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

@loopeeloops 3 месяца назад

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

@favourgold7212 8 месяцев назад

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 8 месяцев назад

I hate polppy stuff with a passion.

@yolocat-dev 8 месяцев назад

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

@favourgold7212 7 месяцев назад

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

@cryptokingdom617 7 месяцев назад

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

@s3ig3playz77 5 месяцев назад

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

@cbbcbb6803 6 месяцев назад

Extensions should be nestable in vscode and vscodium.

@gelbehexe2010 8 месяцев назад

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

@kacperkonieczny7333 8 месяцев назад

Only Visual Studio and not VS Code

@gelbehexe2010 8 месяцев назад

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

@KevinPowell 8 месяцев назад

They are stopping Visual Studio, not VS Code

@cekuhnen 8 месяцев назад

Sadly VS code is dead now for macOS

@JansGuitarJourney 8 месяцев назад

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

@VaibhavPareek 8 месяцев назад

Bro I love your content please come back

@Noam-Bahar 8 месяцев назад

@@JansGuitarJourneyMicrosoft logic anyway 🤠

@KevinPowell 8 месяцев назад

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

@cekuhnen 8 месяцев назад

FACE PALM to myself ;)

@Thekidisalright 8 месяцев назад

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 8 месяцев назад

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.