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.

Follow the link — VS Code will open and offer to install:

Method 2: Through VS Code#

  1. Open VS Code
  2. Press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux) — the extensions panel opens
  3. Type Claude Code in the search bar
  4. Click Install

Method 3: Via Command Palette#

  1. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
  2. Type “Claude Code”
  3. 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:

  1. You’ll see the Claude Code panel (usually on the right)
  2. On first use, VS Code will ask you to sign in
  3. 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.js

Claude 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#

  1. Select a code fragment with your mouse in the editor
  2. Claude automatically sees what you’ve selected
  3. 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#

  1. Open your JetBrains IDE
  2. Go to SettingsPlugins
  3. Find Claude Code in the marketplace
  4. Click Install
  5. 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
> /ide

The /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:#

  1. Install the Claude Code extension
  2. Open any project
  3. Type in the Claude panel: explain this project
  4. Select a code fragment and ask: what does this do?
  5. Use @ to mention a file

In JetBrains:#

  1. Install the Claude Code plugin
  2. Press Cmd+Esc / Ctrl+Esc
  3. 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!)