Before you write a single line of production code, settle one thing: your editor is your cockpit. In 2026, that means VS Code paired with Claude. This chapter gets both configured in under fifteen minutes — and by the end you'll have made your first AI-assisted edit.
1.1 Installing the Claude Code extension
Open VS Code. Press Ctrl+Shift+X (Windows / Linux) or Cmd+Shift+X (Mac) to open the Extensions panel. Search for Claude and install the extension published by Anthropic.
Once installed you'll see a new icon in the Activity Bar — a small hexagon. Click it to open the Claude panel, then sign in with your Anthropic account. Free-tier access is enough to follow every example in this book.
1.2 Your first inline completion
Create a new file called fibonacci.js. Type the following comment and nothing else:
// Returns the nth Fibonacci number using memoization
Now press Tab. Claude completes the function. This is the core gesture of AI-native development — you describe intent, Claude drafts, you review and accept. Everything in this series builds on that loop.
Read the output carefully. Does it match what you intended? If not, press Escape, refine your comment, and try again. The quality of the comment is the quality of the result.
1.3 The three interaction surfaces
The extension gives you three ways to work with Claude:
- Inline completions — appear as ghost text as you type. Accept with Tab, dismiss with Escape.
- The chat panel — open with Ctrl+L. Ask questions about your codebase, paste error messages, request refactors, get explanations.
- Inline edits — select a block of code, press Ctrl+K, type a natural-language instruction. Claude rewrites the selection in place.
Each surface has its role. Completions are for flow — keep your hands on the keyboard and let Claude fill in what comes next. The chat panel is for reasoning — when you want to ask why something is broken or how to structure a feature. Inline edits are for surgical changes — refactoring a loop, converting callback-style to async/await, or adding input validation to an existing function.
1.4 Configuring the workspace
Open your workspace settings (Ctrl+,) and search for Claude. Two settings matter most at this stage:
- claude.completions.enabled — on by default. Turn this off if you find the ghost text distracting during exploratory work.
- claude.context.includeOpenFiles — when enabled, the chat panel automatically sends the contents of your open editor tabs as context. Useful for multi-file questions; disable it for sensitive codebases.
Leave everything else at defaults for now. You'll revisit these settings in Chapter 4 when we add a second contributor and need to think about what context is shared.
What's next
Chapter 2 starts the actual application. We'll scaffold a Next.js project, set up a Postgres database, and write our first real feature — a public API endpoint — entirely with Claude driving the implementation. By the end of Chapter 2 you'll have something that runs in a browser.