Visual Studio Code Tutorial for Beginners 2026: How to Use VS Code

Key Takeaways

If you're just getting into coding or maybe you've been coding for a while, then there is one tool that you've definitely heard about, and that's Visual Studio Code. VS Code is a free lightweight code editor built by Microsoft, and it's become the go-to choice for developers all over the world. It does support multiple programming languages, it has built-in debugging version control with Git, intelligent code completion, and of course, access to thousands of extensions that let you shape it exactly [music] how you want. Now, what makes it stand out is the balance. It's lighter and faster than heavy IDEs like IntelliJ, but way more powerful than basic text editors like Sublime Text. You get the simplicity of a clean editor combined with the power of a full development environment, and that combination is exactly why it is one of the most popular developer tools today. So, in this tutorial, you're going to learn everything that you need to know, how to download and install VS Code easy peasy, how to understand its interface, create your first project, use the essential coding features, work with extensions, of course, manage Git and version control, and even take advantage of modern AI-powered tools built directly into the editor. So, you don't need any advanced setups to follow along here. As long as you have a computer and you want to learn how to code more efficiently, you're good to go. Just a quick note, in our school community, I will build a mobile app from scratch and without any coding skills. Plus, I'm going to show you how to submit the app, and that's all built in VS Code to the App Store and the Google Play Store all within just minutes. So, if you want to go ahead and check that out, please do. Also, check out the link in the description below. All right, let's go ahead and get started. If you've ever downloaded a new tool and you felt kind of, you know, slightly unsure about what to click first, you are not alone. So, the good news is that getting started with VS Code is actually quite simple and you'll be up and running in just a few minutes. Now, the first thing that you need to do is head on over to the official website at code.visualstudio.com/download. And this is the only place you should download it from, nowhere else. The site automatically detects your operating system, so whether you're on Windows, Mac OS, or Linux, and it presents to you the correct version. You can see the VS Code website here and the download process on your screen. And once the file finishes downloading, installation is also straightforward. All you got to do is simply run the installer and follow the normal setup steps from your own platform. And after installation, you will be greeted with the welcome screen. >> [music] >> And this screen acts as your starting point. So, from here you can create new files, open folders, you can clone repositories, or explore guided walkthroughs. And at this stage, you don't need to dive into everything. The goal right now is just to get oriented. You'll also notice the option to sign in, and while signing in is optional, it is highly recommended here. The sign-in process happens through GitHub, which opens up a browser window for authentication. And once you do approve access, VS Code connects your account automatically. So, during the first launch process here, VS Code will also prompt you to choose a color theme. And since you'll likely spend extended periods inside of the editor here, selecting a theme that does feel comfortable for your eyes is important. And you can choose from dark themes, light themes, or high-contrast options. And this can always be changed later in the settings anyway. And right now, the essential setup is complete. The application is installed, your account is connected if you choose to sign [music] in, and your interface theme is selected. There are many, many more deeper configuration options available, of course, but those will just come later on. For now, the focus is simply just becoming familiar with the environment here. If you open up VS Code for the very first time, it may look simple, maybe even a little empty, but that simplicity is intentional. Every section you see is designed to reduce clutter while still giving you access to powerful tools. Once you understand what each area does, then the interface stops feeling minimal, and it really starts feeling efficient. So, here on the far left, you're going to see a vertical strip of icons. This is called the activity bar. It acts as your main navigation system. So, each icon here switches between major views inside VS Code, like Explorer, Search, Source Control, Run, Debug, and Extensions. Instead of opening up separate windows for different tasks, everything just lives inside this single interface, and the activity bar then lets you move between them instantly. So, when you click the Explorer icon here, the panel next to it displays your project's files and folder structure. And this is where you manage your pretty much your workspace. You can open up your files, you can create new ones, you can organize your folders, and then move through your code base very quickly. At the center of the screen is the editor area. So, this is where you actually write and edit code. It supports multiple open files at the same time, which appears as tabs here along the top. You can switch between files instantly without closing anything, and this becomes especially important as projects grow larger. The ability to work across multiple files fluidly is one of the core strengths of modern code editors. So, at the very bottom of the window here is the status bar, and this area provides real-time information about your current file. It shows details such as the current line and the column number, the programming language mode, file encoding, Git branch, [music] and whether there are errors or warnings present. Now, many beginners ignore this bar, but experienced developers constantly glance at it because it does give quick insight into the state of the file. Now, above the status bar, you'll find the panel area here. This is where the integrated terminal, the output logs, debug console, and problems panel will appear. So, let's say whenever you run code, execute commands, or encounter any errors, this section becomes active. So, now let's break down the key functional areas in a little bit more details. Starting with the file explorer here, this is where you browse your project's folder structure, where you create new files or folders, and navigate between different parts of your code. And everything inside your project lives here, so keeping it organized becomes increasingly important as your project grows. And from there, the search view allows you to look across your entire project at once. So, instead of checking files all individually, you can run, find, and replace operations across all of your files. You can filter your results and quickly locate repeated patterns or specific pieces of code. Moving to source control, this panel integrates Git directly into VS Code. And you can see modified files, review changes line by line, stage updates, and commit without using the command line. It just centralizes version control inside of the editor. Next is the run and debug panel. So, this is where you execute your application and step through code using breakpoints and variable inspection. So, rather than guessing where something went wrong, instead, you can trace execution in a controlled way. And finally, the extensions marketplace expands what VS Code can do. >> [music] >> You can install extensions for language support, formatting, linting, themes, and additional tools. The editor stays lightweight by default, and you extend it based on whatever your needs may be. Overall, they form a unified environment designed to keep everything in one simple place. Uh Understanding the interface here is important, but things start to make sense once you do actually build something. So, why don't we just go ahead and create a simple project from scratch? So, this approach naturally covers everything that you're going to need to know about file management, uh structure, and working inside of VS Code. Creating a first project in VS Code starts with just one simple action, and that's opening up a folder. So, here we'll open VS Code and select a folder to work in, and once that folder is open, VS Code treats it as your project now. And that folder will be your workspace, and you will need to manage everything inside it through the Explorer panel on the left. And from there, we can go ahead and create your first index.html file directly inside of the folder. As soon as a file is created, VS Code recognizes the file type and displays it with the correct icon here in the Explorer, which makes it easier to scan and identify files as your project grows. Next, let's create a CSS file, and instead of manually writing everything, we can just use AI to generate a simple CSS file for you. So, right now, you can see the workflow clearly. You can create files in the Explorer, and you can edit them in the editor area. In the editor, both the HTML file and the CSS file are open at the same time, shown as tabs here. And this is how VS Code supports working across multiple files without constantly opening and closing windows. So, you can switch between your HTML and CSS instantly while keeping both accessible. And that's it. We just covered the key basics that you need at this stage, and that's opening a folder to start a project, managing files through the Explorer, creating new files, recognizing file types through their icons, navigating your project structure, and working with multiple files simultaneously through editor tabs. Right now, you already have a project open and files created, so it's time to look at the features that actually make coding inside VS Code efficient. So, one of the most important features is IntelliSense. [music] Because, as you type, you'll just notice a drop-down menu appearing with suggestions. >> [music] >> And these suggestions include variables, functions, methods, snippets, and even built-in language constructs. IntelliSense doesn't guess randomly, it reads the context of your code, and then it suggests options that make sense [music] in that specific location. But, it's also important to understand here that the difference between IntelliSense and inline suggestions. IntelliSense appears as a drop-down list of possible completions. Inline suggestions, on the other hand, appear directly inside of your editor as faint gray text predicting entire lines or even blocks of code. Tools like GitHub Copilot generate these inline predictions. So, instead of selecting from a list, you just press a key to accept the full suggestion. Now, one is menu-based completion, the other is predictive generation. As you type functions, parameter hints do appear automatically. So, let's say you open up parentheses after a function name, VS Code will show you the expected adjustments and often includes brief documentation explaining what each parameter does. So, this reduces the need to constantly search for syntax references or switch to external documentation. And beyond suggestions, VS Code includes powerful editing tools. Multi-cursor editing is one of the most efficient. And by holding Alt and then clicking in multiple places, you can just create several cursors at once and edit multiple lines simultaneously. [music] And this is extremely useful for renaming variables, updating repeated values, or modifying structured code blocks. So, find and replace is another essential feature. You can search within a single file or across your entire project. And this allows you to update repeated terms, fix naming inconsistencies, or refactor code quickly. For larger projects, project-wide search does also become a major time-saver. There's also go-to-definition and peek definition. If you're working with, say, functions or variables defined elsewhere, well, then you need to jump directly to where they are declared. Peek definition allows you to preview the definition in a small overlay window without ever having to leave your current file, keeping your workflow uninterrupted. Formatting is another area where VS Code improves productivity. The editor automatically formats code based on language standards [music] and installed formatters. So, let's say you generate or you paste code, indentation and structure adjust automatically. And this keeps your code clean and readable without manual spacing corrections. All of these features combine into one core advantage here, and that's reducing friction. You type less, you search less, you switch windows less, and fix formatting less, too. The editor anticipates what you need and provides support in real time. And once you get comfortable using IntelliSense, inline suggestions, multi-cursor editing, and navigation shortcuts together, coding starts to feel fluid rather than mechanical. One of the biggest shifts in modern development is the integration of AI directly into the editor. VS Code, combined with GitHub Copilot, transforms from a smart code editor into an intelligent development partner. Inside VS Code, GitHub Copilot acts as your built-in assistant. And you can see here that instead of me manually updating the application line by line, I'm just going to ask Copilot to handle the update. It begins generating suggestions directly in the editor, showing proposed changes inline in the file. And you're not forced to accept anything here. So, when a suggestion appears, you can accept it if it makes sense or ignore it altogether and keep editing yourself. The control always stays with you. The main feature shown here is the Copilot chat, specifically using plan mode. So, rather than jumping straight into changing code, plan mode pauses and outlines what it's going to do. It will ask you clarifying questions about the update, how you respond, and then it proceeds based on those answers of yours. It is more structured, almost like reviewing a proposal before implementation. And there are different ways to interact with Copilot. Ask mode is for straightforward questions or explanations. Plan mode is for breaking down larger updates into clear steps before making any changes. And agent mode goes further and can handle multi-step tasks about your project [music] whenever needed. So, the important part here is that you just have to give instructions, and then Copilot suggests changes, asks questions when necessary, and then helps update the application faster than doing everything manually. So, it supports your workflow, but you're still the one approving and guiding the changes here. And these AI-powered features significantly reduce development time. And if used correctly, Copilot can be a productivity multiplier. It speeds up repetitive tasks, supports your learning, and reduces friction during debugging. As AI capabilities continue evolving, the editor does just become a less about manually typing every single line and more about directing, reviewing, and refining intelligent suggestions. [music] VS Code is powerful right out of the box, but its real strength comes from extensions. The editor is intentionally lightweight by default. So, say, instead of forcing every feature onto every user, it allows you to install only what you actually need. And this keeps it fast while remaining extremely flexible. Extensions are essentially just add-ons that expand VS Code's capabilities. They can add support for new programming languages, improving formatting, introducing debugging tools, enhancing productivity, or just completely transforming the development experience. So, rather than switching to a different IDE for different tasks, you can just customize VS Code to match your workflow. To access extensions, just open up the extensions view from the activity bar or use the shortcut control shift X. And this opens up the marketplace where thousands of community-built and officially supported extensions are available, just waiting for you. Installing one is straightforward. All you got to do is search for the extension, click install, and then it just activates automatically. And most extensions require little to no manual configuration. [music] And for beginners, there really are just a few essential extensions worth installing early on for. The Python extension is necessary if you plan to work with Python. It provides syntax highlighting, intellisense improvements, debugging support, linting, and of course environment management. And once installed, Python development becomes fully integrated into the editor without any extra setup. And with Prettier installed, formatting can happen automatically on save. Live Server is especially useful for web development. It launches a local development server and automatically refreshes your browser whenever you save changes. Material icon theme, on the other hand, enhances visual clarity by assigning distinct icons to different file types. Extensions also provide language support for many programming environments. And installing an official language extension, say such as Python, C, or C++, or Java, automatically enables syntax highlighting, intelligent code completion, debugging tools, and language-specific features. And in most cases though, once the extension is installed, everything just works immediately without manual configuration. And the key idea here is customization. VS Code adapts to your needs instead of forcing you into a fixed environment. And as your skills do grow and your projects become more complex, your extension list will evolve with you. So, understanding how to install and manage extensions turns VS Code from a simple editor into a tailored development platform that's built around your workflow. The integrated terminal is one of the features that just keeps your entire workflow inside of VS Code. So, there's no need to switch between your editor and a separate command line window. You can just run everything directly within the same interface. So, to open up the terminal, we'll use a shortcut control plus the tick sign or select it from the menu. And once opened, it appears in the panel area here at the bottom of the screen. And from here, you can run commands exactly as you would in your system's normal terminal. [music] And VS Code supports different terminal types depending on your operating system. On Windows, this just might include PowerShell or command prompt. And for Mac and Linux, it may use Bash or ZSH. And if you have Git installed, Git Bash is also available. You can switch between these environments depending on your preference or project requirements. So, here we have a Vite plus TypeScript project. Let's open up the terminal and install NPM and here, now we can run the app. And you're not just limited to one terminal either. You can create multiple terminal instances if you need to run more than one process at the same time. Apart from that, you can also split the terminal view, placing terminals side by side. And this just makes it easier to monitor different processes simultaneously. The integrated terminal removes the need to constantly move between windows [music] and writing code, installing dependencies, running servers, and managing version control can all happen in one place. And that unified workflow is now what makes development inside VS Code efficient and contained. One of the advantages of VS Code is how easily it adapts to your preferences. Instead of forcing a fixed layout or a coding style, it just allows you to adjust both functionality and appearance to match how you work. And so, you can access settings at any time by pressing control plus comma. And this opens up the settings panel where you can search for specific options or browse through categories. And there are two types of settings here, user settings and workspace settings. User settings apply globally across all projects. Workspace settings apply only to the specific project folder that you currently have open. So, this distinction is important because, for example, you might prefer one indentation style for a personal project and then a different one for a team project. So, workplace settings allow that kind of flexibility without changing your global configuration. And some of the most common adjustments involve readability and formatting. And you can change the font size and the font family to make text more comfortable to read. So now, if you prefer automatic saving, well, you can also enable auto save so files save after a delay or when you switch focus. Tab size and indentation settings allow you to control how many spaces represent a tab and whether tabs or spaces are used. So, these small adjustments make a noticeable difference over time. Appearance is also fully customizable. You can change the color theme at any time using the shortcut control plus K followed by control T. And VS Code includes built-in themes and you can and additional ones from the extensions marketplace. So, here choosing the right theme improves comfort, especially during long coding sessions. Icon themes can also be changed, and if you install something like material icon theme, your file icons do become more visually distinct, making navigation clearer inside larger projects. Layout customization is equally flexible. You can toggle the sidebar and use control plus B show or hide the bottom panel with control plus J. Resize panels by dropping borders and rearranging editor tabs as needed. So, this allows you to structure your workspace based on your screen size and your workflow. Customization in VS Code is not about decoration. It's more about efficiency and comfort. Adjusting settings ensures that the editor works the way that you expect, rather than forcing you to adapt to it. All right, so now you can see here the essential hot keys being used directly inside VS Code. And this includes opening up the command palette to quickly access commands, using quick file open to jump between files, searching across the entire project, toggling the integrated terminal, formatting a document, of course, and using multi-cursor selection to edit multiple lines at once. Each hot key here triggers its respective feature instantly without having to navigate through menus. And you can see how quickly different areas of the editor are accessed just by pressing the keys. And these shortcuts are small individually, but together they significantly speed up everyday tasks and make working inside VS Code a lot more efficient. However, saving files is not enough. You do need version control, and the good thing is you don't have to leave VS Code to use it. You can see here the repository is initialized directly from the source control panel. And once you do initialize it, VS Code immediately starts tracking your project. You'll notice that files begin appearing in the panel and as soon as changes are made. And every time you edit a file, VS Code highlights it as modified. You can click on it and instantly see what has changed. Additions, deletions, and edits are clearly shown, so you're never guessing what you might modify. And when you are ready to save your progress, you just stage the changes that you want to include, write a commit message explaining what you did, and then confirm the commit. And that commit becomes part of your project's history now. >> [music] >> The source control panel acts as your control center for Git, and it shows all modified files. It lets you review differences and stage or unstage changes, and manage everything without touching the command line. And when you are ready to share your project, you can easily do that and publish it directly to GitHub from inside VS Code. In the footage, the project is published through the built-in option as you see, which creates the remote repository and pushes your code automatically. So, say instead of juggling between a terminal and then your editor, everything just happens in one place. You write code, you track changes, you commit updates, and publish to GitHub all within the same environment. And that's what makes this version control inside VS Code just feel straightforward rather than intimidating. And that's Visual Studio Code from setup to projects, Git, extensions, terminal, and of course AI-powered features. >> [music] >> And you now have everything that you need to start building inside one of the most powerful and flexible editors available today. And if this helped you out at all, please do hit like, subscribe for more developer-focused tutorials. And also, please do let me know in the comments what you do want to learn next. So, thank you for investing your time with me today, and I'll go ahead and see you at the next one.