Learn Visual Studio Code in 15 minutes: 2026 Official Beginner Tutorial

VS Code is now your new AI first development environment. You get agent

development environment. You get agent mode, inline suggestions, copilot chat, MCP to connect your AI to real tools, and that's just the

beginning. In the next few minutes, I'm

beginning. In the next few minutes, I'm going to start from scratch so you can follow along. We'll write and execute

follow along. We'll write and execute some code, build an app, publish it to GitHub, and along the way, explore the AI features of VS Code. Let's start off

with the UI. On the far left is the activity bar. The first icon opens the

activity bar. The first icon opens the explorer where you can view your folders and files. Below that is a magnifying

and files. Below that is a magnifying glass which lets you search and find and replace text across your entire workspace. Next is source control used

workspace. Next is source control used to track changes in your code with git and GitHub. Then there's the run and

and GitHub. Then there's the run and debug which lets you execute and debug code using breakpoints. Below that is the extension marketplace where you can add additional functionality to the

editor with extensions and MCP servers.

And then there are a couple of icons for your account. Make sure you're signed

your account. Make sure you're signed into GitHub if you're following along in this video. And the last icon is to

this video. And the last icon is to manage settings. Next thing to show is

manage settings. Next thing to show is the command pallet, which is incredibly important because it makes it easy to quickly access a plethora of VS Code commands. You can access it by hitting

commands. You can access it by hitting commandshiftp at which point you can see all these commands that you have access to within VS Code and some of them have shortcuts

as you can see to the right or you can just type in a command and find it immediately. You can also add a shortcut

immediately. You can also add a shortcut like if I put in get clone I can add my own key binding so the next time I'm within the editor I can just hit that

shortcut to access it. And lastly, you can use it to search files by hitting command P or by clicking in the command center, which will show you some additional quick open commands. If I'd

like to see a terminal, I can hit control tick. And now we have a panel

control tick. And now we have a panel that has a tab for the terminal, which is an integrated command line interface where you can run shell commands,

scripts, and build tasks. output that

displays log messages and diagnostic output from VS Code itself, problems which lists errors, warnings, and other diagnostics detected in your code by

languages, llinters, and extensions, and an interactive console for debugging sessions where you can evaluate expressions and inspect variables. Next

up is chat, which you can toggle on and off from here. Chat is your AI powered assistant for getting work done. So for

example, after choosing a model of your choice, you can come and select your mode here. Ask mode answers questions,

mode here. Ask mode answers questions, but you apply any changes yourself. Plan

mode creates a step-by-step implementation plan before making any changes. And agent mode takes action

changes. And agent mode takes action autonomously by creating or editing files, running terminal commands and tasks until work is complete. So let's

say I select agent mode and wanted to find out how do I change the theme in VS Code. And while it gives me a detailed

Code. And while it gives me a detailed answer, right off the bat, I could see the first thing that it mentions is that I could use this shortcut command K and

command T. And boom, right there, I got

command T. And boom, right there, I got my answer. And I could start navigating

my answer. And I could start navigating other themes. Let's now go ahead and

other themes. Let's now go ahead and create a new file. I can go to file and select it from the menu or just hit

command N and enter in the name which I can say is sample.js.

And you'll notice on the bottom right hand corner VS code immediately detects that this is a JavaScript file. At this

point as I start typing two forms of completion can occur. IntelliSense and

inline suggestions. In my case, first IntelliSense kicks in while I write console.log

console.log which provides parameter info member list as you see in the drop-down list.

But after console.log, right when I enter the left parenthesis, inline suggestions kicks in to show faded code you could either accept or ignore. This

is the work of copilot. So in short, IntelliSense equals the autocomplete drop-down such as types, methods, params, and you can read more about it

here. And inline suggestions equals

here. And inline suggestions equals ghost text that predicts code as you type provided by AI, which you can read more about here. So for my current

