Skip to main content

VS Code Setup

Module: IDE Integrations | Lesson: 1 of 4 | Time: ~10 minutes

What You Will Learn​

  • How to install the Claude Code extension for VS Code
  • How to connect the extension to your account
  • Key configuration options for the VS Code integration

Prerequisites​

Why Use Claude Code in VS Code?​

So far in this tutorial, you have used Claude Code entirely from the terminal -- PowerShell or Windows Terminal. That works well, but there is an even more convenient way: running Claude Code directly inside Visual Studio Code (VS Code), the popular free code editor from Microsoft.

When Claude Code runs inside VS Code, it can:

  • See the file you have open and make changes right in the editor
  • Show diffs (before/after comparisons) that you can accept or reject with one click
  • Access the VS Code terminal without you switching windows
  • Reference files using @ mentions instead of typing full paths

Think of it this way: the terminal version of Claude Code is like texting a contractor your instructions. The VS Code version is like having the contractor standing next to you at your desk, looking at the same screen.

info

The VS Code extension for Claude Code is a companion to the terminal version, not a replacement. Both use the same underlying Claude Code engine and the same account. You can use whichever is more convenient for the task at hand.

Prerequisites​

Before you start, make sure you have:

  1. VS Code installed. If you do not have it yet, download it from https://code.visualstudio.com. The installation is straightforward -- just run the installer and accept the defaults.

  2. Claude Code installed and authenticated. You should be able to run claude --version in PowerShell and get a version number. If not, go back to Module 01.

Installing the Claude Code Extension​

  1. Open VS Code. You can launch it from the Start menu, or type code in PowerShell.

  2. Open the Extensions panel. Click the square icon on the left sidebar (it looks like four small squares with one detached), or press Ctrl+Shift+X.

  3. Search for Claude Code. In the search box at the top of the Extensions panel, type:

    Claude Code

  4. Find the official extension. Look for the extension published by Anthropic. Make sure it is the official one -- check that the publisher name says "Anthropic" and it has a verification badge.

  5. Click Install. Click the blue Install button. The installation takes just a few seconds.

  6. Reload if prompted. VS Code might ask you to reload the window. If so, click Reload.

warning

Be careful to install the correct extension. Search results may include unofficial or third-party extensions with similar names. Always verify the publisher is Anthropic.

Connecting the Extension​

After installation, you need to connect the extension to your Claude Code account:

  1. Open the Claude Code panel. You should see a new Claude Code icon in the left sidebar (or the activity bar). Click it to open the Claude Code panel.

  2. Authentication. The extension uses the same authentication as your terminal Claude Code. If you have already authenticated in the terminal, the extension should pick up your credentials automatically. If not, the extension will walk you through the authentication process -- follow the on-screen instructions.

  3. Verify the connection. You should see a chat interface in the Claude Code panel. Try typing a simple message like:

    Hello, are you working?

    If Claude responds, you are connected.

tip

If the extension cannot find your credentials, try running claude in the VS Code integrated terminal (press Ctrl+` to open it) and authenticating there. The extension shares credentials with the terminal version.

Configuration​

The Claude Code extension has a few settings you can customize. To access them:

  1. Press Ctrl+, (comma) to open VS Code Settings
  2. Search for "Claude Code" in the settings search bar
  3. You will see available options

Key settings to know about:

SettingWhat It Does
ThemeControls the visual appearance of the Claude Code panel
Allowed ToolsWhich tools Claude is permitted to use
NotificationsWhether to show notifications when Claude completes tasks

For now, the defaults work fine. You can revisit these settings as you get more comfortable.

Your First Use in VS Code​

Let's take the extension for a spin:

  1. Open a folder. In VS Code, go to File > Open Folder and navigate to your claude-tutorials folder (or any project folder). Click Select Folder.

  2. Open a file. In the Explorer panel (left sidebar, top icon), click on any file to open it in the editor.

  3. Open the Claude Code panel. Click the Claude Code icon in the sidebar.

  4. Ask Claude about the file. Type:

    What does this file do?

    Claude will read the currently open file and explain it to you.

  5. Ask Claude to make a change. Type:

    Add a comment at the top of this file explaining what it does

    Claude will propose an edit. You will see a diff view showing exactly what will change (old version on the left, new version on the right). You can Accept or Reject the change.

info

The diff view is one of the biggest advantages of the VS Code extension. Instead of reading a terminal description of what changed, you can see the exact lines that were added, removed, or modified -- highlighted in green and red.

The VS Code Terminal Integration​

The VS Code extension also integrates with the built-in terminal. You can:

  • Press Ctrl+` to open the integrated terminal
  • Run claude to start an interactive terminal session right inside VS Code
  • Use both the panel and the terminal side by side

This is useful when you want the visual diff features of the panel for file edits, but the full power of the terminal for complex multi-step tasks.

Try It Yourself​

  1. Install the extension following the steps above.

  2. Open a project folder in VS Code and verify the extension connects.

  3. Ask Claude to explain a file. Open any file and ask Claude what it does.

  4. Ask Claude to edit a file. Request a small change and practice using the diff view to accept or reject it.

  5. Try the terminal. Open the VS Code integrated terminal with **Ctrl+** and run claude` to confirm the terminal version also works inside VS Code.

What You Learned​

  • The Claude Code VS Code extension brings Claude directly into your editor
  • Install it from the Extensions panel by searching for "Claude Code" by Anthropic
  • The extension shares authentication with your terminal Claude Code installation
  • VS Code shows file edits as visual diffs you can accept or reject
  • The integrated terminal lets you run the full terminal version of Claude Code inside VS Code
Help Us Improve

How was this lesson? Take 2 minutes to share your feedback — it helps us make the tutorials better for everyone.

Give Feedback →

Next Up​

Next: Using Claude in VS Code