Claude VS Code 插件安装与配置教程

Claude Code 在 VS Code 里有两种使用方式：官方扩展（侧边栏交互）和内置终端（命令行交互）。两种方式各有优势，可以同时使用。本文从安装到配置全程讲解。

---

两种方式对比

	官方扩展	内置终端
安装难度	需要装插件	无需额外安装
交互方式	侧边栏对话框	命令行
适合场景	边写代码边对话	自动化、脚本、Agent 任务
文件修改	可视化 Diff	终端确认
推荐人群	新手、日常开发	进阶用户、自动化

两者可以同时开着——侧边栏做简单问答，终端跑复杂的多步骤任务。

---

方式一：安装官方 VS Code 扩展

第1步：打开扩展面板

在 VS Code 里按以下快捷键打开扩展市场：

• Windows / Linux：Ctrl + Shift + X
• macOS：Cmd + Shift + X

也可以点击左侧活动栏的积木图标（Extensions）。

---

第2步：搜索 Claude Code

在扩展面板顶部搜索框里输入：

Claude Code

注意：搜索结果里会出现多个相关扩展，要选 Anthropic 官方发布的那个。

识别官方扩展的方法：

• 发布者：Anthropic
• 扩展 ID：anthropic.claude-code
• 图标：橙色/渐变色的 Claude 标志

⚠️ 注意区分：市场上有第三方同名扩展，确认发布者是 Anthropic 再安装。

---

第3步：点击安装

点击扩展名称进入详情页，再点击蓝色的 Install 按钮。安装过程几秒钟完成，不需要重启 VS Code。

---

第4步：登录 Anthropic 账户

安装后，VS Code 左侧活动栏会出现 Claude Code 图标（类似聊天气泡形状）。点击图标，会看到登录提示。

点击 Sign in 按钮，浏览器会打开 Anthropic 的授权页面，用你的账号登录后点击授权，VS Code 里会自动完成登录。

---

第5步：确认安装成功

登录后，侧边栏会变成对话界面，显示输入框。这说明扩展安装并配置完成。

---

侧边栏扩展的主要功能

登录后，Claude Code 扩展提供以下核心功能：

1. 直接在编辑器里对话

选中一段代码后，在侧边栏里问 Claude Code 关于这段代码的问题，它会结合你打开的文件来回答。

2. 查看代码修改的 Diff

当 Claude Code 修改文件时，VS Code 会用内置的 Diff 视图对比修改前后，你可以选择接受或拒绝。

3. 查看对话历史

侧边栏顶部的历史按钮可以查看历次对话记录，方便恢复之前的上下文。

---

方式二：在 VS Code 内置终端使用 Claude Code

如果你已经按照前面的教程安装了 Claude Code CLI，可以直接在 VS Code 的内置终端里使用，不需要扩展。

第1步：打开内置终端

快捷键：

• Windows / Linux：Ctrl + `
• macOS：Cmd + `

或者菜单栏：终端（Terminal）→ 新建终端（New Terminal）。VS Code 内置终端默认在项目根目录打开。

---

第2步：运行 Claude Code

在终端里直接输入：

claude

Claude Code 会启动，显示版本信息和 > 提示符，可以直接开始输入。

---

第3步：把终端移到右侧（推荐）

默认终端在底部，放到右侧后可以同时看到代码和 Claude Code 对话，效率更高。

操作方式： 右键点击终端标签栏（显示 “终端” 或 “Terminal” 的那行），选择 将面板移到右侧（Move Panel to Right）。

移动后，左边是代码编辑区，右边是 Claude Code 终端，互不遮挡。

---

配置优化

配置终端字体（解决乱码问题）

Claude Code 的界面会用到一些特殊符号（进度条、图标等），如果你看到方块或问号，需要安装支持特殊字符的字体。

推荐字体：MesloLGS NF（免费）

1. 下载字体：在浏览器搜索 “MesloLGS NF download”，从 romkatv 的 GitHub 下载安装
2. 安装到系统后，在 VS Code 设置里配置：

打开设置（Ctrl+, / Cmd+,），搜索 terminal font，找到 Terminal › Integrated: Font Family，填入：

MesloLGS NF

或者直接在 settings.json 里添加（按 Ctrl+Shift+P 搜索 “Open User Settings JSON”）：

{
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "terminal.integrated.fontSize": 14
}

---

配置默认 Shell

macOS / Linux：

