VS Code for Beginners: The Setup and Shortcuts That Matter

Once your app outgrows a browser-based builder, you'll want to open the actual files. Visual Studio Code (VS Code) is the free editor most developers use, and the one AI coding tools most often plug into. You can be productive in it in an afternoon.

Getting started

Download it from code.visualstudio.com — it's free and runs on Windows, macOS, and Linux. (It's a different product from "Visual Studio," a much larger program.)

The key idea: open a folder, not a file. Use File → Open Folder and choose your project's top folder — the one containing package.json or your README. VS Code then understands the whole project: search works across it, the terminal starts there, and extensions find your settings.

You can also open it from a terminal, inside your project:

code .

(On macOS, run Shell Command: Install 'code' command in PATH from the Command Palette first.)

Finding your way around

The narrow bar on the left switches between views:

Explorer — your files and folders.
Search — find (and replace) text across every file.
Source Control — Git: see changed files, review differences, commit. (Git and GitHub for Beginners.)
Run and Debug — for stepping through code.
Extensions — add features.

The main area shows open files as tabs. At the bottom, a panel holds the terminal and the Problems list.

The shortcuts worth learning

Use Ctrl on Windows/Linux and Cmd on Mac.

Shortcut	What it does
`Ctrl/Cmd + P`	Quick Open — type part of a file name to jump to it
`Ctrl/Cmd + Shift + P`	Command Palette — every command, searchable
`Ctrl/Cmd + Shift + F`	Search across all files
Ctrl + `	Show/hide the terminal
`Ctrl/Cmd + /`	Comment/uncomment the selected lines
`F12`	Go to where something is defined
`Shift + F12`	Find everywhere something is used
`Ctrl/Cmd + D`	Select the next match of the current word (multiple cursors)
`Alt/Option + ↑ / ↓`	Move a line up or down

If you only learn two: Quick Open and the Command Palette. With those you can find anything else.

The built-in terminal

Press Ctrl + ` and a terminal opens at your project folder. Run npm install, npm run dev, git status, or claude here, next to your code. (The Terminal for Beginners.)

You can open several terminals — one running your dev server, one for commands — with the + button.

The Problems panel

Red and yellow squiggly underlines mark errors and warnings in your code. The Problems panel (Ctrl/Cmd + Shift + M) lists them all across the project. It's a fast way to spot the typo that's breaking the build, especially in TypeScript projects. (TypeScript for AI-Generated Code.)

Extensions worth installing

Keep it lean at first. A good starting set:

ESLint — flags likely bugs in JavaScript and TypeScript.
Prettier — formats code consistently on save. (Linters and Formatters Explained.)
The extension for your framework or styling — for example, Tailwind CSS IntelliSense.
Claude Code — Anthropic's extension, which runs Claude Code in a panel inside the editor and shows its proposed changes as diffs you can review.

Only install extensions from publishers you recognise; extensions can run code on your machine.

To have Prettier format on every save, open Settings (Ctrl/Cmd + ,), search for Format On Save, and tick it.

Reviewing changes

When an AI tool edits your files, VS Code's Source Control view shows every changed file. Click one to see a side-by-side diff: red is removed, green is added. Reviewing this before you commit is the single best habit you can build when working with AI. (How to Read a Diff.)

Settings that help beginners

Auto Save (File → Auto Save) — no more "why didn't my change show up?"
Word Wrap (Alt/Option + Z) — long lines wrap instead of running off the screen.
Zoom (Ctrl/Cmd + = / -) — for comfort.

VS Code and Claude Code

VS Code and Claude Code work well together but do different jobs. VS Code is where you read, navigate, and review. Claude Code is the agent that makes changes — in the VS Code panel, in the terminal, or on a remote workspace. Many people use VS Code to review what Claude Code did, file by file, before committing.

EasySpawn workspaces run Claude Code on a persistent remote machine, so your project, terminal, and running app live in one place you can reach from any device. See how it works or join the waitlist.