VS Code Setup
VS Code is the editor. Claude Code is the AI extension that runs inside it. Together they are the build environment for this entire workflow. Here's how to get both installed and ready to use — from zero to your first prompt in under 10 minutes.
Two Things. That's It.
The whole setup is VS Code plus the Claude Code extension. Nothing else required to start building.
VS Code
Visual Studio Code is a free code editor made by Microsoft. It's where your project files live. You don't have to write code in it — you just use it to open your project folder and run Claude Code inside it.
Claude Code Extension
Claude Code is an AI extension that runs inside VS Code. It reads your project files, writes code, edits files, and runs terminal commands — all from a chat panel on the side of your screen. This is the engine of the workflow.
Your Claude Account
You need a Claude account to sign into Claude Code. Free accounts work but have limited usage. Claude Pro ($20/month) gives you 5x more and is the right tier for active building. You sign in once and you're connected.
Get Set Up in Under 10 Minutes
Follow these steps in order. Each one takes 2–3 minutes.
Download VS Code
Go to code.visualstudio.com and click the download button for your operating system (Windows, Mac, or Linux). Run the installer. Accept the defaults — you don't need to change anything during installation.
VS Code is free, made by Microsoft, and is used by millions of developers. It's not just for beginners — this is professional-grade software that happens to be accessible enough for non-developers to use effectively with AI.
Install the Claude Code Extension
Open VS Code. On the left sidebar, click the Extensions icon (it looks like four squares). In the search bar at the top of the extensions panel, type "Claude". Look for the extension published by Anthropic — it's called Claude Code. Click Install.
Alternatively: press Ctrl+Shift+X (Windows) or Cmd+Shift+X (Mac) to open the Extensions panel directly.
The publisher should say Anthropic. There are other Claude-related extensions — install the official one from Anthropic only. It's the top result when you search "Claude".
Sign In to Your Claude Account
After installation, the Claude Code panel will appear on the left sidebar (it looks like a small Claude icon). Click it. You'll be prompted to sign in — click Sign in with Claude.ai. A browser window will open. Log in with your Anthropic account. Come back to VS Code. You're connected.
You only do this once. After sign-in, Claude Code remembers your account across sessions. You don't need to sign in again unless you explicitly sign out.
Open Your Project Folder
In VS Code, go to File → Open Folder. Navigate to the folder where you want to build your project. Select it. VS Code will now show that folder in the left file panel — this is your project workspace.
If you're starting fresh, create a new folder first (on your desktop or wherever you keep projects) and then open it in VS Code. Give it a clear name — your project name in lowercase, no spaces.
Drop your CLAUDE.md file directly into this project folder before your first Claude Code session. It should be at the root level — not inside a subfolder. That's what Claude Code will read first.
Send Your First Message to Claude Code
Open the Claude Code panel (click the Claude icon in the sidebar, or press Ctrl+Shift+C). In the chat input at the bottom, type your first message. For a new project, use this exact text:
"Read the CLAUDE.md file in this project folder. Then write a complete numbered build plan — every step required to build this from scratch. Number every step. Do not skip anything."
Claude Code will read your CLAUDE.md, understand your project, and return a numbered build plan tailored to exactly what you described. That plan is your roadmap. Save it.
The 5 Things You Actually Need to Know
You don't need to learn VS Code. You need to know 5 things. Here they are.
How to Open a Folder
File → Open Folder. This sets your workspace. All of Claude Code's file operations happen inside this folder.
How to See Your Files
The Explorer panel on the left sidebar shows your project files. Click any file to open it. Click the folder icon at the top of the sidebar if it's not already showing.
How to Open the Terminal
The terminal (command line) is where Claude Code runs commands like firebase deploy. Open it with the menu: Terminal → New Terminal.
How to Search Files
Need to find where a word or piece of code lives in your project? Use search across all files.
Two Settings Worth Changing
You don't need to touch VS Code settings to use Claude Code. But these two make the experience better.
Enable Auto Save
By default VS Code doesn't auto-save files. Turn it on so Claude Code's edits save immediately without you having to press Ctrl+S every time. Go to File → Auto Save and click it to enable. The checkmark means it's on.
Increase Font Size (if needed)
If the text in VS Code is too small: go to File → Preferences → Settings, search for "font size", and change Editor: Font Size to 15 or 16. Easier on the eyes during long build sessions.
Nothing Else Required
You don't need to install Node, Python, Git, or any other tools to start building static HTML projects with Claude Code. Just VS Code and the extension. Claude Code will tell you if you need anything else for your specific project.
If Something Doesn't Work
These are the three problems that come up most often during setup.
Claude Code Panel Doesn't Appear After Install
Type: Extension IssueThe extension installed but the panel isn't showing in the sidebar. This usually means VS Code needs a restart.
Close VS Code completely and reopen it. The Claude icon should now appear in the left sidebar. If it still doesn't show: open the Extensions panel (Ctrl+Shift+X), find Claude Code, click the gear icon next to it, and select Enable.
Sign-In Loop — Browser Opens But Never Returns
Type: Auth IssueYou clicked sign in, the browser opened, you logged into Claude.ai, but VS Code never confirmed sign-in. You're stuck in a loop.
After signing in via the browser, look for a popup in VS Code asking to "Open Visual Studio Code" — click Open or Allow. If you missed it, go back to the Claude Code panel in VS Code and click Sign In again. The browser will re-open, you'll already be logged in on Claude.ai, and this time approve the redirect popup immediately.
Claude Code Doesn't See My CLAUDE.md File
Type: File LocationYou told Claude Code to read the CLAUDE.md and it says it can't find it or returns generic answers that don't match your project.
Check two things: (1) the CLAUDE.md file is in the root of the folder you opened in VS Code — not inside a subfolder. (2) VS Code has the right folder open — check the folder name at the top of the Explorer panel on the left. If it shows a different folder than your project, do File → Open Folder and select the correct one.
Setup Complete. Now Build.
VS Code is open, Claude Code is installed, your CLAUDE.md is in the folder. That's the whole setup. The next step is to send that first message and let Claude build.