---
title: "Claude VS Code 插件安装与配置教程"
description: "在编辑器里用 Claude 有两条路：侧边栏扩展适合边看代码边对话，内置终端适合跑多步任务。从认准官方扩展、登录授权，到终端字体与默认 Shell 配置，一次讲完。"
updated: 2026-11-13
canonical: https://docai.cc/learn/vs-code-extension-setup/
markdown_mirror: https://docai.cc/learn/vs-code-extension-setup.md
---
## 两种用法，先选一种

在编辑器里用 Claude，有两个入口。一个是装官方扩展，在左侧边栏对话；另一个是打开内置终端，直接敲命令。两个入口可以并存，不冲突。

| 对比项 | 侧边栏扩展 | 内置终端 |
|---|---|---|
| 交互方式 | 对话框，选中代码即可提问 | 命令行，和独立终端一致 |
| 改动呈现 | 可视化差异，逐块接受或拒绝 | 终端里确认 |
| 适合场景 | 边写边问、日常小改动 | 多步任务、自动化、脚本 |
| 上手难度 | 低，装完即用 | 需要一点命令行习惯 |

新手先用侧边栏，阻力最小。等任务开始变长、步骤变多，再切到终端。

## 装扩展：先认发布者

打开扩展面板：Windows 和 Linux 按 `Ctrl+Shift+X`，macOS 按 `Cmd+Shift+X`，或者点击左侧栏里的扩展图标。

搜索 `Claude Code`。结果里会出现同名或近似的扩展，认准发布者为 Anthropic、扩展标识为 `anthropic.claude-code` 的那一个。市场里的名称和标识可能随版本调整，安装前扫一眼发布者，是最稳的判别方法。

点进详情页按安装，几秒钟完成，不需要重启编辑器。装好后左侧活动栏会多出一个图标。

## 登录，然后问第一个问题

点图标，侧边栏会提示登录。按提示会跳转到浏览器，用账号完成授权，再回到编辑器，界面会变成对话输入框。

先做个只读的验证：打开项目里的任意文件，选中一个函数，在侧边栏里问：

```text
这段函数的边界条件处理完整吗？列出可能出错的输入。
```

它能结合当前文件和项目结构回答。改动发生时，编辑器会打开差异视图，你能逐块决定接受还是拒绝。顶部通常还有历史入口，找回之前的会话。

这一步的意义不只是测试：它确认了扩展能读到项目，而不只是当前那一段文本。

## 完整走一遍：从一个报错到一次提交

登录成功只是门槛。拿一个真实的小故障走完整流程，才算把「文件上下文」和「差异确认」这两件事用熟。

假设订单页在无历史订单的账号下报错，控制台打出 `TypeError: Cannot read properties of undefined`。在侧边栏里别只写「帮我修一下」，把四样信息一次给全：报错原文、触发位置、复现步骤、你已经试过什么。

```text
报错：TypeError: Cannot read properties of undefined (reading 'map')
位置：src/pages/orders.tsx 第 42 行，订单列表首次加载
复现：登录 → 进入「订单」页 → 该账号没有历史订单
期望：显示空状态与引导按钮
已试过：把 orders 的初始值改成 []，报错消失，但列表一直空白
请先讲根因，再给最小改动；不要动无关文件，也不要顺手重构。
```

几个细节决定这次协作顺不顺：

- 报错只贴最后一行没什么用，模型看不到调用链，把完整堆栈一起给。
- 「已试过」这一栏最值钱，它能让模型避开你已经排除的方向。
- 明确禁止顺手重构，差异视图里就只会出现该改的那几行。

收到修改后，编辑器会打开对照视图。逐块看，只接受和根因相关的那一块；其余先拒绝，等测试跑过再说。然后在终端执行项目自带的检查命令——构建、测试或 lint 都行，具体命令以仓库 `package.json` 的 scripts 为准。测试失败就把新的报错贴回同一个会话，别急着重开，上下文还在，它知道上一次改了什么。

验收看三条：改动只落在预期文件、构建和测试通过、没有新增依赖。三条都过，再提交。

