Tech • AI • Robotics • Game
How To Use Claude Code In Visual Studio Code - Step by Step
7/10TL;DR
Claude Code in Visual Studio Code can turn an empty folder into a working journal and to-do web app by creating files, installing dependencies, running terminal commands, and iterating through a series of focused prompts.
KEY POINTS
What Claude Code changes
Claude Code, Anthropic’s coding agent, is positioned as the step between AI-generated code and a project that actually runs locally. Instead of only suggesting code in a chat window, it can act directly inside a project by creating and editing files, installing packages, running commands, and organizing the application structure. The goal is to remove the manual handoff that often stops beginners after code generation.
Access methods and pricing
The tool is available through a desktop app, a command-line interface, and a VS Code extension. The extension is presented as the most beginner-friendly option because the AI panel, source files, editor, and integrated terminal all remain in one workspace. Use requires a paid Claude plan: Claude Pro at $20 per month or Claude Max at $100 or $200 per month, with Pro described as sufficient for a small app build.
Initial setup in VS Code
The workflow starts with installing Visual Studio Code on macOS, Windows, or Linux, then opening the Extensions panel and installing the official Claude Code extension published by Anthropic. After signing in with a Claude account, users create a new empty project folder, open it in VS Code, and verify that the integrated terminal points to the correct directory. That folder becomes the working directory for every file creation and terminal command.
A four-prompt build strategy
Rather than sending one large request, the app is built through four focused prompts. The first prompt scaffolds a web app, installs dependencies, launches a basic browser-ready project, and adds navigation between a journal view and a to-do view. This staged method is intended to reduce breakage by testing a stable base before new features are layered in.
Journal feature buildout
The second prompt expands the journal section into a usable feature. It adds a form for writing entries, captures mood and related information, displays past entries in a scrollable list, and supports deletion. It also adds persistence so entries remain available across sessions, turning the app from a static shell into a stateful personal tool.
To-do feature and filtering
The third prompt develops the to-do section without disrupting the journal functionality already in place. Users can create tasks, mark them complete, filter items, and delete them, while completed tasks receive a distinct visual treatment. A key test is that both sections continue to function independently and that previously saved journal data remains intact.
Design pass and responsiveness
The final prompt focuses purely on presentation rather than functionality. It requests a redesign with an Evernote-like feel, a toggleable dark and light theme, improved typography and spacing, and responsive layouts for smaller screens. Handling design in a separate pass allows the agent to polish the entire app after the core features are already working.
What the finished app demonstrates
The resulting application is a complete journal and to-do web app that works on desktop and mobile screen sizes, preserves data between sessions, and contains real local source code in the project folder. Because the files are stored locally, the project can be modified, deployed, or hosted on any server. That portability is framed as a major distinction from closed no-code environments.
CONCLUSION
The workflow presents Claude Code as a practical way to move from an empty folder to a functioning application inside VS Code with minimal manual intervention. Its main advantage is not just code generation, but direct project execution through focused prompts, local files, and iterative testing.
Ask a question