CS 410: Advanced Development
Environments - Week 2 (VS Code
Deep Dive)
Topic 1: Core Architecture & Philosophy
● VS Code is a text editor, not a full IDE out of the box (like Visual Studio or IntelliJ),
but extensions bridge that gap completely.
● Under the hood: * It's built on Electron (Chromium + [Link]). This is why it's
cross-platform (Windows, Mac, Linux) but also why it can be a bit heavy on RAM
compared to native apps like Vim or Sublime Text.
○ The actual text editing engine is Monaco (originally built for VS Online).
● The Extension Host: This is the genius part of the architecture.
○ Extensions run in a completely separate process from the main UI.
○ Why? If a poorly written extension crashes or hangs in an infinite loop, it won't
freeze the editor UI. You can just restart the extension host.
Topic 2: Navigating the UI
● The interface is divided into 5 main areas. Knowing the exact names helps when
digging through settings.
1. Activity Bar: The skinny vertical bar on the far left (Explorer, Search, Source
Control, Run/Debug, Extensions).
2. Side Bar: The wider panel that expands when you click an icon in the Activity
Bar (e.g., your actual file tree).
3. Editor Groups: The main typing area. You can split these vertically,
horizontally, or into a grid.
4. Panel: The bottom section. Usually houses the Terminal, Output logs, Debug
Console, and Problems tab.
5. Status Bar: The skinny strip at the very bottom. Shows git branch,
line/column numbers, encoding (UTF-8), and language mode.
Topic 3: The Command Palette (The Heart of VS
Code)
● Prof stressed this: Stop using your mouse. Everything in VS Code can be triggered
from the Command Palette.
● Shortcut: Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac).
● It gives you access to literally every command, extension trigger, and setting, along
with the keyboard shortcut mapped to it.
● Quick Open (Ctrl+P / Cmd+P): Drops the > symbol. This is for fuzzy-searching files
in your current workspace. You don't need to type the exact path, just bits of the
filename.
○ Pro-tip: Type @ in Quick Open to jump to a specific symbol (function, class,
variable) in the current file.
Topic 4: Settings & Workspaces
● VS Code settings cascade. There's a strict hierarchy of which settings override the
others.
1. Default Settings: Hardcoded into VS Code.
2. User Settings: Apply to every instance of VS Code you open on your
machine.
3. Workspace Settings: Apply only to the specific folder/project you currently
have open. These are saved in a .vscode/[Link] file inside the
project directory.
● Best Practice: Put language-specific formatting rules (like Prettier) and linter configs
in the Workspace settings and commit them to Git. That way, your whole team has
the exact same editor behavior.
Topic 5: Source Control (Git) Integration
● You don't need the command line for basic Git, though you should still know it.
● The Source Control tab tracks all changes in real-time.
● Staging: Click the + next to a file to stage it (git add).
● Committing: Type a message in the box at the top and hit the checkmark.
● Gutter Indicators: The colored lines next to the line numbers in the editor.
○ Red triangle: Line deleted.
○ Green bar: Line added.
○ Blue bar: Line modified.
○ Clicking these inline lets you view a mini-diff and instantly revert that specific
chunk of code without touching the rest of the file.
Topic 6: The Debugger
● You can debug almost any language right inside the editor without switching to a
terminal or browser console.
● Requires a [Link] file inside the .vscode folder to tell the editor how to start
your app.
● Core features:
○ Breakpoints: Click to the left of the line number to pause execution there.
○ Conditional Breakpoints: Right-click -> "Add Conditional Breakpoint". It only
pauses if a specific variable equals a specific value (e.g., [Link] == 5).
Huge time saver so you don't have to hit "continue" 50 times in a loop.
○ Watch Panel: Add variable names here to track their exact values as you step
through the code line by line.
Topic 7: Power-User Keyboard Shortcuts to
Memorize
● Alt + Up/Down Arrow: Move the current line (or selected block) up or down.
● Shift + Alt + Up/Down: Copy the current line up or down.
● Ctrl + D (Cmd + D): Select the next occurrence of the current word. Keep
pressing it to select multiple instances, giving you multiple cursors to edit them all
simultaneously.
● Ctrl + / (Cmd + /): Toggle line comment.
○