🖥️ VS Code Installation and Configuration

Why VS Code?

Your code editor is a craftsperson's workbench — the place you return to for thousands of hours. Visual Studio Code has become the default choice for web developers because it hits a rare sweet spot: light and fast like a text editor, yet extensible into a full IDE when you need it.

• Free & open source, cross-platform (Windows, macOS, Linux).
• Huge extension ecosystem — add exactly the language support and tools you want.
• Built-in IntelliSense, Git, and terminal — the essentials come out of the box.
• Ubiquitous — Stack Overflow's developer surveys have ranked it the most-used editor by a wide margin for years, so help is everywhere.

💡 Analogy: VS Code is like a modular workbench that starts nearly bare but accepts any attachment. You bolt on only the tools your project needs, so it never feels bloated — and it reshapes itself for JavaScript, Python, or PHP on demand.

Installing VS Code

Use your package manager from the tools lesson — it's the fastest route and keeps VS Code updatable with one command.

Windows

# Windows Package Manager (built in)
winget install Microsoft.VisualStudioCode

# or Chocolatey
choco install vscode -y

When installing via the graphical installer instead, tick "Add to PATH" and "Register Code as an editor for supported file types" — the PATH option is what makes the code command work later.

macOS

brew install --cask visual-studio-code

Linux (Ubuntu / Debian)

# Snap — simplest
sudo snap install --classic code

# or via Microsoft's APT repository for automatic updates
sudo apt install wget gpg -y
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
sudo install -D -o root -g root -m 644 microsoft.gpg /etc/apt/keyrings/microsoft.gpg
echo "deb [arch=amd64,arm64 signed-by=/etc/apt/keyrings/microsoft.gpg] https://packages.microsoft.com/repos/code stable main" | sudo tee /etc/apt/sources.list.d/vscode.list
sudo apt update
sudo apt install code -y

The code Command

The real magic connecting the last two lessons is the code shell command. From any terminal you can launch the editor exactly where you're standing:

code .                 # open the current folder as a project
code app.js            # open a single file
code ~/projects/site   # open a specific folder
code --diff a.js b.js  # open a side-by-side diff of two files

code . becomes muscle memory: cd into a project, type it, and your whole codebase opens. On Windows and Linux the package-manager install wires this up automatically. On macOS, enable it once from inside VS Code:

1. Open the Command Palette with Cmd+Shift+P.
2. Type "shell command".
3. Choose "Shell Command: Install 'code' command in PATH".

Appearance: Theme & Font

Appearance isn't vanity — the right theme and font reduce eye strain and help you read code faster over long sessions.

Color theme

Press Ctrl+K Ctrl+T (Cmd+K Cmd+T on macOS) to browse themes instantly. Built-ins are good; popular installs include One Dark Pro, Dracula, and Night Owl (dark) or GitHub Light (light).

Icon theme

An icon theme makes the file explorer far easier to scan. Material Icon Theme is the community favorite. Install from the Extensions view (Ctrl+Shift+X), then set it via the Command Palette → "File Icon Theme".

Programming font with ligatures

Coding fonts like JetBrains Mono, Fira Code, or Cascadia Code render clearly and support ligatures — where character pairs such as => or !== combine into a single, cleaner glyph. Install the font on your OS, then point VS Code at it (next section).

Configuring settings.json

VS Code has a friendly Settings UI (Ctrl+,), but every setting is ultimately stored in a JSON file — and editing it directly is faster, shareable, and how you'll see settings described online. Open it from the Command Palette → "Preferences: Open User Settings (JSON)".

{
  // --- Appearance ---
  "workbench.colorTheme": "Default Dark Modern",
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
  "editor.fontSize": 14,
  "editor.fontLigatures": true,

  // --- Sensible editing defaults ---
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.wordWrap": "on",
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,

  // --- Terminal ---
  "terminal.integrated.fontSize": 13
}

Features That Earn Their Keep

IntelliSense

Context-aware completion for variables, functions, and APIs. It pops up as you type, or on demand with Ctrl+Space. Hover any symbol to see its type and documentation — like an assistant that memorized every API for you.

Integrated terminal

Open it with Ctrl+` (backtick). It's a full shell inside the editor, so you run npm, git, and python without leaving VS Code. Split it or spin up multiple terminals for a server and a build watcher side by side.

Git integration

The Source Control panel (Ctrl+Shift+G) shows changed files, lets you stage and commit, and visualizes diffs — all without memorizing Git commands. The gutter marks added and modified lines as you edit.

Multi-cursor editing

Edit many places at once. The workhorse is Ctrl+D (Cmd+D): select a word, then press it repeatedly to add a cursor at each next occurrence and type once to change them all.

// Select 'color', press Ctrl+D three times → four cursors,
// then type 'theme' once to rename every occurrence at once.
const color = getColor();
applyColor(color);
saveColor(color);
console.log(color);

Global search & replace

Ctrl+Shift+F searches the whole project; toggle the regex button for pattern-based find-and-replace across every file at once.

Keyboard Shortcuts

The single most useful shortcut is the Command Palette: Ctrl+Shift+P (Cmd+Shift+P). It's a searchable menu of every command in VS Code and its extensions — if you can name it, you can run it without hunting through menus.

Hands-on Exercise

Summary & Quiz

📚 Further Reading

• VS Code Official Documentation
• Settings reference
• VS Code Tips and Tricks
• JetBrains Mono font

🚀 What's Next?

A bare VS Code is capable, but its real power comes from extensions. Next we'll install the essential extensions for web development — linters, formatters, and language tools that turn the editor into a tailored full-stack IDE.