Getting Started

VS Code Essentials

Course 1 · Chapter 1 · Getting Started

🚀 Getting Started

Welcome to VS Code Essentials — a course about the editor itself, not any one language you might write in it. This chapter covers installing VS Code, what you'll see on first launch, and a tour of the five main regions of the interface you'll be living in for the rest of this course.

📥 Installing VS Code

VS Code is downloaded from code.visualstudio.com, with installers for Windows, macOS, and Linux. It's free, and its core (the "Code - OSS" project) is open source under the MIT license — the official Microsoft-branded download adds a few proprietary extras (like telemetry and the Marketplace connection) on top of that open core.

On most systems, a package manager is faster than the website:

# Windows (winget)
winget install Microsoft.VisualStudioCode

# macOS (Homebrew)
brew install --cask visual-studio-code

# Debian/Ubuntu (apt, after adding Microsoft's repository)
sudo apt install code

⚠ VS Code ≠ Visual Studio

These are two entirely different products that happen to share a name and a publisher. Visual Studio is Microsoft's large, long-standing full IDE, historically centered on C#/.NET and C++, Windows-only until relatively recently. VS Code is a lightweight, cross-platform, extension-driven code editor, language-agnostic by design. If a tutorial says "open Visual Studio" and you open VS Code (or vice versa), nothing will make sense — always double-check which one is actually meant.

🎬 First Launch — What You'll See

On first launch, VS Code opens to a Welcome tab — recent-file shortcuts, a "Open Folder" button, and links to customize your theme and install extensions. This is a normal editor tab, not a separate wizard — you can close it like any other tab, and reopen it later from Help → Welcome if you want it back.

🗺️ The UI Tour

Five regions make up almost everything you'll interact with:

Activity Bar

The far-left strip of icons — Explorer, Search, Source Control, Run & Debug, Extensions. Clicking one changes what the Side Bar shows.

Side Bar

The panel next to the Activity Bar — its content is context-sensitive, following whichever Activity Bar icon is selected.

Editor Groups

The main area where files are actually open — can be split into multiple groups, side by side or stacked.

Panel

The bottom area — Terminal, Output, Debug Console, and Problems all live here as tabs.

Status Bar

The thin strip along the very bottom — git branch, language mode, line/column position, and error/warning counts.

The Explorer (the first Activity Bar icon, usually selected by default) shows your currently open folder's file tree in the Side Bar — this is the view you'll spend the most time in. The Source Control icon shows a small badge with a number whenever there are uncommitted git changes, a useful at-a-glance signal even before opening it (Chapter 7 covers this in depth).

📂 Opening a Folder vs. a File

VS Code is built around projects, not individual files. File → Open Folder (not just "Open File") is the normal way to start working — once a folder is open, the Explorer shows its full tree, search (Chapter 3) covers every file in it, and git integration (Chapter 7) picks up its repository automatically. Opening a single loose file works too, but you lose all of that project-wide context.

Where VS Code Sits: Plain Editor vs. Full IDE

Type	Examples	Characteristic
Plain text editor	Notepad, gedit	Opens files, edits text — no project awareness, no language intelligence
VS Code	—	Project-aware, with language intelligence (autocomplete, error-checking, debugging) added through extensions rather than built in for every language at once
Full IDE	Visual Studio, a JetBrains IDE (IntelliJ, PyCharm...)	Deep, language-specific tooling built directly into the product, heavier to install and run

This "extension-driven middle ground" is VS Code's whole identity — a fast, general-purpose core, made as deep as any single project needs through the extensions covered in Chapter 4.

💻 Coding Challenges

Exercise 1: Install & Identify

Install VS Code, launch it, and open any folder on your machine via File → Open Folder. Identify all five UI regions from this chapter (Activity Bar, Side Bar, Editor Groups, Panel, Status Bar) and note one specific thing you see in each.

→ Solution

Exercise 2: Split the Editor

Open two different files from your folder side by side in two Editor Groups, then open and close the integrated terminal (Panel) at least once.

→ Solution

Exercise 3: Status Bar Investigation

With a file open, click its language-mode indicator in the Status Bar and note what options appear. Then click the line/column indicator and use it to jump to a specific line number.

→ Solution

🎯 What's Next

Next chapter: The Command Palette & Quick Open — Ctrl+Shift+P, Ctrl+P, and keyboard-first navigation.