打开设置，搜索 default profile，找到 Terminal › Integrated › Default Profile: Osx（或 Linux），选择你的 Shell（zsh 或 bash）。

Windows：

建议选择 WSL（Windows Subsystem for Linux）作为默认终端，Claude Code 在 WSL 环境下运行最稳定。

如果没有 WSL，也可以选 Git Bash 或 PowerShell。

{
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.defaultProfile.linux": "bash",
  "terminal.integrated.defaultProfile.windows": "WSL"
}

---

调整终端大小

Claude Code 的对话界面在宽度不够时会折行，建议把终端宽度调大：

• 拖动终端面板的边缘调整宽度
• 或者调小字体大小：设置里搜索 terminal font size，改为 12 或 13

---

常见问题排查

问题一：在 VS Code 终端里找不到 claude 命令

现象： 输入 claude 后提示 command not found 或 'claude' 不是内部或外部命令

原因： Claude Code 安装的 npm 全局目录不在 PATH 里，或者 VS Code 终端的 PATH 和系统终端不同。

解决步骤：

# 第1步：确认 claude 安装在哪里
npm config get prefix
# 输出类似：/usr/local 或 C:\Users\用户名\AppData\Roaming\npm

# 第2步：确认 claude 文件是否存在
# macOS/Linux：
ls $(npm config get prefix)/bin/claude
# Windows：
dir "%APPDATA%\npm\claude.cmd"

如果文件存在，说明是 PATH 问题。在 ~/.zshrc 或 ~/.bashrc 里加入：

export PATH="$(npm config get prefix)/bin:$PATH"

然后重启 VS Code（不是刷新，是完全关闭再打开）。

---

问题二：VS Code 终端和系统终端的 Node.js 版本不一致

现象： 系统终端里 node --version 是 20，VS Code 终端里是 16，claude 命令报错。

原因： 通常是 nvm（Node Version Manager）没有在 VS Code 终端里初始化。

解决方案：

确保 ~/.zshrc（macOS）或 ~/.bashrc（Linux）里有以下内容：

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

添加后，在 VS Code 里按 Ctrl+Shift+P，搜索并执行 Terminal: Kill All Terminals，然后重新打开终端。

---

问题三：官方扩展登录后一直转圈

现象： 点击 Sign in 跳转浏览器授权后，VS Code 里扩展一直显示加载中。

解决方案：

1. 关闭 VS Code，重新打开
2. 重新点击侧边栏的 Claude Code 图标
3. 如果还不行，在 VS Code 里按 Ctrl+Shift+P，搜索 Claude Code: Sign Out，退出后重新登录

---

问题四：扩展安装后看不到图标

现象： 安装完毕但左侧活动栏没有 Claude Code 图标。

解决方案： 右键点击左侧活动栏空白处，确认 Claude Code 前面有勾选。如果没有，点击勾选即可。

---

配合其他 IDE

Claude Code CLI 也可以在这些编辑器的内置终端里使用：

编辑器	终端快捷键	说明
Cursor	Ctrl/Cmd + `	完全兼容，和 VS Code 用法一样
WebStorm / IntelliJ	Alt + F12	在底部终端里运行 claude
Vim / Neovim	:terminal	终端集成 + tmux 推荐
Zed	Ctrl + `	极速启动，含 Channel 协作

---

验证全部配置完成

完成安装配置后，做一次完整验证：

1. 验证 CLI 可用

claude --version
# 应输出：@anthropic-ai/claude-code@x.x.x

2. 验证扩展登录

点击 VS Code 侧边栏的 Claude Code 图标，应该看到聊天界面（不是登录界面）。

3. 做一个简单测试

在 VS Code 里打开一个项目，然后在侧边栏或终端里问：

这个项目是用什么技术栈写的？

Claude Code 应该能读取项目文件并给出准确答案。

---

相关阅读

• 实战工作流：VS Code + Claude Code：远程开发与 Dev Container

其他编辑器安装教程：

• Cursor 中安装与配置 Claude Code
• WebStorm / IntelliJ 中安装与配置 Claude Code
• Vim / Neovim 中安装与配置 Claude Code
• Zed 中安装与配置 Claude Code

相关编辑器工作流：

• Cursor + Claude Code：日常开发完整工作流
• WebStorm + Claude Code：JS/TS 项目实战工作流
• Vim + Claude Code：纯键盘终端工作流
• Neovim + Claude Code：Lua 生态深度集成
• Zed Channel 多人协作开发：搭配 Claude Code 实战