Module 04 — VS Code

🎯 Goal: Install VS Code and learn to use it as your "window" into your files and projects. ⏱️ Time: ~1 hour.

What is VS Code, and why do I need it if Claude Code does the coding?

VS Code (Visual Studio Code) is a free editor from Microsoft. Even though Claude Code writes the code, you'll want VS Code to:

• See your files in a nice sidebar (much friendlier than ls)
• Read what Claude Code created so you can follow along
• Make small tweaks yourself when you get confident
• Preview results — spreadsheets, text files, reports

Think of it as the well-lit room where your project lives. The terminal is for doing; VS Code is for seeing.

Install VS Code

Now that you have Homebrew, this is one line:

brew install --cask visual-studio-code

(Remember: --cask because it's a full app with a window.)

When it finishes, open it from Applications or with Cmd + Space → "Visual Studio Code".

Alternative: If Homebrew is blocked on your laptop, download it directly from https://code.visualstudio.com and drag it to Applications.

The one setting to turn on first: the code command

This lets you open VS Code from the terminal, which is incredibly handy.

1. Open VS Code.
2. Press Cmd + Shift + P to open the Command Palette (a search box for every VS Code action — your most useful shortcut).
3. Type: Shell Command: Install 'code' command in PATH and press Enter.

Now, from Ghostty, you can type code . (note the dot) to open the current folder in VS Code. Test it later in the hands-on.

A tour of the VS Code window

When you open a folder, you'll see:

You can run Claude Code inside VS Code's built-in terminal or in Ghostty — whichever you prefer. Many people keep VS Code open to see files and Ghostty beside it for Claude Code. Do what feels comfortable.

Hands-on Lesson 1 — Open a folder and poke around (20 min)

1. In Ghostty: cd ~/claude-practice (the folder from Module 02).
2. Run: code .
   • VS Code opens showing that folder. The . means "this current folder."
3. In the Explorer sidebar, click report.txt (or any file you made).
4. Type some text into it. Notice the dot/circle on the tab — that means "unsaved changes."
5. Press Cmd + S to save. The dot disappears.

Congratulations — you've edited and saved a file in VS Code.

Hands-on Lesson 2 — The built-in terminal (15 min)

1. In VS Code, press Ctrl plus the backtick key (the ` key at the top-left of your keyboard, above Tab) — or use the menu Terminal → New Terminal.
2. A terminal panel opens at the bottom, already "standing in" your project folder.
3. Run ls, pwd — the same commands from Module 02 work here.

This matters because soon you'll run claude in this panel and watch files appear in the sidebar in real time. Seeing and doing, side by side.

Two extensions worth installing (10 min)

Extensions add features. Install these two — they're the only ones you need for a while:

1. Click the Extensions icon in the far-left activity bar (looks like four squares).
2. Search for and install:
   • Python (by Microsoft) — makes Python files friendlier.
   • Rainbow CSV — colors spreadsheet-style files so they're readable.

That's enough. Don't go on an extension shopping spree; it's a common rabbit hole.

A few shortcuts that pay for themselves

You'll absorb these naturally. Cmd + Shift + P is the one to remember — when you forget how to do anything in VS Code, open it and search.

✅ You're done with this module when

• VS Code is installed and opens.
• code . from the terminal opens the current folder.
• You can open a file, edit it, and save it.
• You can open the built-in terminal panel and run ls in it.
• You installed the Python and Rainbow CSV extensions.

Next: Module 05 — Git Basics.