Adding Claude-Code Visual Studio Code extension to Chat Panel

claude-code-vscode-sidebar-setup.md

How to Configure Claude Code Extension in Visual Studio Code Side Panel

Last Updated: October 7, 2025
Extension Version Tested: Claude Code for VS Code v2.0.10

This guide will help you set up the Claude Code extension in Visual Studio Code's side panel for easy access. You can can also use this process for other chat extentions like Codex.

Prerequisites

• Visual Studio Code installed on your system
• Internet connection for extension installation

Step-by-Step Instructions

Step 1: Install the Claude Code Extension

1. Open Visual Studio Code
2. Navigate to the Extensions view by clicking the Extensions icon in the Activity Bar (or press Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Claude Code" in the extensions marketplace
4. Find the official Claude Code extension by Anthropic
5. Click Install to add the extension to your VS Code

Alternative: Install directly from the marketplace link: Claude Code Extension

Step 2: Configure Activity Bar Orientation

1. Open VS Code Settings:
   • Windows/Linux: Ctrl+,
   • macOS: Cmd+,
2. In the search bar, type "activity bar orientation"
3. Find the setting: Workbench › Appearance › Activity Bar: Orientation
4. Change the value from "horizontal" to "vertical"

This step ensures the side panel layout works optimally with the Claude Code extension.

Step 3: Open Claude Code in Sidebar

1. Open the Command Palette:
   • Windows/Linux: Ctrl+Shift+P
   • macOS: Cmd+Shift+P
2. Type "Claude" in the command palette
3. Select "Claude Code: Open in sidebar" from the dropdown menu
4. The Claude Code interface will appear in the sidebar

Step 4: Move to Chat Panel

1. Locate the Claude Code icon in the sidebar
2. Click and drag the icon from the sidebar
3. Drop it into the chat panel area

Verification

To verify the setup is working correctly:

1. You should see the Claude Code interface in the chat panel.
2. You can start a conversation with Claude by typing in the chat interface
3. The extension should be ready to assist with your coding tasks

Troubleshooting

Extension not appearing: Make sure you've installed the official Claude Code extension by Anthropic, not a similar extension with a different name.

Sidebar not showing: Verify that the Activity Bar orientation is set to "vertical" in your VS Code settings.

Command not found: Ensure the extension is properly installed and VS Code has been restarted after installation.

Additional Resources

• Claude Code Extension Documentation
• Visual Studio Code Extensions Guide

---

This guide has been tested and verified to work with Visual Studio Code and Claude Code for VS Code v2.0.10 (last updated October 7, 2025).

The issue is how do you get it to stay there between VS Code restarts. I have to add it to the sidebar after each restart.

Good catch! ATM (10/09), refreshing or hiding the panel causes the Claude-code chat panel to disappear.

As soon as you reexecute step 3 (Claude Code: Open in sidebar) the claude-code side bar reopens in the chat panel, and has the history of recent chats.

Because the claude-code extension is still newer, there are still some refinements to be had.

What I did was add a keyboard binding to enable reopening of the Claude-code sidebar with Ctrl+Esc.

My guess is that as more people use the Claude-code sidebar in VSC, the experience will continue to be refined.

The issue is how do you get it to stay there between VS Code restarts. I have to add it to the sidebar after each restart.

+1 - 10/22 - Same issue on macOS with latest VSCode and Claude Code Extension v2.0.25, I have to reexecute step 3 ("Claude Code: Open in sidebar" command) every time VSCode restarts.