VS Code: A Hands-On Introduction to the Developer’s Editor

Introduction

Every piece of software you use, from the apps on your phone to the course websites you log into, started as plain text typed into an editor. You could technically write code in Notepad or TextEdit, but the tool you write code in has a huge effect on how fast you work, how many mistakes you catch, and how much you enjoy the process.

Visual Studio Code (usually just called VS Code) is a free code editor made by Microsoft. It has become one of the most widely used tools among developers, students, data scientists, and researchers because it is lightweight, works on every major operating system, and can be extended to support almost any programming language.

This manual will walk through how VS Code is organized, the editing features that save the most time, how to customize it with extensions and settings, and how to use its built-in terminal, debugger, and Git tools.

The examples in this manual use Python, but nearly everything here applies to any language you write in VS Code, including JavaScript, HTML/CSS, R, Java, C++, and more.

Editors and IDEs

Before diving into VS Code itself, it helps to understand where it fits among the different kinds of tools people use to write code.

Text Editors

A plain text editor (Notepad on Windows, TextEdit on macOS) can open and save code files, but it treats your code like any other text. It won’t warn you about typos, help you find a function, or run your program.

Integrated Development Environments (IDEs)

An IDE bundles everything a developer needs into one application: an editor, tools to run and debug code, project management, and often language-specific features. Examples include PyCharm (Python), RStudio (R), IntelliJ IDEA (Java), and Visual Studio (C#/C++).

IDEs are powerful, but they are often built around a single language, can be large downloads, and may take a while to learn.

Where VS Code Fits

VS Code sits in between. Out of the box it is a fast, lightweight code editor. By adding extensions, you can give it IDE-level features (running, debugging, testing, IntelliSense) for whichever languages you use, so one tool can cover all your classes and projects.

Getting Started

Installing VS Code

1. Go to code.visualstudio.com.
2. Download the installer for your operating system (Windows, macOS, or Linux).
3. Run the installer. On Windows, checking Add to PATH and Open with Code during installation is recommended.
4. Launch VS Code. You will see the Welcome page, which links to walkthroughs and recently opened folders.

Installing a Language

VS Code is an editor, not a programming language. To actually run code, the language itself must be installed on your computer separately. For example, to run Python code, you need Python installed from python.org.

You can check whether a language is installed by opening a terminal and typing a version command:

python --version
# On macOS/Linux you may need:
python3 --version

Opening a Folder

VS Code works best when you open an entire folder rather than individual files. The folder you open becomes your workspace, and VS Code uses it to find files, search, run code, and track changes with Git.

• File → Open Folder… (Windows/Linux) or File → Open… (macOS)
• Drag a folder onto the VS Code window
• From a terminal, navigate to the folder and type code .

The VS Code Interface

The VS Code window is divided into five main areas. Knowing their names makes it much easier to follow tutorials and documentation.

The Activity Bar Views

You can hide and show the side bar with Ctrl + B (Cmd + B on macOS) to give yourself more room to write.

The Command Palette

The Command Palette is a search bar for every command in VS Code. Open it with Ctrl + Shift + P (Cmd + Shift + P on macOS) or F1, then start typing what you want to do, such as theme, format, or word wrap.

Quick Open

Ctrl + P (Cmd + P on macOS) opens Quick Open, which lets you jump to any file in your workspace by typing part of its name. In large projects this is much faster than clicking through folders in the Explorer.

Quick Open also accepts a few prefixes:

• > switches to the Command Palette
• : followed by a number jumps to that line (for example :42)
• @ lists the functions and classes in the current file

Splitting the Editor

To view two files side by side, press Ctrl + \ (Cmd + \ on macOS) or drag a tab to the edge of the editor. This is helpful for comparing files or keeping instructions open while you code.

Writing and Editing Code

VS Code includes many features that help you write code faster and with fewer mistakes. These are the ones that tend to save beginners the most time.

IntelliSense

Press Tab or Enter to accept a suggestion. If the list disappears, press Ctrl + Space to bring it back. Hovering your mouse over a function or variable shows its documentation.

For most languages, full IntelliSense requires that language’s extension (for example, the Python extension for Python).

Multi-Cursor Editing

VS Code lets you place more than one cursor at once, so you can type the same change in several places at the same time.

• Alt + Click (Option + Click on macOS) adds a cursor wherever you click
• Ctrl + D (Cmd + D) selects the next occurrence of the highlighted word; keep pressing it to add more
• Ctrl + Shift + L (Cmd + Shift + L) selects every occurrence at once
• Ctrl + Alt + ↑/↓ (Cmd + Option + ↑/↓) adds a cursor on the line above or below
• Press Esc to go back to a single cursor

Rename Symbol

To rename a variable or function everywhere it is used, click on it and press F2, then type the new name. Unlike Find and Replace, this only changes that exact variable, not other words that happen to contain the same letters.

Working with Lines

Formatting Code

Formatting means automatically fixing the layout of your code: indentation, spacing around operators, line breaks, and so on. It doesn’t change what your code does, only how it looks.

Use Format Document from the Command Palette, or press Shift + Alt + F (Shift + Option + F on macOS). The first time, VS Code may ask you to pick or install a formatter extension for that language (for example, Black Formatter for Python or Prettier for JavaScript/HTML/CSS).

Here is some messy Python code before formatting:

def   calculate_total(prices,tax_rate):
    total=0
    for p in prices :
        total+=p
    return total*(1+tax_rate)
cart=[4.99,12.50,  3.25]
print( calculate_total(cart,0.055) )

And the same code after running Format Document with Black:

def calculate_total(prices, tax_rate):
    total = 0
    for p in prices:
        total += p
    return total * (1 + tax_rate)


cart = [4.99, 12.50, 3.25]
print(calculate_total(cart, 0.055))

Linting and the Problems Panel

Red squiggles usually mean errors, and yellow squiggles mean warnings. Hover over a squiggle to see the message, or click the lightbulb icon for suggested Quick Fixes.

Emmet for HTML and CSS

VS Code has Emmet built in, which expands short abbreviations into full HTML. In an .html file, type ! and press Tab to generate a complete page skeleton, or type ul>li*3 and press Tab to create a list with three items.

Extensions

Extensions are what turn VS Code from a simple editor into a full development environment. They can add support for new languages, formatters, debuggers, themes, and integrations with other tools.

Installing an Extension

1. Open the Extensions view (Ctrl + Shift + X / Cmd + Shift + X).
2. Search for the extension by name, for example Python.
3. Click the extension to read its details, then click Install.
4. Some extensions ask you to reload the window or configure a setting after installing.

From the same view, you can Disable an extension (turn it off without removing it) or Uninstall it. Clicking the gear icon on an extension gives you access to its settings.

Recommended Extensions

Recommended Extensions for a Project

When VS Code opens a file type it recognizes, it will often suggest the matching extension with a pop-up in the bottom-right corner. Projects can also include a .vscode/extensions.json file listing recommended extensions, which VS Code will offer to install for anyone who opens that folder.

Settings and Customization

The Settings Editor

Open Settings with Ctrl + , (Cmd + , on macOS). The Settings editor has a search bar at the top, so you can type a word like font size or auto save instead of browsing through every option.

Some useful settings for beginners:

User vs. Workspace Settings

Settings can be saved at two levels, shown as tabs at the top of the Settings editor:

• User settings apply to every folder you open on your computer.
• Workspace settings apply only to the current folder and are saved in .vscode/settings.json inside it. Workspace settings override user settings.

This means you could, for example, use a 4-space indent for Python projects and a 2-space indent for a web project.

Editing settings.json

Behind the Settings editor, every setting is stored in a JSON file. You can edit it directly by running Preferences: Open User Settings (JSON) from the Command Palette. This is handy when a tutorial gives you settings to copy and paste.

{
    "editor.fontSize": 16,
    "editor.formatOnSave": true,
    "files.autoSave": "afterDelay",
    "[python]": {
        "editor.defaultFormatter": "ms-python.black-formatter"
    }
}

Themes

Change your color theme with Ctrl + K then Ctrl + T (Cmd + K, Cmd + T on macOS), or search the Command Palette for Preferences: Color Theme. Use the arrow keys to preview themes before choosing one. More themes, including icon themes, can be installed from the Extensions view.

Keyboard Shortcuts

Open the Keyboard Shortcuts editor with Ctrl + K then Ctrl + S (Cmd + K, Cmd + S). You can search for any command, see its current shortcut, and double-click it to assign a new one.

Profiles and Settings Sync

• Profiles let you save different sets of extensions and settings (for example, one for a Python class and one for web development) and switch between them from the gear icon in the bottom-left corner.
• Settings Sync (gear icon → Backup and Sync Settings…) uses a Microsoft or GitHub account to keep your settings, extensions, and shortcuts the same across multiple computers.

Integrated Terminal

A terminal (also called the command line or shell) lets you control your computer by typing commands. VS Code includes a terminal right inside the editor, so you can run programs, install packages, and use Git without switching windows.

Opening the Terminal

• Press Ctrl + ` (the backtick key, usually above Tab) on all platforms
• Or use the menu: Terminal → New Terminal (or View → Terminal)

The terminal opens in the Panel at the bottom of the window and starts inside your workspace folder, so commands run where your files are.

Useful Terminal Features

• Click the + icon to open additional terminals, or the split icon to show two side by side.
• Use the dropdown arrow next to + to choose a different shell. Terminal: Select Default Profile in the Command Palette sets which one opens by default.
• Click the trash can icon to close a terminal (closing the Panel only hides it).
• Ctrl + C stops a program that is currently running in the terminal.

Running Code from the Terminal

# Run a Python file in the current folder
python hello.py

# Install a Python package
python -m pip install requests

# List the files in the current folder
ls

Running and Debugging Code

Running a File

Once a language extension is installed, a Run button (▷) appears in the top-right corner of the editor. For Python, clicking it runs the current file in the integrated terminal, just like typing python filename.py.

If you have more than one version of Python installed, choose which one VS Code uses by clicking the Python version in the Status Bar, or by running Python: Select Interpreter from the Command Palette.

What Is Debugging?

Many beginners debug by adding print() statements everywhere. That works, but a debugger lets you see every variable at any point, without changing your code.

Breakpoints

A breakpoint tells the debugger where to pause. To add one, click in the space just to the left of a line number (called the gutter). A red dot appears. Click it again to remove it, or press F9 to toggle a breakpoint on the current line.

Starting the Debugger

1. Set a breakpoint on the line you want to inspect.
2. Press F5 (or open Run and Debug and click Run and Debug).
3. If asked, choose a configuration such as Python Debugger → Python File.
4. The program runs and pauses on your breakpoint. The current line is highlighted in yellow.

The Debug Toolbar

While paused, a small toolbar appears at the top of the window:

Inspecting Your Program

The Run and Debug side bar shows several sections while your program is paused:

• Variables lists every variable and its current value.
• Watch lets you type in any expression (like len(scores) or total / 2) and see its value update as you step.
• Call Stack shows which function you are in and which function called it.
• Breakpoints lists all your breakpoints so you can turn them on or off.

You can also hover your mouse over any variable in the editor to see its value, or type expressions into the Debug Console in the Panel.

Version Control with Git

Version control keeps a history of every change you make to your project, so you can see what changed, undo mistakes, and work with other people without overwriting each other’s work. The most widely used version control system is Git, and VS Code has Git support built in.

Key Git Terms

The Source Control Workflow

1. Open the Source Control view (Ctrl + Shift + G).
2. If the folder is not a repository yet, click Initialize Repository.
3. Changed files appear under Changes. Click a file to see a side-by-side diff of what changed (green for added, red for removed).
4. Hover over a file and click + to stage it (or + next to Changes to stage everything).
5. Type a short message describing your change in the message box, then click Commit.

Files are also marked in the Explorer: U means untracked (new), M means modified, and D means deleted. The editor gutter shows colored bars next to lines you have added or changed since your last commit.

Branches and GitHub

• The current branch name is shown in the bottom-left of the Status Bar. Click it to create a new branch or switch to an existing one.
• Click Publish Branch in the Source Control view to upload your repository to GitHub. VS Code will ask you to sign in to GitHub the first time.
• Use Sync Changes to push your commits and pull down any new ones.

The Timeline section at the bottom of the Explorer shows the history of commits for the currently open file.

Beyond the Basics

Once you are comfortable with the essentials, VS Code has many more features worth exploring.

Jupyter Notebooks

With the Jupyter extension, you can create and run .ipynb notebooks directly in VS Code, mixing code cells, output, charts, and Markdown notes. This is popular for data science courses.

Markdown Preview

Open a .md file and press Ctrl + Shift + V (Cmd + Shift + V) to see a formatted preview, which is useful for writing README files.

Remote Development

The Remote – SSH extension lets you open folders on another computer (such as a department server) and edit them as if they were on your own machine. Similar extensions exist for WSL (Linux on Windows) and Dev Containers.

Live Share

The Live Share extension lets you share your workspace with a classmate so you can edit and debug together in real time, similar to collaborating in a Google Doc.

AI Coding Assistants

VS Code supports AI assistants such as GitHub Copilot, which can suggest code and answer questions in a chat panel. Students can get free access to Copilot Pro through GitHub Education.

Keyboard Shortcut Reference

A full printable list is available from Help → Keyboard Shortcuts Reference, but these are the shortcuts used most often.

References

• VS Code Documentation
• VS Code Keyboard Shortcuts (Windows PDF)
• VS Code Keyboard Shortcuts (macOS PDF)
• Getting Started with Python in VS Code
• Debugging in VS Code
• Source Control in VS Code
• Visual Studio Code Marketplace
• GitHub Education