A Comprehensive Guide to Using Claude Code in VS Code for AI-Powered Coding Help

Anthropic’s Claude Code brings AI-powered coding assistance directly into your VS Code environment via its official extension. This integration offers a native graphical interface, making it easier to get help with code explanations, debugging, edits, and more—all without leaving your IDE.

Before installing the Claude Code extension, ensure you meet the following requirements: VS Code version 1.98.0 or higher; an Anthropic account (any paid subscription like Pro, Max, Team, Enterprise, or a Claude Console account—no API key needed for direct use). For users accessing Claude via third-party providers like Amazon Bedrock or Google Cloud’s Agent Platform, refer to specific setup instructions for those services.

Installing the extension is straightforward. You can either click the direct installation link for VS Code (or Cursor, another IDE), or search for "Claude Code" in the VS Code extension panel (accessed via Cmd+Shift+X on Mac or Ctrl+Shift+X on Windows/Linux) and click "Install". The extension works with VS Code forks like Devin Desktop or Kiro—search for it in their extension views or install from the Open VSX Registry. If your editor can’t install the extension, use the standalone CLI and run claude in the integrated terminal. Restart VS Code or reload the window (via "Developer: Reload Window" in the command palette) if the extension doesn’t appear after installation.

Once installed, you can access Claude Code through multiple ways in VS Code:
- Click the Spark icon in the editor toolbar (top-right corner, visible when a file is open).
- Use the Spark icon in the left activity bar to view session lists or start new ones.
- Open the command palette (Cmd+Shift+P or Ctrl+Shift+P), type "Claude Code", and select an option like "Open in New Tab".
- Click the "✱ Claude Code" status in the bottom-right corner (available even without open files).

First-time users will need to log in: click the "Login" button in the panel and complete authorization in your browser. If you see a "Not logged in · Run /login" message later, the extension will re-open the login screen; if not, reload the window. Note that if you have an ANTHROPIC_API_KEY set in your shell but still see a login prompt, launch VS Code from the terminal (using code .) to inherit environment variables, or log in with your Claude account directly.

To send a prompt, select the code you want help with—Claude will automatically see it. Use Option+K (Mac) or Alt+K (Windows/Linux) to insert @-mentions (e.g., @file.ts#5-10) for specific line ranges. You can ask Claude to explain code, debug issues, or make changes.

When Claude suggests edits, it shows a side-by-side diff of original and proposed changes. You can accept, reject, or edit the suggested changes before approval. If you modify the diff directly, Claude will be aware of your edits and adjust accordingly.

The prompt box in Claude Code offers several useful features:
- Permission Modes: Switch between Manual (asks before edits/commands), Plan (describes actions and waits for approval), and Edit Automatically (makes changes without asking) via the mode indicator at the bottom of the prompt box.
- Command Menu: Type "/" to access commands like attaching files, switching models, viewing usage stats (/usage), or starting a Remote Control session (/remote-control).
- Context Indicator: Shows how much of Claude’s context window you’re using—Claude auto-compresses when needed, or you can run /compact manually.
- Extended Thinking: Let Claude spend more time on complex problems (toggle via the command menu). Its reasoning appears as folded blocks in the conversation; click to expand or use Ctrl+O to toggle all blocks.

Sources

• Claude Code Documentation for VS Code: https://code.claude.com/docs/zh-CN/vs-code