inline suggestion, I can choose to accept it by hitting tab, or I could overwrite it by adding in some dashes, which I'll do. And as I continue in line

suggests some more code, which this time I'll hit tab to accept the second line and then the third line. But I'll hit escape to ignore the last suggestions.

And I'll just modify line two to say rise and shine. Now you may notice this bubble here. That indicates the file has

bubble here. That indicates the file has changed and is not saved. But you can use autosave and make sure your changes are always saved. And now to run my

code, I can simply tab over to debug console and hit F5 to see my output.

Let's now create a Python file and enter the file name that VS Code will detect.

But even though it detects it, what you'll notice is that as I start typing, there is no intellisense and there's no error checking. And that's because for

error checking. And that's because for languages like Python, additional support is needed which is provided through extensions. And I can see that

through extensions. And I can see that VS Code is recommending this first Python extension right here that I'll go ahead and install. This will add intellisense linting which shows

squiggly lines when there's errors debugging and more. Now when I start writing code I have intellisense and if there's a typo I will be notified

through error checking. At this point, I can add some additional code and either execute it through hitting F5 or by

hitting this icon here to run my code.

Now, to finish this up, I'm going to ask agent mode using Claude Opus to replace the rest of this code with a fast API app that serves a modern calculator UI.

Essentially what it does is it sets up the environment, installs dependencies, generates the code and UI, and then sets up a port so that when I run the app, I

can now see the calculator and test it out. When coding, sometimes it's useful

out. When coding, sometimes it's useful to have your next change anticipated, which is where inline suggestions come into play. So, for example, I want to

into play. So, for example, I want to change calc response to calc responses.

And instead of me having to find every location to change the effects of that, inline suggestions will pop up a menu that allow me to either accept it or

reject its suggestion. So, I'll go ahead and accept it. And notice how it's going to anticipate my next move just by

hitting tab on line 37. tab 47, tab on line 53, tab on line 60, and do a quick test to make sure that my

app has not broken.

And it looks like it is still working, which is great. So, as you can see, inline suggestions helps you stay in the flow in the editor while increasing productivity and anticipating your next

move.

So one of the most powerful aspects of VS Code as editor is to use its AI functionality and by going to chat which we can toggle on by clicking this icon

here we can ask it questions and tell it prompts for whatever we want to do especially if you are new to a particular technology. So let's say I am

particular technology. So let's say I am new to flask and I want to ask what is a flask application. I can do that and it

flask application. I can do that and it will give me a detailed answer so that I could get started. And here it tells me the definition along with some core

pieces the philosophy behind it and an execution model. However, what I can try

execution model. However, what I can try to do now is under agent to go to plan and I could ask it to create a plan for

a Flask app that lets a user enter a city and displays the current [music] weather with icons. Now, a plan agent in VS Code is an AI powered assistant that

could break down complex tasks into actionable steps or a plan helping automate and guide multi-step workflows.

Okay. And it created a plan for me and it is also step by step. And now if I want I can go ahead and actually just start the implementation. Now, I've sped

things up, but essentially, agent mode scaffolds the project by creating files, setting up virtual environments, installing dependencies, then builds the

weather logic, and then creates the UI, and wires it up. And so, when I execute it, we have our weather app. So, let me

go ahead and put in a city here. And

there we go. -3 in Brooklyn. And now,

let's try Miami. and 16 Celsius. And we

could also change this to Fahrenheit.

And I'd also like to show that for the browser, we do have a feature called simple browser, which you can access by going to the command pallet, shift

command P, and typing in simple, and by selecting simple browser show. Now we

could just enter in the URL and just hit enter. [music] And now we have access to

enter. [music] And now we have access to the same functionality right within VS Code. Now that we have all this code

Code. Now that we have all this code that was generated from having clicked start implementation from our plan agent, let's go ahead and take a look to see how VS Code makes it easy to add a

project to source control such as GitHub. And there are just a few steps.

GitHub. And there are just a few steps.