## 终端入口：把面板挪到右边

如果已经装好了命令行工具，直接按 ``Ctrl+` ``（macOS 为 ``Cmd+` ``）打开内置终端，输入 `claude` 即可，不需要扩展。

默认终端在底部，对话一长就要滚动。右键点终端标签栏，选择把面板移到右侧：左边代码、右边对话，改哪里、说什么，一眼能对上。

终端的初始目录就是当前项目根，它读到的自然是这个仓库。换项目记得开新终端，别在旧目录里继续聊。

## 三处值得调整的显示配置

**字体**：对话里会出现不少图标和进度符号，字形缺失时会变成方块。装一款带 Nerd Font 补丁的等宽字体（例如 MesloLGS NF），再在设置里指定：

```json
{
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "terminal.integrated.fontSize": 13
}
```

**默认 Shell**：macOS 和 Linux 选 zsh 或 bash；Windows 优先选 WSL，没有就退回 Git Bash。设置项在终端相关配置里，也可以直接写进配置文件的 `terminal.integrated.defaultProfile.*`。

**宽度**：对话内容窄了会频繁折行，把面板拖宽，或把字号降到 12 至 13，可读性会好很多。

## 四个常见故障

**在内置终端输入 `claude` 说找不到命令**：这是命令行工具没装好或没进 PATH，和扩展本身无关。先查全局目录在哪：

```bash
npm config get prefix
```

再到对应的 `bin` 目录看有没有 `claude` 可执行文件。文件在，就是 PATH 没包含它；把该目录写进 `~/.zshrc` 或 `~/.bashrc`，然后完全退出编辑器再打开。

**编辑器里的 Node 版本和系统终端不一致**：多半是版本管理器没在编辑器终端里初始化。把 nvm 的加载语句写进 Shell 配置文件，执行一次终止所有终端的命令，再开新终端。

**授权后一直转圈**：先彻底重启编辑器；还不行就执行登出命令再重新登录。浏览器授权和编辑器回调之间偶尔会断，重来一次通常就好。

**装完却找不到图标**：这是活动栏把它收起来了。右键点活动栏空白处，看列表里 Claude Code 前面有没有勾选，没勾就点上。图标一直在，只是没显示。

## 换编辑器、换场景：别死守侧边栏

编辑器不止 VS Code，命令行工具在别的编辑器里同样能用，入口略有差别：

| 编辑器 | 打开终端 | 说明 |
|---|---|---|
| Cursor | ``Ctrl+` `` / ``Cmd+` `` | 键位与 VS Code 基本一致 |
| WebStorm / IntelliJ | `Alt+F12` | 在底部终端输入命令 |
| Vim / Neovim | `:terminal` | 配合 tmux 分屏更顺手 |
| Zed | ``Ctrl+` `` | 内置终端可直接使用 |

但有些任务不该留在编辑器里做：

- **跑很久的任务**：批量改名、完整测试套件，编辑器窗口一关就断。改到独立终端或后台执行，参见[第一条 Claude Code 任务](/learn/first-claude-code-task/)。
- **超大仓库**：编辑器本身已经吃内存，侧边栏再读一遍文件会更卡，终端里按需读取更省资源。
- **代码在远程服务器上**：本地编辑器与服务器之间隔着同步，直接在服务器终端里运行更可靠。
- **涉密仓库**：先问清公司的数据策略，别把含密钥、客户资料的文件留在打开上下文里。密钥走环境变量，写法见[API Key 与账号设置](/learn/account-and-api-key-setup/)。

最后补一个版本自查：在任意终端执行 `claude --version`，输出里能看到 `@anthropic-ai/claude-code` 字样和版本号；升级后扩展行为反常时，先核对这里再决定是否回滚。

配置完成后，用一句只读的问题做验收：让它说说这个项目的技术栈和启动方式，答得对，说明文件和终端两条链路都通了。接着补上命令行安装的细节：[命令行工具安装完整指南](/learn/cli-tool-installation-guide/)。