Complete Visual Studio Code tutorial for modern developers

Home » Python » Complete Visual Studio Code tutorial for modern developers

Visual Studio and Visual Studio Code have become the go-to environments for millions of developers who want a solid place to write, run, debug, and manage their code. Whether you are experimenting with Python, building JavaScript apps, or just editing a couple of HTML files, these tools pack a huge amount of functionality into a friendly interface that you can customize to fit your workflow.

In this in-depth guide we will walk through the essential features of Visual Studio Code step by step, mixing practical instructions with context so you understand not only which buttons to click, but also why those features matter. You will learn how to open and organize projects, navigate the user interface, use the built-in terminal and Command Palette, tweak settings, write and refactor code with IntelliSense, manage Git source control, install extensions such as Python support, debug applications, and even take advantage of AI help with GitHub Copilot.

Why Visual Studio and Visual Studio Code are so powerful

Visual Studio (the full IDE) and Visual Studio Code (the lightweight editor) cover a huge range of development scenarios, from quick one-file edits all the way to large, multi-language projects. Visual Studio is especially strong for .NET and enterprise workloads, while VS Code shines as a fast, cross-platform editor with extensions for almost any language you can think of.

Python is one of the languages that really benefits from Microsoft’s tooling. In Visual Studio you can install dedicated Python and Data Science workloads, giving you rich support for web apps, desktop tooling, scripts, and scientific computing. In VS Code, a simple Python extension unlocks IntelliSense, debugging, linting, and much more, making it a serious environment for students, researchers, and professional developers alike.

VS Code in particular is designed around a lean core plus a huge ecosystem of extensions, so you get a clean, fast experience out of the box and then layer on features only when you need them. This approach is ideal if you jump between JavaScript, HTML/CSS, Python, and other technologies and want the editor to adapt quickly.

On top of language support, both tools emphasize productivity boosters such as code completion, refactoring helpers, and integrated debugging. Once you get used to IntelliSense, Code Actions, breakpoints, and inline error feedback, going back to a plain text editor feels painfully slow.

The rest of this tutorial focuses mainly on Visual Studio Code, since it is the environment that most people search for when they look for Visual Studio tutorials for everyday coding and scripting tasks, while still highlighting how these concepts tie back to the broader Visual Studio ecosystem.

Getting started: prerequisites and opening your first workspace

Before diving into VS Code, you should have it installed on your system and be comfortable creating folders on your machine. Download the installer for your operating system from the official Visual Studio Code site, run the setup, and launch the application. No heavy configuration is required to begin.

VS Code can act as a quick single-file editor or as a full project workspace. When you just open a file, VS Code treats it as an ad‑hoc edit. For longer work, it is far more convenient to open a folder, which becomes your workspace. The workspace root is where VS Code resolves paths, creates configuration files, and manages source control.

To follow a classic beginner flow, create a new folder on your machine named vscode101. Start VS Code, then from the menu choose File > Open Folder…, point to the vscode101 folder, and confirm. On some platforms the confirm button appears as “Open,” on others as “Select Folder,” but the effect is the same: that directory becomes your workspace.

When you open a folder for the first time, VS Code may ask whether you trust the authors of the files. Because you created the folder yourself, it is safe to select Yes, I trust the authors. This unlocks advanced features such as running tasks and debugging without security restrictions, which are otherwise limited for unknown projects.

After the folder is open and trusted, you will see its name in the Explorer view on the left. This panel is your control center for adding, renaming, deleting, and navigating files and subfolders within the workspace and is where you will spend a lot of time as your project grows.

Touring the Visual Studio Code user interface

Once a folder is open, it is worth taking a moment to understand how the VS Code window is laid out, because knowing the terminology makes it easier to follow tutorials and documentation. The key areas are the Activity Bar, Side Bar, Editor area, and Panel.

Switching between views with the Activity Bar

The vertical strip of icons on the far left is called the Activity Bar. Each icon activates a different view that focuses on one aspect of your work: file management, search, source control, debugging, or extensions. By clicking an icon you essentially change “mode” inside the same window.

When you choose an item on the Activity Bar, the Primary Side Bar updates to show context-aware information. For example, picking the Run and Debug icon opens tooling for starting debug sessions, inspecting breakpoints, and viewing call stacks, while the Source Control icon shows the current Git status and staging area.

