Transcript
Use with ChatGPT / Claude Auto-scroll A
The video introduces the goal of getting beginners up and running in VS Code, then briefly covers the sponsor keyboard before moving into installation and opening a project folder.
This is the video for you if you're new to the industry and someone told you, "Oh yeah, just download VS Code, get started."But you downloaded it and you're like, "Okay, now what?"I think a quick guide on how to get up and running would be helpful.So in this video, I'll show you how close you are to using the free agentic AI tools built into VS Code.I'll show you the keyboard shortcuts I can't live without.I'll show you how to customize VS Code to your liking.That includes maybe getting rid of some of the clutter on the screen.That includes choosing a new color theme, downloading custom color themes, maybe choosing icon themes, using custom fonts and ligatures, and then also how to use some of VS Code's most powerful text editing and manipulation features, some of itscustom layout options and more.
So yeah, if you're looking for a quick intro to get you actually up and running in VS Code, I've got you covered with this video.But first, a quick word from today's sponsor.Well, I shouldn't say sponsor.I was not paid to make this video, but I do want to thank Epomaker for sending me their new GE84 HEC keyboard for the purpose of reviewing it.This is the keyboard you'll hear me clocking away at in this video.I've been using it the past week and I'm really enjoying it.It feels good, it sounds good.I like that it has a built-in Mac and Windows switch.I like that it has wired mode, Bluetooth mode, wireless USB dongle mode.And I like that when you're not using that USB receiver, you won't lose it because you can keep it tucked inside the keyboard itself under the left foot.
This is my first time using a Hall effect keyboard.It feels like a traditional mechanical keyboard, but I would describe it as not having any scratchiness at all as you press the key down.It feels very smooth and clean and immediate, if that makes sense.The sound has no ping to it.I'm really enjoying it.I'm probably not taking full advantage of the Hall effect in terms of gaming and rapid caps and all that, but I can say that just as someone who types on a keyboard all day for work, this is areally enjoyable experience.If you're interested in checking it out, there are links in the description.That's enough about keyboards.Let's get to VS Code.
Shows how to open a folder, enable the free GitHub Copilot tier, and use the AI agent mode to generate and test a simple math game. The section ends by emphasizing that the free AI tools are worth trying.
So, from the official VS Code website, which is code.visualstudio.com, if you don't already have it installed, you can visit this.It's completely free to download for Windows, Mac, and Linux.If you want to pause the video to get it installed, that's great.But from this point forward, I'm going to assume that you have it installed.Now, when you open it for the first time, it might look something like this.However, uh this isn't that useful because usually we don't just want to open VS Code on its own.We want to open up a folder or a project, right?In other words, when you open up VS Code for the first time, it's not really attached to a folder or a project on your computer.So, I have this completely empty.Don't worry, there's nothing in there.We can start from scratch together.But just create like a brand-new folder on your desktop, and then you can literally just drag and drop that folder on top of VS Code, or in VS Code, you can use the file, but instead of open, look
for like open folder or open directory.Cool.So, off camera, I just dragged and dropped my brand-new project folder onto VS Code, and now you'll notice that over in the sidebar, this is going to show us the different files and folders that live in that folder.Our folder is completely empty, so we don't see anything, but you can use these icons to create a new file or a new folder.You can also just right-click on the empty area, which is what I usually do, and choose, you know, new file or new folder.However, to get a few files running, why don't we check out the newest AI features in VS Code?Now, in the past, I was slow or late to adopt these AI features, and that's because in the past, uh there was no ongoing free tier, which I'm a big fan of, but now there is.
So, it's not a tier that expires after the first 30 days.You don't even need to enter a credit card or anything.VS Code has fully integrated GitHub Copilot AI features for free forever.Now, you are limited, right?Uh you get 2,000 completions or 50 agent motor chat requests, but for free, I really like those limits.So, at this point in time, I can't recommend this strongly enough.Uh please go ahead and sign up for a completely free github.com account, and then in VS Code, uh this icon right up here, this opens up the sidebar, the AI area.You won't see this right away because you're not logged in, but there should be really easy to follow instructions to get logged in.So, all you'll need is a github.com account, if you don't already have one, and then you can get logged in.You will need to accept or choose the completely free plan of GitHub Copilot, but once you get that enabled, you're good to go.
So, if you want to pause the video and spend it, it'll only take you maybe 1 or 2 minutes to get that set up.Uh but then, you'll see this AI agent area.Let me expand this so I can show you something.Now, what's really important here is that you can choose between different modes.This area where my mouse is down here, you can choose between agent, plan, ask, or edit.So, if you just have a question about your code base, you can use ask, but if you're willing to let the AI modify and create files for you, I'm a huge fan.I've been having great luck and great experiences using the agent mode.So, check this out.You can go ahead and close the welcome screen.You can uncheck this tab where it says show welcome page on startup.You can close that welcome tab.
And let's just write an agent prompt.Let's say, "Please create an index.html file that has a JavaScript-powered uh math game.Have it ask the user basic arithmetic questions, and once you have answered uh five questions correctly, you win the mini game and can start over.Include the necessary JavaScript in a separate file called Let's call it like uh game.js and include the necessary styling in a file named We'll call it like styles.css.Let's go ahead and press enter.I'll fast-forward through this boring part, but the AI agent says, "Cool, yeah, I'll create a game for you."And it's working.Cool.So, it looks like my agent finished.Now, before I choose to keep or undo the code it gave me, I would go test the game in my browser.I would say the easiest way to do that is in the sidebar, just right-click on index.html and choose reveal in finder or reveal in any file explorer.
That'll show you the file, and then just drag and drop that on top of your web browser.Okay, here you have it.Curious if it actually works.Let's click start game.Let's just try to beat it really quick.So, 18 what?15 uh 14 one three.Congratulations, you win.Cool, you can click play again.Now, this is not a video about AI features.I just wanted to include that in the beginning because I want to strongly encourage you to give it a chance.I was late to the AI game, but I've been having great luck with the agent mode, and you actually can do a lot just with the completely free tier.I think it's definitely worth using in your workflow considering you can use it completely for free.
Covers useful shortcuts like quick file search and the command palette, then walks through hiding clutter, changing editor settings, adjusting font size, and selecting a built-in color theme.
Anyways, at this point, let's get back to VS Code itself.So, these tabs up here, these are your open editors.We can close those.Before we do, let me keep So, I'll click keep on those AI agent additions.Cool, but then you can close your open tabs up here.And just to let you know how to customize VS Code, I'm not a big fan of the extra clutter in this left-hand menu.So, you can see like if I click on or double-click on index.html or if I want to jump into my style sheet, it shows my open editors here.I don't get much value at all out of this open editors area because I already have my tabs up here.So, you can just right-click on open editors.You don't need to do this, but I just uncheck that.So, it's less clutter over my sidebar.
Now, I encourage you to on your own time if you want to explore outline and timeline, but I can let you know you can just right-click on those.It's falling off my screen recording, but you can uncheck those if you wanted to hide those as well.Cool.Now, instead of clicking on these files that you're interested in, I want to show you a great keyboard shortcut.If you press command P or on Windows control P, you can just start typing for whatever file you're interested in or without even typing, you know, you could use your arrow keys.But like if I even just start to type, you know, the start of that file, you press enter, you get the idea.Now, if you're anything like me, sometimes you want to focus just on the actual file and the code.So, I want to show you really quick how to sort of toggle or collapse some of these extra areas on the screen.
So, to toggle the AI agent area, you can use this icon right about here to toggle that.But I always like to know the keyboard shortcut to do something.And even when I hover over that, it just says toggle chat.It doesn't show me the keyboard shortcut.So, right now I want to show you a really nice way to where you don't have to memorize keyboard shortcuts right away, and you can actually learn them at your own pace.It's called the command palette.So, press control shift P on Windows or command shift P on Mac.And now this is the command palette, and it can be used to do anything in VS Code.If I search for like toggle chat, yes.So, it'll show you the keyboard shortcut for that action.So, I could just press enter to perform that action, but I like to look here for the keyboard shortcut.
So, yours will be different on Windows or Mac.Uh Uh, but on Mac it looks like it's what?Control command I.So, let me try that.Control command I.Yep, I can toggle that.Uh, I can let you know that you can toggle the sidebar with control or command B.I can let you know you can toggle your terminal with control or command J.I really like that because it also places your cursor active right there.So, while you're coding, you want to jump to the terminal, it's just control or command J.Control or command J to get right back to your code.You don't even need to touch your mouse.So, that's how I recommend learning keyboard shortcuts.Uh, if you just open up your command palette, which again is control shift or command shift P.And then just search for anything you would be looking for.
And towards the right-hand side, you'll see the keyboard shortcut.At this point, let's talk about how to customize your VS code a little bit.So, for example, I don't like this mini map area that shows kind of your file at a glance, like a super zoomed out glance.Maybe you like that feature, but if you don't like it, you can just right-click on it and unchoose or uncheck mini map.Cool.Next up, I don't like this area that I'm highlighting.It's called the breadcrumbs area.But, you'll notice I can't just right-click on it to maybe disable that feature.So, right now I want to introduce you to your settings.json file.There are so many ways to get to it.You could press control or command comma.You can go into settings.But, let's just use our command palette.So, control or command P.Type in what?
settings.json.And now, don't open the first one.We don't want open default.We want open user settings.There should only be a line or two in it like this.Another way to get to that is if you press control or command comma, that opens up the GUI for settings.And then you can click this icon right about here to open up your user settings.But, in this settings.json file, you could do just about anything you want.So, I'll add a new line.And if I just start to type in breadcrumbs, it's going to give me some great suggestions.So, I'll say like breadcrumbs enabled.Put that to false.As soon as I hit save, watch this area.Perfect.You don't need to do that.I'm just letting you know that this file is how you can really begin to customize your VS Code.Like for example, I usually like to bump up my font size a bit.
So, if I just search for what?Not chat.font size, but what?editor.font size.Let me bump that up a good bit.Well, maybe not that much, but you get the idea.Speaking of customizations, let me show you how you can choose a different color theme.Use your command palette, right?Control Shift P.Search for theme.Looks like this second option, Preferences: Color Theme.So, press Enter on that.And then it's going to give you this cool option.You can use the arrow keys on your keyboard to go through all of the different options.These are the default themes that are pre-installed.So, you don't need to go install anything.They're just ready and waiting for you to pick one.When you see one you like, just press Enter and that will save it.
Explains how to install custom themes and icon packs, change fonts and ligatures, and use built-in editing helpers like Emmet, multi-cursor selection, Markdown preview, split panes, and format-on-save.
So, now if you went back into your settings.json file, you can see, yep, it added my color theme.Cool.Let me get my left-hand sidebar back, so that's Control or Command B.And right now, let me show you how you could get a different color theme that isn't included in those pre-installed ones.To go download a custom color theme, we're going to use extensions.So, down here in this far left menu, by default we're in the Explorer area.If you click on this one though, down here, that is the Extensions area.So, let's search for one.Now, there are so many cool themes to choose from, but there's one called What is it?Capp It's a play on the word cappuccino.I always spell it wrong.Yes, this one.So, it's Cappucin for VS Code.You know it's the right one.As of today, it has almost a million installations, but you just click on that once, and then in this main area, I'll click Install.
Because this is the first extension I'm installing from that author of this extension, it's going to ask me, Do I trust them?So, I guess anytime you're installing an extension, there is a tiny bit of a trust factor or risk, but I do trust the authors of this theme, so I'll click trust publisher and install.Cool.And then it's going to let me choose between the different variations of that theme.So again, you can use your arrow keys, but I'll just use the first one.What was it?Frappe.Cool.Let me close those down.Let me go back to File Explorer.You can also customize the different icons that you see right about here.Uh so like, you know, that's the icon for a JavaScript file or HTML or CSS file.So if I click extensions and search for just that word Catppuccin again, you can see there's a icon set for VS Code.
It has 400,000 installations.Let me install that.When you install it, it should Yes, it's going to ask you to choose like which version you want.I'll choose the matching Frappe.Press enter.And now if I go back, you can see I have to my File Explorer, I have different icons for those file types.Or if you're anything like me, I actually prefer to just not have sometimes any file icon types right here.So if you go into your settings, control or command P, search for settings.json, the user settings.json, where it says icon theme, you could also just set that to a value of null.And if I hit save, now I don't have any icons.Sometimes that's actually nice for a distraction-free environment.Let's have one more customization detail and then we'll get to other features.But what if you want to change your font that gets used in your code editor area?
So for example, there's a really popular free font JetBrains Mono.So what if you had that downloaded on your computer and you wanted to use that in your code area?In your settings.json file, we've already covered how to get there like five times.Uh so you would just have a new line.And if you search for like, what is it?editor Excuse me.Editor.fontFamily, uh then just quotes.And what's great is it's Mine at least is looking on my system, so it knows which fonts I have.You would choose JetBrains Mono.So you can hit save.Cool.It uses that font.But this font has all sorts of advanced ligatures, extra symbols.So, by default, VS Code isn't going to use them though.Like, if we go into game.js, and if you search for this symbol, so command or control F, you know, the arrow symbol equals greater than, see how those are not squished together?
I actually prefer them to not be squished together, but some developers like custom ligatures.But, in settings.json, if you have a new line, and if you just start to type in what is it?Yes, editor.fontLigatures, set that to true, hit save.If I go back into my JS file, notice now the equals greater than is this completely custom symbol.Some developers love that.I'm not a big fan of that, so I usually don't include that, or I set it to false, but you get the idea.Cool.At this point, let's jump into our HTML file, and I just want to let you know that right out of the gate, without having to install any extensions or plugins or settings, VS Code has Emmet tab triggers alreadyto go.So, like in your HTML, like if I want a div, I just hit div, hit tab on my keyboard, it's going to automatically create the opening and closing.
Or, like if I wanted a div with a class of banner, I just hit div.banner, hit tab.Cool.Or, if I wanted, like a div that has, or let's say like a nav element that had an unordered list nested inside it, with inside there I wanted like, what?Five list items.I think you could just hit li asterisk five.Let me hit tab.Yep, you get the idea.So, if you're interested in how you can do all sorts of things like that, just look up Emmet tab triggers in VS Code.It's a lot of fun.If I command or control Z and go back and hit tab again, what's cool is that I can fill in one, and then you can just tab trigger through all of them.So, VS Code is really nice about that.So, that's HTML.In CSS, also, like if I just go anywhere, like you could type in, like padding 10 pixels manually, but check this out.
If I just type in like P10 and hit tab on my keyboard, it knows what I mean, right?Or like if you want to say text-decoration: none, just type TDN, hit tab, it's so cool.That's not an extension, that's just built in.I want to show you just a few more text editing details or text manipulation details.There are so many tricks in VS Code, you can make a 5-hour video just on these types of features, but I'm trying to show you the few that I just couldn't live without.So, the other one I want to show you is select the next matching selection.So, like check this out, back in HTML.If I select uh you know, the opening LI tag, if you press control or command D, it selects the next matching instance of that.And you can press it again, and again, and again.
And now I have multiple cursors.So, you can use the arrow keys on your keyboard, and I could say like if I go right here and say like class equals what?Imagine you want to add like a Tailwind class, like padding left three.You hit escape, but it's just really useful and really great.Let's see, we're to the point in the video where I'm just going to start showing you random features that are my favorite.So, if you have a Markdown file somewhere in your project, you know, like if we create a new file and name it readme.md, you know, and you say like my headline, and then, you know, you have a bitof standard text, and you have like another smaller headline.Now, if you want to preview that as Markdown, you're just one click away.We don't need an extension.If you click this icon, that little search symbol or whatever, so this one right here, that will open a real-time preview.
Well, that is a preview, but in the past, I like it when it opens it in a separate split window setup.Let me try that again.So, click that same icon.I might have been holding a modifier key on my keyboard, but notice this is what I like.So, now as I edit this uh Markdown in real-time, the preview is updating.I just think that's a really cool feature, and you don't even need an extension.And then while we're here, this brings up the topic of split panels, or you know, multiple files at once.Like if you want to let me close some of these files.You can always use command or control W to close some of your tabs.But like let's say I wanted my index.html and my style sheet open.You can just click on the open tab right about here and click split right.
Then you could close it in this main area.But now if you're on a really big screen, you could have two files open at once.Or you could even have split vertically.Like if I want my JavaScript file down here, I would open up my JavaScript file, right click on its tab title, and choose what?Split and move.It's falling off the edge of the screen, but I could click like move below.You get the idea.One last cool feature I want to show you is how you can have VS Code automatically fix the indentation for your code every time you save the file.So notice I just messed up the indentation of this.I hit save and nothing happens.Well, check this out.Let's go into our settings file.And if you just add a new line, there's a I know it's called format on save.
Let's see.Yes, it's editor.format on save.Just set that to true.And now if I go back into index.html, you know, and I mess up the indentation, I hit command S, I save it, it automatically fixed it for me.This is really cool and it's going to do it in other files, too.Like if I mess up the indentation in my CSS file, I hit save.Awesome.You can try it in your JavaScript file.Like if I mess up the indentation there, hit save.You get the idea.Now, that's using VS Code's formatting by default.There's a really popular extension.I'm not going to bore it with you bore you with it in this video, but it's called Prettier.You can see it has almost 63 million installations.And it provides more opinionated uh standards on terms of how to format and indent and stylize your code.
Uh but Prettier combined with this setting that we just enabled, format save, it can save you a lot of time.
Wraps up with advice on finding extensions for unsupported file types like EJS, then closes with channel and website promotion plus a final thank-you.
Finally, my one last recommendation is, if you're dealing with the technology that isn't supported in VS Code, like for example, sometimes when I work with Express, I use EJS files.So, like, you know, uh what?profile.ejs.And then, like, in that file, imagine I had just a little bit HTML or something, right?The EJS tags are not supported by default, but if you just go into extensions, there is probably a trusted, worthwhile extension for most things you can think of.Like, so if I just search for EJS, I've used this one so many times throughout the years.It has 1.4 million installations.You just install it.Yes, I'll trust that user.I mean, don't go around installing countless extensions from people who they're not trustworthy.But, my point is that just that simple, that easily, I should now have access to EJS in this file.
Right?So, the basic EJS syntax.The idea is, whatever technology you're working with, if VS Code is not behaving the way you want it to or recognizing it, there's probably a 90% chance there's a great community-approved extension for just that use case.I know Laravel has a great first-party extension.I know Tailwind has an extension, so on and so forth.That is going to bring this video to a close.If you enjoyed this video, you might want to check out my official website, learnwebcode.com.I'm actually currently working on an AI-powered course where we use PHP, SQLite, a really sort of minimalist or lightweight, unopinionated tech stack to build a real-world application.So, from my website, down in the bottom right corner, if you want to get subscribed to my email newsletter, totally free, it'll notify you when those premium courses become available.Also, down at the very bottom of my website, if you want to buy me a coffee, or if you're looking for hosting, you can use my referral link.
Those are great ways to help support this YouTube channel.Anyways, thank you so much for watching.Hope you feel like you learned something, and stay tuned for more web development tutorials.