Using Claude in VS Code
Module: IDE Integrations | Lesson: 2 of 4 | Time: ~10 minutes
What You Will Learn
- How to use inline chat within VS Code
- How the terminal integration works
- How file operations appear in the editor
Prerequisites
- Completed VS Code Setup
The Claude Code Panel
When you open the Claude Code panel in VS Code (by clicking its icon in the sidebar), you get a chat interface that looks similar to the terminal version but with important visual advantages. Let's explore each feature.
Inline Chat
One of the most powerful features of the VS Code extension is inline chat -- the ability to talk to Claude while looking at your code. Here is how it works:
- Open a file in the editor.
- Select some code by clicking and dragging to highlight a section (or press Ctrl+A to select everything).
- Open the Claude Code panel and type your request. Claude will see both your message and the selected code.
For example, if you select a function and type:
Explain what this function does in simple terms
Claude will focus its explanation on just the code you selected, not the entire file.
You can also ask Claude to modify just the selected code:
Refactor this to use a for loop instead of forEach
Claude will propose changes only to the selected portion, leaving the rest of the file untouched. The diff view will highlight exactly what changed.
Selecting specific code before asking Claude is like pointing at something and saying "this part right here." It helps Claude give more targeted, useful responses.
@-Mentions for Files
In the terminal version of Claude Code, you reference files by typing their full path. In VS Code, you can use @-mentions -- just type @ followed by a filename:
@utils.js What does the formatDate function do?
Compare @header.css and @footer.css and tell me if there are any inconsistencies
@package.json What version of React is this project using?
When you type @, VS Code will show an autocomplete dropdown with files from your project. Select the file you want, and Claude will read it automatically.
This is much faster than typing full file paths, especially in projects with deep folder structures.
You can mention multiple files in a single message. Claude will read all of them and consider them together when answering your question.
Diff Review
Whenever Claude proposes a file edit in VS Code, you see it as a diff -- a side-by-side or inline comparison showing exactly what will change:
- Green lines are additions (new code Claude wants to add)
- Red lines are deletions (existing code Claude wants to remove)
- Unchanged lines provide context so you can see where the changes fit
You have several options when reviewing a diff:
| Action | What It Does |
|---|---|
| Accept | Applies the change to your file |
| Reject | Discards the change, keeping your file as-is |
| Accept in part | In some cases, you can accept individual hunks (sections) of a change |
Always read the diff before accepting. Even though Claude is usually accurate, it might occasionally remove a line you wanted to keep, or add something slightly different from what you intended. The diff view is your safety net -- use it.
Practicing with Diffs
Try this exercise:
- Open any file in VS Code.
- In the Claude Code panel, type:
Add detailed comments to every function in this file - When the diff appears, read through it carefully.
- If the comments look good, click Accept. If not, click Reject and try rewording your request.
Terminal Integration
The VS Code extension works alongside the integrated terminal. You can have both open at the same time:
- Claude Code panel (sidebar) -- best for file edits, diffs, and quick questions about code
- Integrated terminal (bottom panel, **Ctrl+
**) -- best for runningclaude` interactively for complex, multi-step tasks
Switching Between Panel and Terminal
There is no conflict between the two. You can:
- Use the panel to ask Claude to edit a file
- Switch to the terminal to run tests or git commands
- Go back to the panel to ask Claude to fix a test failure
They share the same project context (both see the same files), but they run as separate sessions. The panel does not know what you said in the terminal, and vice versa.
Start with the Claude Code panel for most tasks. It is more visual and easier to review changes. Switch to the terminal when you need to do something that involves multiple commands, complex prompts, or when you want the full power of headless mode (claude -p).
Useful Keyboard Shortcuts
Here are the most useful keyboard shortcuts for working with Claude Code in VS Code:
| Shortcut | Action |
|---|---|
| Ctrl+Shift+X | Open Extensions panel |
| Ctrl+` | Toggle integrated terminal |
| Ctrl+, | Open Settings |
| Ctrl+Shift+P | Open Command Palette (search for any VS Code command) |
| Ctrl+Z | Undo (works on file edits if you accidentally accept a bad change) |
If you accidentally accept a change from Claude that you did not want, press Ctrl+Z to undo it. VS Code's undo history works normally with changes made through the Claude Code extension.
Common Workflows
Here are some practical workflows that work especially well in VS Code:
1. Explain unfamiliar code Open a file, select a confusing section, and ask:
Explain this code. I'm a beginner.
2. Write tests Open a source file and ask:
Write unit tests for the functions in @calculator.js
3. Fix errors When you see red squiggly lines (VS Code error indicators), select the problematic code and ask:
This code has an error. Can you fix it?
4. Refactor Select a block of code and ask:
Refactor this to be more readable. Use descriptive variable names.
5. Generate documentation Open a file and ask:
Add JSDoc comments to all exported functions in this file
Try It Yourself
-
@-mention practice. Open a project with multiple files. In the Claude Code panel, type a question that references two files using
@:@README.md Is this documentation up to date based on @index.js? -
Diff practice. Ask Claude to make a change to a file, then carefully review the diff. Practice accepting and rejecting changes. Try rejecting one, rewording your request, and reviewing the new diff.
-
Selection practice. Open a file, select just one function, and ask Claude to improve it. Verify that the diff only affects the selected area.
-
Terminal and panel together. Use the panel to ask Claude to create a new file, then open the terminal and verify the file exists with
dir.
What You Learned
- Inline chat lets you select code and ask Claude about it or request changes to just that section
- @-mentions let you reference files by name instead of typing full paths
- Diff review shows exact changes with green (additions) and red (deletions) highlighting
- You can accept or reject every change Claude proposes before it modifies your file
- The panel and terminal work independently -- use the panel for visual tasks and the terminal for complex operations
- Ctrl+Z undoes accepted changes if you make a mistake
How was this lesson? Take 2 minutes to share your feedback — it helps us make the tutorials better for everyone.