Editing files with the main Editor area

The central region of the window is the Editor, where your files are actually opened and modified. At the top you will see tabs for each open file so you can quickly swap between them. VS Code supports multiple side‑by‑side editors both vertically and horizontally, which is extremely handy when comparing code or writing tests next to implementation.

To create your first file in the workspace, go to the Explorer view and select the New File button. Name the file index.html and press Enter. VS Code immediately opens that file in the Editor and associates it with HTML language support, including syntax highlighting and basic HTML‑aware IntelliSense.

As you type HTML tags inside index.html, suggestions appear that help you complete element names and attributes. This feature, IntelliSense, uses language knowledge to offer valid completions. You can move up and down through the suggestion list with the arrow keys and confirm a choice with Tab, speeding up your typing and reducing errors.

As your project grows, you can add as many files as you need, each appearing as its own tab. If you drag a tab to the side of the editor, VS Code splits the view so you can keep several files visible, making tasks like copying patterns or checking references more fluid.

Using the integrated terminal inside the Panel

Below the Editor is the Panel area, which can host the Terminal, Output, Debug Console, and Problems views. One of VS Code’s biggest conveniences is the integrated terminal, so you no longer have to flip back and forth between a separate command window and your editor.

You can open the terminal using the keyboard shortcut (for example Ctrl+` on Windows and Linux or the matching shortcut on macOS). The terminal opens with its working directory set to the root of your workspace folder, meaning any commands you run operate directly on your project files.

From the integrated terminal you can run classic shell commands. For instance, on many systems the command echo "Hello, VS Code" > greetings.txt will create a new text file right in the workspace. The Explorer view notices this change automatically and lists the new file without you needing to refresh.

VS Code allows multiple terminal sessions at once, each possibly using a different shell such as PowerShell, Command Prompt, or Bash, depending on what is installed. Using the Launch Profile dropdown, you can switch shells or add profiles, which is especially useful if you jump between environments or need different toolchains for different projects.

Accessing commands via the Command Palette

Another central piece of the UI is the Command Palette, a searchable menu for almost every action in VS Code. Instead of hunting through menus, you press a shortcut (commonly Ctrl+Shift+P or the equivalent on macOS) and start typing the name of what you want to do.

When the Command Palette opens, it defaults to command mode, indicated by a leading greater-than sign. If you begin typing words like “move terminal,” the palette filters the command list to anything related, such as moving the terminal to a separate window. Selecting an entry executes that command immediately.

If you remove the > sign or open a quick open mode shortcut, the same box lets you search for files instead of commands. Typing a filename pattern jumps directly to that file in your workspace, which is far faster than clicking through nested folders in the Explorer when you roughly know the name.

Because extensions can register their own commands, the Command Palette naturally expands as you customize VS Code. New debugging tools, language features, and utilities all show up there, giving you a unified, keyboard-friendly way to explore what your setup can do.

Customizing Visual Studio Code settings

Almost every aspect of VS Code can be tuned, from editor behavior and theme to language‑specific options. All of these preferences live in a structured configuration system, which you can access either through a graphical Settings editor or by editing JSON files directly.

To open the Settings UI, use the standard shortcut (for example Ctrl+, on Windows and Linux) or choose File > Preferences > Settings from the menu. The Settings page shows a searchable list of options grouped by category, such as Text Editor, Workbench, or Features like Terminal and Debug.

By default, VS Code does not automatically save modified files, meaning you need to explicitly trigger a save with a keyboard shortcut or via the menu. If you prefer automatic saving, change the Auto Save setting by selecting a mode from its dropdown, for example onFocusChange or afterDelay, so your edits are written out for you.

Every change you make in the Settings editor applies immediately and can be reverted. Next to each setting is a small gear icon that provides a Reset Setting option, restoring the default value if you experiment with something and decide you do not like the new behavior.

VS Code distinguishes between User settings and Workspace settings. User settings apply across all projects you open on your machine, while Workspace settings apply only to the current folder or project, and they override user-level values. This layering is useful if, for instance, one project should use a different formatting style or indentation size than your global preference.

Writing and editing code efficiently

VS Code comes with first-class support for JavaScript, TypeScript, HTML, CSS and several other languages straight out of the box. It understands the structure of these languages, provides syntax highlighting, and exposes rich IntelliSense so you write code faster and with fewer mistakes.

To see these features in action, create a new JavaScript file called app.js in your workspace. Open it in the editor and type a simple function, for example a sayHello function that writes a greeting to the console. As you type function, parameter names, and console.log, you will notice suggestion popups and colored syntax that make the code much easier to scan.

IntelliSense not only suggests keywords and built-in APIs but can also infer types and offer completions based on your own code. You navigate suggestions with the arrow keys and commit the highlighted entry with Tab, avoiding typos in function names and method calls, which is a huge win on larger codebases.

VS Code also includes quick fix suggestions known as Code Actions. When the editor detects an opportunity to refactor or fix something, it shows a small lightbulb icon near the code. For instance, if your string concatenation in JavaScript could be more elegantly written as a template literal, VS Code can offer to convert it automatically.

By clicking the lightbulb or using the keyboard shortcut to trigger Code Actions, you can pick from refactorings such as “Convert to template string.” That single action can replace a verbose expression like "Hello, " + name with a cleaner template literal form, which is easier to maintain and read. Over time, relying on these suggestions helps you gradually adopt better coding patterns.

Beyond quick fixes, VS Code’s editor supports navigation and refactoring tools such as go to definition, find all references, and rename symbol. These features, though not detailed step by step here, are deeply integrated and can dramatically speed up understanding and restructuring complex projects.

Managing source control with Git inside VS Code

Version control is built directly into Visual Studio Code through its Source Control view. Git support ships out of the box, meaning you can initialize repositories, stage changes, commit, and inspect history without leaving the editor window.

To start using Git in a new project folder, open the Source Control icon on the Activity Bar. If Git is not installed on your machine yet, VS Code conveniently displays an option to install it, since external Git tooling is required for most operations.

Once Git is available, you can choose Initialize Repository for your current workspace. VS Code creates the necessary Git metadata and begins tracking changes. The Source Control view will list every file that differs from the last commit or untracked files that have not yet been added.

You can stage individual files or even specific hunks of changes from this view. Hovering over a modified file reveals a plus icon you can click to stage that file. This granular control lets you create clean, focused commits rather than bundling unrelated edits together.

After staging the desired changes, type a commit message such as Add hello function into the input box at the top of the Source Control panel and confirm the commit action. The changes are then recorded in your local Git history, and the list of modified files clears out until you make further edits. From here you can connect to remote repositories, push and pull, and leverage advanced Git workflows while staying inside VS Code.

Installing and using extensions

One of the reasons Visual Studio and VS Code are so popular is their massive ecosystem of extensions. Extensions behave like add-ons: they can introduce new languages, debuggers, UI tweaks, themes, linters, and many other tools that build on top of the core environment.

In VS Code, you install extensions through the Extensions view, accessible from the Activity Bar. Opening this view shows a search box and a curated list of popular and recommended extensions. Typing a keyword, such as “Python,” filters the marketplace listing to relevant results.

For Python development, look for the official Python extension published by Microsoft. Selecting it reveals details about its capabilities, including IntelliSense, linting, debugging support, code formatting, and more. Clicking the Install button attaches it to your VS Code instance, and within moments the editor becomes Python-aware.

After installing the Python extension, create a file named hello.py in your workspace and start writing a basic function like say_hello. You will see that Python code now enjoys syntax highlighting and suggestions, just like JavaScript did earlier. The extension understands common Python patterns and helps you avoid simple mistakes.

Beyond language packs, extensions can enhance your workflow in many other ways. For example, a Live Preview extension can spin up a local web server so you can see your HTML pages as you edit them, while other tools add support for container development, documentation generation, test runners, and more. In the full Visual Studio IDE, the extension marketplace is similarly rich, letting you bolt on everything from productivity boosters to specialized debugging visualizers.

Running and debugging code

VS Code does more than just edit files; it also lets you run and debug applications directly. For Node.js projects it has built-in debugging support (see our Node.js tutorial for beginners), and for many other languages, including Python, extensions plug into the same debugging framework.

With the Python extension installed and Python 3 present on your system, you can debug the hello.py script you created earlier. If VS Code cannot find a Python interpreter, it shows a notification prompting you to select or install one. Using the Command Palette, you can pick the interpreter path that matches your desired Python environment.

To pause execution at a specific line, place the text cursor on the line that calls print inside your Python script and press F9 (or the platform equivalent) to set a breakpoint. A red dot appears in the margin indicating that the debugger will halt there whenever the program runs under debug mode.

Next, press F5 or choose Start Debugging from the Run menu. VS Code will ask you to select which debugger to use; choose the Python option, then indicate that you want to run the current Python file. The program launches, and when it reaches the breakpoint, execution stops, allowing you to inspect variables, step through lines, and understand program flow.

From the debug toolbar you can continue execution, step over or into functions, and stop the session entirely. On the side, additional panes let you watch specific expressions, view the call stack, and examine breakpoints, including conditional ones that only trigger when certain conditions are met. This makes VS Code a capable environment for tracking down tricky bugs in multi-step computations.

Boosting productivity with GitHub Copilot and AI assistance

GitHub Copilot brings AI-powered code suggestions directly into VS Code, acting like an always-available programming partner that proposes entire lines or blocks of code based on your current context. It can help with routine boilerplate, refactoring, and even small bug fixes.

After you have set up GitHub Copilot in your editor according to its onboarding guide, open your hello.py file again. At the end of the file, type a new function signature such as def say_day_of_week(date) and pause for a moment. Copilot will usually suggest a full function body that, for example, calculates or prints the day of the week for a given date.

You can accept Copilot’s suggestion with a keystroke like Tab, or ignore it and keep typing. As you continue using the editor, Copilot adapts to your style and the libraries you use, trying to anticipate the next few lines you are likely to write based on millions of patterns it has seen before.

Copilot also integrates with existing VS Code quick fix workflows. Suppose you call say_day_of_week(date.today()) but forget to import date. The editor highlights the unknown name with a squiggle. Clicking the lightbulb and selecting “Fix with Copilot” prompts the AI to propose an appropriate import statement or code adjustment.

While AI suggestions do not replace your understanding of the code, they can dramatically reduce repetitive typing and sometimes surface APIs you might not have considered. Used thoughtfully, Copilot becomes another layer of tooling alongside IntelliSense, refactorings, and debugging that speeds up everyday tasks.

Key interface commands and everyday workflows

As you grow more comfortable with Visual Studio Code, learning a few essential commands and keyboard shortcuts makes a huge difference. Being able to open views, files, and tools without leaving the keyboard keeps your focus on the code rather than on menus.

Core navigation revolves around the View menu and its associated shortcuts. You can open the Explorer, Search, Source Control, Run and Debug, and Extensions views using either their Activity Bar icons or View menu entries, each with a corresponding key combination tailored to your operating system. These mappings are customizable if you prefer different shortcuts.

The Output panel, Debug Console, Problems list, and Integrated Terminal all live in the lower Panel area and have their own shortcuts as well. The Problems view surfaces compile-time or analysis issues from your tools, while the Debug Console allows you to evaluate expressions in the current debug session. These windows make it easier to keep track of what your tools are telling you without constantly shifting focus.

Basic file operations like creating a new document or saving changes also have predictable keybindings. A new file is available from the File menu or via a straightforward shortcut, and saving is similarly one keystroke away. You can toggle Auto Save from the File menu too, if you want VS Code to handle persistence for you.

For running applications, the Run menu exposes options such as Start Debugging (commonly bound to F5). Once you have a launch configuration or a supported language like Node.js or Python set up, this single command compiles and runs your program under the debugger if applicable, giving you consistent behavior across many project types.

There are also helpful options for visual comfort and personalization. Zooming in and out of the interface uses intuitive shortcuts, and under File > Preferences you can change your color theme. VS Code ships with a variety of light and dark themes, and the marketplace hosts thousands more, allowing you to tune contrast, background color, and syntax colorization to fit your eyes and environment.

Between built-in features and installable extensions, Visual Studio and VS Code cover an enormous amount of ground for modern development. From setting up your first workspace and navigating the UI, to customizing settings, writing and refactoring code, integrating with Git, debugging complex flows, and leveraging AI assistance like GitHub Copilot, the tools are built to scale with you as your projects and skills grow, offering both simplicity for quick edits and depth for advanced workflows.