Why This Matters#
The terminal is a powerful tool, but many people prefer working in a graphical code editor where everything is visual: files on the left, code in the center, and Claude Code on a side panel. In this lesson, we’ll set up Claude Code in the two most popular environments — VS Code and JetBrains.
Part 1: Claude Code in VS Code#
What is VS Code#
VS Code (Visual Studio Code) — a free code editor by Microsoft. The most popular in the world. Download it at code.visualstudio.com.
Don’t confuse VS Code with Visual Studio — they are different programs. VS Code is lighter and simpler.
Installing the Extension#
Extension — an add-on that brings new features to VS Code.
Method 1: Via Link#
Follow the link — VS Code will open and offer to install:
Method 2: Through VS Code#
- Open VS Code
- Press
Cmd+Shift+X(Mac) orCtrl+Shift+X(Windows/Linux) — the extensions panel opens - Type Claude Code in the search bar
- Click Install
Method 3: Via Command Palette#
- Press
Cmd+Shift+P(Mac) orCtrl+Shift+P(Windows/Linux) - Type “Claude Code”
- Select Open in New Tab
Command Palette — a quick command search in VS Code. Think of it as a “search bar for actions.”
Getting Started#
After installation:
- You’ll see the Claude Code panel (usually on the right)
- On first use, VS Code will ask you to sign in
- Enter your credentials — and you’re ready!
Key Features in VS Code#
Inline Diffs (Changes Right in the Code)#
When Claude proposes changes, you see them right in the file — green highlights what’s being added, red highlights what’s being removed. This is more visual than in the terminal.
Inline diff — displaying changes directly inside the file, not in a separate window.
@-Mentions for Files#
In the Claude Code input field, type @ and start entering a filename:
Explain the logic in @auth.jsClaude will automatically find the right file. Fuzzy search works — you don’t need to type the full name.
You can mention folders (with / at the end):
What's in @src/components/Code Selection#
- Select a code fragment with your mouse in the editor
- Claude automatically sees what you’ve selected
- Type a question — for example:
what does this code do?
The shortcut Option+K (Mac) / Alt+K (Windows/Linux) inserts a reference to the selected code with line numbers.
Working Modes#
At the bottom of the input field, there’s a mode indicator:
- Normal — Claude asks permission before every action
- Plan — Claude first describes a plan, then waits for approval
- Auto-accept — Claude makes changes without confirmation
Click the indicator to switch modes.
Conversation History#
Click the dropdown menu at the top of the Claude Code panel — it opens a list of past conversations. You can search by keywords or browse by date.
Multiple Conversations#
You can open multiple Claude Code tabs simultaneously — through Command Palette → Open in New Tab. Each tab is a separate conversation.
Part 2: Claude Code in JetBrains#
What is JetBrains#
JetBrains — a company that makes professional code editors:
| IDE | For Which Language |
|---|---|
| IntelliJ IDEA | Java, Kotlin |
| PyCharm | Python |
| WebStorm | JavaScript, TypeScript |
| PhpStorm | PHP |
| GoLand | Go |
| Android Studio | Android apps |
IDE (Integrated Development Environment) — a development environment. Essentially, an advanced code editor with additional tools.
Installing the Plugin#
- Open your JetBrains IDE
- Go to Settings → Plugins
- Find Claude Code in the marketplace
- Click Install
- Restart the IDE
Or install directly from the JetBrains Marketplace.
The plugin requires Claude Code CLI to be already installed (Lesson 2).
Features in JetBrains#
Quick Launch#
Press Cmd+Esc (Mac) or Ctrl+Esc (Windows/Linux) — the Claude Code panel opens.
Viewing Changes#
Code changes are displayed in JetBrains’ standard diff viewer — familiar and convenient.
Selection Context#
The current selection in the editor and the open file are automatically passed to Claude — you don’t need to explain what you’re looking at.
File References#
Press Cmd+Option+K (Mac) or Alt+Ctrl+K (Windows/Linux) to insert a file reference in the format @File#L1-99.
Diagnostics#
Errors from the IDE (syntax errors, linter warnings) are automatically passed to Claude Code. It sees the same errors you do.
Working from an External Terminal#
If you run Claude Code in a terminal (not the built-in one), you can connect it to your IDE:
claude
> /ideThe /ide command links the terminal Claude Code session to your JetBrains IDE.
What to Choose: Terminal, VS Code, or JetBrains?#
| Criterion | Terminal | VS Code | JetBrains |
|---|---|---|---|
| Simplicity | Medium | High | Medium |
| Visual clarity | Low | High | High |
| Speed | High | High | Medium |
| For beginners | ⭐⭐ | ⭐⭐⭐ | ⭐⭐ |
| IDE cost | Free | Free | Paid* |
*JetBrains has free versions (Community Edition) for IntelliJ IDEA and PyCharm.
Recommendation for beginners: start with VS Code — it’s free, intuitive, and Claude Code works great in it.
Practice#
In VS Code:#
- Install the Claude Code extension
- Open any project
- Type in the Claude panel:
explain this project - Select a code fragment and ask:
what does this do? - Use
@to mention a file
In JetBrains:#
- Install the Claude Code plugin
- Press
Cmd+Esc/Ctrl+Esc - Try the same tasks
Lesson Summary#
✅ In VS Code, Claude Code installs as an extension in a couple of clicks
✅ Inline diffs show changes right in the file — visual and clear
✅ @-mentions let you point Claude to specific files and folders
✅ In JetBrains, Claude Code works as a plugin with diff and diagnostics support
✅ For beginners, the best choice is VS Code (free + friendly interface)
🎉 Congratulations!#
You’ve completed all 6 lessons of Level 1: Beginner. Now you know how to:
- Understand what Claude Code is and how it differs from regular chatbots
- Install Claude Code on any OS
- Sign in and start working
- Have conversations, accept and reject changes
- Work with code, Git, and commands
- Use Claude Code in VS Code and JetBrains
Next step: Level 2 — Intermediate User (coming soon!)