Use Claude Code from VS Code on Mac

You’ve installed Claude Code on your Mac - now you want a visual editor to work with your code. VS Code lets you edit files visually while running Claude Code in the integrated terminal. Think of it as having your code editor and AI assistant side by side in one window.

Key Concepts

VS Code - A free code editor from Microsoft that runs on Mac
Integrated Terminal - A terminal panel inside VS Code where you run Claude Code
Explorer Panel - The file browser on the left side of VS Code

What You’ll Need

Finished Installing Claude Code on Mac
Finished VS Code Basics
10-15 minutes

Step 1: Start VS Code

Open Finder and go to Applications
Find Visual Studio Code and double-click it
If you see a warning “Visual Studio Code is an app downloaded from the internet”, click Open
VS Code opens with a Welcome tab - you can close this tab

Tip: Right-click VS Code in the Dock and select Options > Keep in Dock for easy access later.

Step 2: Create a Project Folder

Open Finder
Click Documents in the left sidebar
Click File in the menu bar, then New Folder
Name the folder test_claude

Step 3: Log In

Claude Code will first ask you to log in. Follow the instructions.

Press Enter to open a browser window
Log in or create an account with Anthropic
Copy the code and paste it back in the terminal
Press Enter

You are now logged in. You only need to do this once.

Step 4: Open the Folder in VS Code

In VS Code, click File in the menu bar, then Open Folder
Navigate to Documents and select the test_claude folder you created
Click Open
If prompted “Do you trust the authors of the files in this folder?”, click Yes, I trust the authors

You should now see TEST_CLAUDE in the Explorer panel on the left side.

Step 5: Start Claude Code

Open a new terminal: click Terminal in the menu bar, then New Terminal
A terminal panel appears at the bottom of VS Code
In the terminal, type:
```
claude
```
You’ll see a welcome message and the Claude Code prompt
Now you can use Claude Code while editing files in VS Code

Step 6: Test the Workflow

In Claude Code, type:

Write a short article explaining why LLMs like to use Markdown format. Save it as article.md

Claude Code creates the file - you’ll see article.md appear in the Explorer panel on the left
Click on article.md in the Explorer to view it in the editor
To preview the formatted article: right-click on the article.md tab and select Open Preview
You’ll see the Markdown rendered with proper headings, bullet points, and formatting

Reopening Claude in VS Code Later

After closing VS Code, here’s how to get back to your project:

Option A: Open VS Code, click File > Open Recent, and select test_claude
Option B: Open Terminal, navigate to your project with cd ~/Documents/test_claude, and type code .

VS Code remembers your recent folders, so Option A with Open Recent is usually the quickest.

Next Steps

Ask Claude Code to explain an existing codebase: “Explain what this project does”
Have Claude Code help you write new features: “Add a function that calculates the average of a list”
Use Claude Code to fix bugs: “This code gives an error, can you fix it?”
Try the Claude Code VS Code extension for a visual interface with inline diffs (search “Claude Code” in Extensions)

Troubleshooting

Terminal shows “zsh” but Claude Code won’t start - Make sure Claude Code is installed correctly; run claude --version to verify
“code” command not found in Terminal - In VS Code, click View in the menu bar, then Command Palette, type “shell command”, and select Shell Command: Install ‘code’ command in PATH
VS Code won’t open because it’s from an unidentified developer - Go to System Settings > Privacy & Security and click Open Anyway

Workflow Overview

VS Code provides the visual editor interface
Integrated Terminal runs Claude Code inside VS Code
Your files stay in your Documents folder (or wherever you choose)
Edit files in the editor, chat with Claude Code in the terminal - best of both worlds

Created by Steven Ge on December 10, 2025.