VS Code Essentials

VS Code is your home for the next eight weeks — and probably your home for the rest of your career. This guide (about an hour) walks you through the features you’ll use every day, the keyboard shortcuts that make you fast, and the cohort’s standard extension set. By the end you’ll be productive enough that the editor disappears and you can focus on the code.

This guide assumes you’ve already completed the macOS Installation Guide — VS Code itself and the cohort extensions are installed in §10–11 of that guide. If you haven’t done it yet, go do that first.

If you’ve never opened VS Code before: launch it from Applications, or just type code in your terminal and the current folder opens as a workspace.

1. The interface, in five panels

VS Code has five main areas you’ll use constantly:

┌─────────┬─────────────────────────────────────────────┐
│         │                                             │
│  Side   │             Editor                          │
│   bar   │                                             │
│         │                                             │
│         ├─────────────────────────────────────────────┤
│         │             Terminal / Output / Debug       │
│         │                                             │
└─────────┴─────────────────────────────────────────────┘
   Activity bar (far left, hidden in this diagram) — switches the side bar
   Status bar (bottom strip) — Git branch, line/col, errors, language

• Activity bar (vertical strip on the far left): icons for Explorer, Search, Source Control, Run/Debug, Extensions
• Side bar (left panel): contents of whichever Activity bar icon you clicked
• Editor: the file(s) you’re editing
• Panel (bottom): integrated terminal, build output, debug console, problems
• Status bar (bottom strip): Git branch, errors/warnings count, line and column number, file language

That’s the whole layout. Everything you’ll do happens in those five places.

2. The single most important keystroke: the Command Palette

Cmd + Shift + P

This opens the Command Palette, which lets you fuzzy-search every command in VS Code. Almost everything you can do in VS Code is reachable through this palette.

Try it. Press Cmd + Shift + P and type:

• format → “Format Document”
• git → all Git operations
• terminal → “Toggle Terminal”
• theme → switch color theme

If you remember just one shortcut from this guide, make it Cmd + Shift + P. Whenever you don’t know how to do something in VS Code, type the closest English word into the palette and the answer is usually one click away.

3. The integrated terminal

