Code editors (and why VS Code)

A code editor is to a developer what a kitchen is to a chef — the space you work in every single day. Picking one is mostly a settled decision now: VS Code(made by Microsoft, free, runs on Mac, Windows, and Linux) is the default. It's what Claude Code integrates most cleanly with, and it's what you'll see in nearly every tutorial.

What makes a code editor different from a text editor?

Any program can edit text. Notepad can edit code. So can Microsoft Word, badly. A real code editor adds features specifically for the job:

• Syntax highlighting— colours different parts of your code so it's easier to scan. Keywords one colour, strings another, numbers another.
• Auto-completion— suggests the rest of a word as you type, so you don't have to remember exact names.
• Error detection — underlines mistakes in red as you type, before you ever run the code.
• File explorer — a sidebar showing every file in your project so you can jump around fast.
• Integrated terminal — a terminal inside the editor window. No alt-tabbing.
• Git integration— see what's changed since the last commit, line by line, inline.

That last one is huge once you're working with Claude Code: you can see at a glance what changed in any file.

Installing VS Code

Go to code.visualstudio.com (not anywhere else), download the installer for your operating system, and run it. Standard install wizard. On Mac, drag it to Applications. On Windows, click through the prompts. On Linux, use your package manager or the deb/rpm file from the site.

The five panels that matter

When you open VS Code, you'll see roughly this layout:

1. Activity bar (far left) — icons for switching between major modes: file explorer, search, source control, debug, extensions.
2. Sidebar (left) — content for whichever mode is active. Most of the time it shows the file tree.
3. Editor area (centre) — where your code goes. You can split this into multiple columns or open multiple tabs.
4. Panel (bottom, toggle with Ctrl/Cmd + `) — terminal, problems, output, debug console.
5. Status bar (very bottom) — current branch, errors, encoding, line/column.

The handful of shortcuts that turn you into a wizard

You don't need to memorise everything. These few pay back the time within a week:

• Ctrl/Cmd + P — quick open. Start typing a filename; jump to it instantly.
• Ctrl/Cmd + Shift + P — command palette. Every action VS Code can do, searchable by name.
• Ctrl/Cmd + B — toggle the sidebar.
• Ctrl/Cmd + ` — toggle the terminal.
• Ctrl/Cmd + / — comment or uncomment the current line.
• Ctrl/Cmd + D — select the current word, then again to select the next occurrence. Great for renaming.

Extensions

Extensions add features to VS Code. There are tens of thousands. You do not need most of them. A short starter list:

• Claude Code — the official extension. Lets the editor talk to your Claude Code session, opens files when Claude opens them, shows diffs inline.
• Prettier — auto-formats your code on save, so it always looks consistent.
• A language pack for whatever you're writing (Python, ESLint for JavaScript, etc.) — VS Code prompts you when one would help.

Resist the urge to install dozens of extensions on day one. Every extension costs a little memory, a little startup time, and a little attention. Add them as you discover gaps.

Opening a project

The right mental move: open a folder, not a file. VS Code and Claude Code both treat the open folder as the project root — the boundary of what they consider "your project."

# From the terminal, navigate to your project folder
cd ~/Projects/my-website

# Open the current folder in VS Code
code .

That code .command opens VS Code with the current folder as the workspace. The dot means "here." If you don't have codeas a terminal command yet, open VS Code once and run "Shell Command: Install 'code' command in PATH" from the command palette.

VS Code + Claude Code together

The intended workflow looks like this:

1. VS Code on the left half of your screen, showing your project.
2. A terminal on the right (either VS Code's integrated terminal or a separate one) running claude.
3. You talk to Claude in the terminal; Claude opens files in VS Code when it reads them; you scroll, scan, sanity-check; you reply.

That's the pattern. Two windows, both showing the same project, moving in sync. Get that set up early; you'll use it constantly.