The first is to just check that you're logged into GitHub by checking the account icon here, [music] which I can see that I am. Next is to click the

source control icon right over here and then clicking on initialize repository.

Now you'll see that our files are unttracked. So we then need to stage

unttracked. So we then need to stage them by clicking on this plus icon above all the files. Now you'll notice the letter A next to the files which indicates that the files were added and

staged. Now we're ready to commit the

staged. Now we're ready to commit the files. And we could either enter a

files. And we could either enter a message manually right over here or just click this icon here to generate a commit message using AI. So let me do

that and see what it comes up with.

Okay, so we have this description here and I like how it looks. So I'm going to go ahead and commit. Next is to publish and I do want it to be public. So I will choose public repository. On the bottom

right hand corner, you could see it's uploading the files and gives me an option to open on GitHub. So, we could see our results. And there you go. And

what's beautiful is that it includes all this documentation that describes how to get started, info on tests, environment variables, and some additional notes.

Now that my app is on GitHub, I might want to add some features in the future and create issues for them. And

currently, there are no issues that exist. But VS Code makes this process

exist. But VS Code makes this process easy too by leveraging MCP model context protocol specifically one by GitHub. And

the list of the tools that we have can be seen by clicking on this configure tools icon right over here. After we add our GitHub server, it'll be in this

list. And the reason we want to do this

list. And the reason we want to do this is because it lets agent mode read and write your repo directly. So it can create files, apply changes, open PRs,

and keep everything organized, and it's way faster and less errorprone than doing it manually. So to add the GitHub MCP server that we want, all we need to

do is go back to our marketplace. And if

we collapse recommended right over here, you'll see there's a section just for MCP servers. And the one that we want is

MCP servers. And the one that we want is actually right over here. But if you needed to search for the server itself, you just need to type in at MCP and the

name of the server itself. And here it is along with the use cases that you can implement. So I'll go ahead and install

implement. So I'll go ahead and install it. And now you'll see that GitHub MCTP

it. And now you'll see that GitHub MCTP server is installed here in addition to when we click configure tool right over here. So at this point I can go ahead

here. So at this point I can go ahead and ask chat to give me three features I can add to this project and open issues for them. And now it should be examining

for them. And now it should be examining my project and eventually come up with a few ideas and then create issues for them. And there you go. Right over here

them. And there you go. Right over here are the three issues. Autocomplete and

favorites 7-day forecast and PWA offline. So I'll go ahead and keep this.

offline. So I'll go ahead and keep this.

And it's asking me to confirm if I want to create the issues. So I will say yes, proceed. And this is a nice touch that

proceed. And this is a nice touch that it gave me this markdown file with detailed notes. And this right here is

detailed notes. And this right here is where we could see that it's going to be using the MCP server by GitHub and it will be using my credentials. I'll click

always allow which means that I trust this MCP server and its tools on this machine. So I'm not prompted each time.

machine. So I'm not prompted each time.

And now it has created the issues for each of these features. So if we go to GitHub and refresh, there they are with the user story, acceptance criteria,

implementation notes, tests, and tasks.

Something else I'd like to mention is that let's say in a few weeks I decide to come back to start some of my implementation. I may not remember all

implementation. I may not remember all the interactions I've had with chat, but we have previous sessions that are saved. So for example, I can go back and

saved. So for example, I can go back and see when I was asking chat about project execution steps and I can look back into the history of the interactions and you

can view all current and previous sessions from one place whether they run locally in the cloud in the background or through another provider. And as the list grows you also have the option to

archive what you don't need to see. I've

just shown you through a few examples the power that you have at your fingertips while exploring the core features of VS Code as a premier AI powered editor. But this is just the

powered editor. But this is just the beginning. Everyday developers are

beginning. Everyday developers are building incredible things with VS Code's AI capabilities. And there's a lot more on the horizon driven by new updates and a community that keeps

pushing what's possible. So with that, I ask, what will you build?