Ctrl + ` (backtick)

That keystroke toggles a terminal at the bottom of VS Code. You can run any command — pnpm install, git push, node, anything — without leaving the editor.

The terminal automatically opens to your current project’s folder. You can split it (multiple terminals side by side), open a new one (the + icon), or kill one (trash icon).

Why this beats opening Terminal.app: the terminal is right there with your code. You see the file you’re editing, run the command, see the output, edit again. The flow is uninterrupted.

4. The file Explorer

The first icon in the Activity bar opens the file Explorer (also: Cmd + Shift + E). It shows your project’s folder tree.

• Single-click a file: opens it in preview mode (italics in the tab); opening a different file replaces it
• Double-click: opens permanently (bold in the tab)
• Right-click for everything else: rename, delete, copy path, reveal in Finder

Two especially useful right-click options:

• Copy Relative Path — paste the path into a terminal command or another file
• Reveal in Finder — opens the macOS Finder at that file

5. Multi-cursor editing — the “I can’t believe it took me this long” moment

VS Code lets you edit many places at once. The first time you use this you’ll wonder how you ever lived without it.

• Cmd + D: highlight the next occurrence of whatever’s currently selected. Keep pressing to select the next, the next, the next. Now type — every selection updates simultaneously.
• Cmd + Shift + L: select every occurrence of the current selection at once.
• Option + Click: drop additional cursors anywhere by clicking with Option held.
• Cmd + Option + Down: drop a cursor on the line below. Repeat to extend.

Try it now. Open any file with a repeated word. Double-click the word to select it, press Cmd + D twice, and type a replacement. Three places update at once.

6. Find and replace, including across all files

• Cmd + F: find within the current file
• Cmd + Option + F: replace within the current file
• Cmd + Shift + F: search across every file in your project
• Cmd + Shift + H: find-and-replace across every file

The cross-project search is your refactoring superpower. Renaming a function? Cmd + Shift + H, type old name, type new name, click “Replace All” or replace one-by-one. This is how senior engineers refactor in seconds what beginners do in hours.

7. The Source Control panel — your visual Git client

Third icon in the Activity bar (or Ctrl + Shift + G). This is VS Code’s Git integration.

The panel shows:

• Changes: files you’ve modified but not staged
• Staged Changes: files staged for the next commit
• Merge Changes (when applicable): files with conflicts

Workflow:

1. Edit a file. Save it (Cmd + S).
2. The Source Control panel shows it under Changes.
3. Click the file to see the diff — what changed, line by line, side by side with the original.
4. Click the + next to the file to stage it (or stage all with + at the section header).
5. Type a commit message in the text box at the top of the panel.
6. Click the checkmark (Cmd + Enter in the text box) to commit.
7. Click ... → Push, or use the sync icon in the status bar.

For most everyday Git work, you may never need to type git in the terminal. But knowing both the visual and command-line ways gives you flexibility — and reading other engineers’ Git commands becomes possible.

Merge conflicts: VS Code shows them inline with “Accept Current Change,” “Accept Incoming Change,” “Accept Both,” and “Compare Changes” buttons over each conflicted block. Clean, visual, beats fighting with <<<<<<< markers in the terminal.

8. The debugger — beyond console.log

The fourth Activity bar icon opens the Run and Debug panel.

You can:

1. Click in the gutter (the gray strip just left of the line numbers) to set a breakpoint (a red dot).
2. Run your code with the debugger attached (F5 or “Run” button).
3. When execution hits the breakpoint, it pauses. You can:
   • Inspect every variable’s current value (the “Variables” panel)
   • Step over to the next line (F10)
   • Step into a function call (F11)
   • Step out of a function (Shift + F11)
   • Continue running until the next breakpoint (F5)

For a simple Node script: open a .ts file, set a breakpoint, click the “Run and Debug” green play button, choose “Node.js” — done.

Why this beats console.log: you see every variable’s value at the moment of the breakpoint, not just the ones you remembered to log. You can step line by line. You can change variable values mid-execution. Once you learn it, you’ll wonder how you ever debugged otherwise.

9. The cohort extension set

You installed these in §11 of the macOS Installation Guide. You’ll use most of them daily.

If you ever need to install a new extension, click the Extensions icon (last in the Activity bar), search, and click Install.

10. Settings sync

Sign in with your GitHub account (gear icon, bottom-left → “Turn on Settings Sync”). Now your settings, keyboard shortcuts, extensions, and themes follow you to any other machine you sign into. If your laptop dies, you’re back up in minutes.

11. Working with Claude Code

Claude Code lives in the side bar (look for the Claude icon). The most productive habits:

• Describe intent, then let Claude code. Open the Claude panel, type “I want a NestJS service that takes a vibe string, calls Claude Haiku, returns JSON of moods and genres” — let Claude generate the skeleton for you to refine.
• Diff and challenge. Claude shows you what it’s about to change as a diff. Read it. If you don’t understand a line, ask Claude to explain. If it’s wrong, push back: “This call should be wrapped in try/catch — show me.”
• Use Claude for refactors, not just new code. Highlight some code, ask “Extract this into its own file with a typed interface.” Saves hours.
• Review your own PR with Claude before opening it for human review. Highlight the diff, ask: “Review this like a senior engineer would. Flag bugs, missing edge cases, security issues.” The human reviewer focuses on intent and architecture; Claude catches the obvious stuff.

You’ll do this a thousand times over the program. The earlier you build the muscle memory, the more leveraged you’ll be.

12. The shortcut cheat sheet — print it, tape it next to your laptop

13. Hands-on: prove you’ve absorbed this

Open a terminal in VS Code (Ctrl + `). Run:

cd ~/summer-training-practice/practice
code .

That last command opens the current folder as a VS Code workspace. (If code isn’t recognized, open the Command Palette and run “Shell Command: Install ‘code’ command in PATH.”)

In your VS Code workspace:

1. Create a new file app.tsx from the file Explorer.
2. Type a short React component (Claude Code will help if you ask).
3. Use Cmd + D to multi-select all instances of a word and rename them.
4. Use Cmd + Shift + P → “Format Document” to autoformat.
5. Open the integrated terminal and run git status.
6. Open the Source Control panel and stage your changes.
7. Type a commit message and click the checkmark.

If all of that worked, take a screenshot of VS Code (showing the file, terminal, and Source Control panel together) and post it in #wins on Discord with “Module 0.4 complete.” You’re VS-Code-fluent enough for Day 1.

What’s next

VS Code is the home; Claude Code is your most-used companion inside it. The next Get Started module — Browser DevTools Tour — covers the other environment you’ll spend hours in: the browser’s developer console, where every running React app is debugged. See you there.