VS Code 集成

Claude Code 可以与 VS Code 深度集成，让你在熟悉的编辑器中享受 AI 辅助编程的强大功能。

安装配置

1. 安装 Claude Code

bash

# 安装 Claude Code CLI
npm install -g @anthropic-ai/claude-code

# 验证安装
claude --version

2. 配置 VS Code 终端

在 VS Code 中打开集成终端：

bash

# macOS/Linux: Ctrl+`
# Windows: Ctrl+`

# 启动 Claude Code
claude

Claude Code v2.1.74
Connected to Claude Sonnet 4.6

You:

3. 工作区集成

Claude Code 会自动检测 VS Code 工作区：

bash

You: 分析当前项目结构

Claude: 检测到 VS Code 工作区：/Users/sixseven/projects/my-app

Claude wants to:
  • List directory: /Users/sixseven/projects/my-app
  • Read file: package.json
  • Read file: tsconfig.json
Allow? [y/n/always/never]

You: always

Claude: 项目分析：
- React + TypeScript 项目
- 使用 Vite 构建
- 包含 23 个组件
- 测试覆盖率 78%

核心功能

文件编辑同步

当 Claude 修改文件时，VS Code 会自动刷新：

bash

You: 重构 src/App.tsx

Claude wants to:
  • Read file: /Users/sixseven/projects/my-app/src/App.tsx
Allow? [y/n/always/never]

You: y

Claude wants to:
  • Edit file: /Users/sixseven/projects/my-app/src/App.tsx
Allow? [y/n/always/never]

You: y

Claude: 已重构 App.tsx
[VS Code 自动刷新文件内容]

VS Code 中的变化：

文件标签显示修改标记
可以使用 Cmd+Z 撤销
Git 面板显示变更

智能代码导航

Claude 可以帮助你在 VS Code 中导航代码：

bash

You: 找到所有使用 useState 的组件

Claude wants to:
  • Search pattern: "useState" in *.tsx files
Allow? [y/n/always/never]

You: y

Claude: 找到 12 个组件使用 useState：

1. src/components/Counter.tsx (line 5)
2. src/components/Form.tsx (line 8)
3. src/components/Modal.tsx (line 12)
...

在 VS Code 中打开这些文件？

You: 打开前 3 个

Claude wants to:
  • Run command: code src/components/Counter.tsx:5
  • Run command: code src/components/Form.tsx:8
  • Run command: code src/components/Modal.tsx:12
Allow? [y/n/always/never]

You: y

[VS Code 打开文件并跳转到指定行]

多文件编辑

Claude 可以同时编辑多个文件，VS Code 会显示所有变更：

bash

You: 将所有组件的 Props 类型从 type 改为 interface

Claude: 我会批量修改所有组件文件...

Claude wants to:
  • Search pattern: "type.*Props.*=" in src/components/
Allow? [y/n/always/never]

You: y

Claude: 找到 15 个文件需要修改

Claude wants to:
  • Edit file: src/components/Button.tsx
  • Edit file: src/components/Input.tsx
  • Edit file: src/components/Modal.tsx
  • ... (12 more files)
Allow? [y/n/always/never]

You: y

Claude: 已修改 15 个文件
[VS Code Git 面板显示所有变更]

在 VS Code 中查看变更：

bash

# VS Code Git 面板显示：
M src/components/Button.tsx
M src/components/Input.tsx
M src/components/Modal.tsx
...

# 点击文件查看 diff
- type ButtonProps = {
+ interface ButtonProps {

调试集成

运行和调试

bash

You: 启动开发服务器

Claude wants to:
  • Run command: npm run dev
Allow? [y/n/always/never]

You: n

Claude: 建议你在 VS Code 终端手动运行：
  npm run dev

这样可以保持服务器在后台运行。

You: 好的
[在 VS Code 新终端运行 npm run dev]

You: 现在帮我调试登录功能

Claude: 让我检查登录相关代码...

Claude wants to:
  • Read file: src/components/LoginForm.tsx
  • Read file: src/api/auth.ts
Allow? [y/n/always/never]

You: always

Claude: 我发现了一个问题：

在 src/api/auth.ts 第 23 行：
```typescript
const response = await fetch('/api/login', {
  method: 'POST',
  body: JSON.stringify(credentials)
  // 缺少 Content-Type header
})

需要添加：

typescript

headers: {
  'Content-Type': 'application/json'
}

要我修复吗？

You: 是的

Claude wants to: • Edit file: src/api/auth.ts Allow? [y/n/always/never]

You: y

Claude: 已修复。在 VS Code 中保存文件后，开发服务器会自动重新加载。


### 断点调试辅助

```bash
You: 在登录函数中添加调试日志

Claude wants to:
  • Read file: src/api/auth.ts
Allow? [y/n/always/never]

You: y

Claude wants to:
  • Edit file: src/api/auth.ts
Allow? [y/n/always/never]

You: y

Claude: 已添加调试日志：

```typescript
export async function login(credentials: Credentials) {
  console.log('[DEBUG] Login attempt:', {
    username: credentials.username,
    timestamp: new Date().toISOString()
  })

  try {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(credentials)
    })

    console.log('[DEBUG] Response status:', response.status)

    const data = await response.json()
    console.log('[DEBUG] Response data:', data)

    return data
  } catch (error) {
    console.error('[DEBUG] Login error:', error)
    throw error
  }
}

现在在 VS Code 中打开浏览器控制台查看日志。


## 代码片段生成

### 快速生成组件

```bash
You: 生成一个带表单验证的注册组件

Claude wants to:
  • Write file: src/components/RegisterForm.tsx
  • Write file: src/schemas/register.ts
Allow? [y/n/always/never]

You: y

Claude: 已创建注册组件：

文件：
- src/components/RegisterForm.tsx (React 组件)
- src/schemas/register.ts (Zod 验证)

在 VS Code 中打开查看：
  code src/components/RegisterForm.tsx

You: 打开

Claude wants to:
  • Run command: code src/components/RegisterForm.tsx
Allow? [y/n/always/never]

You: y

[VS Code 打开文件]

代码补全增强

Claude 可以基于上下文生成代码：

bash

You: 我在 VS Code 中打开了 UserList.tsx，帮我添加分页功能

Claude wants to:
  • Read file: src/components/UserList.tsx
Allow? [y/n/always/never]

You: y

Claude: 我看到当前的实现。我会添加：
1. 分页状态管理
2. 分页控件组件
3. API 调用更新

Claude wants to:
  • Edit file: src/components/UserList.tsx
  • Write file: src/components/Pagination.tsx
Allow? [y/n/always/never]

You: y

Claude: 已添加分页功能。

在 VS Code 中：
1. UserList.tsx 已更新（添加分页状态）
2. 新建 Pagination.tsx 组件
3. 使用 Cmd+Shift+F 搜索 "Pagination" 查看所有引用

Git 集成

提交辅助

bash

You: 查看当前的 Git 状态

Claude wants to:
  • Run command: git status
Allow? [y/n/always/never]

You: y

Claude: Git 状态：

修改的文件：
- src/components/UserList.tsx
- src/components/Pagination.tsx (新文件)
- src/api/users.ts

You: 生成提交信息

Claude wants to:
  • Run command: git diff --staged
Allow? [y/n/always/never]

You: y

Claude: 建议的提交信息：

feat(users): add pagination to user list

- Add Pagination component with page controls
- Update UserList to support paginated data
- Modify users API to accept page parameters

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

要我创建提交吗？

You: 是的

Claude wants to:
  • Run command: git add src/components/UserList.tsx src/components/Pagination.tsx src/api/users.ts
  • Run command: git commit -m "feat(users): add pagination to user list..."
Allow? [y/n/always/never]

You: y

Claude: 提交已创建。在 VS Code Git 面板中可以看到新的提交。

代码审查

bash

You: 审查最近的提交

Claude wants to:
  • Run command: git log -1 --stat
  • Run command: git show HEAD
Allow? [y/n/always/never]

You: y

Claude: 最近提交审查：

提交：feat(users): add pagination to user list
作者：Your Name
日期：2026-04-16

变更分析：
✓ 代码质量良好
✓ 类型定义完整
✓ 遵循项目规范

建议：
- 考虑添加单元测试
- Pagination 组件可以提取为通用组件

要我实现这些改进吗？

任务自动化

自定义工作流

bash

You: 创建一个新功能的完整流程

Claude: 我会执行标准的功能开发流程：

1. 创建功能分支
2. 生成组件和测试
3. 运行测试
4. 提交代码

开始吗？

You: 是的，功能是"用户头像上传"

Claude wants to:
  • Run command: git checkout -b feature/avatar-upload
Allow? [y/n/always/never]

You: y

Claude: ✓ 创建分支 feature/avatar-upload

Claude wants to:
  • Write file: src/components/AvatarUpload.tsx
  • Write file: src/components/AvatarUpload.test.tsx
  • Write file: src/api/upload.ts
  • Edit file: src/components/UserProfile.tsx
Allow? [y/n/always/never]

You: y

Claude: ✓ 已创建所有文件

Claude wants to:
  • Run command: npm test AvatarUpload
Allow? [y/n/always/never]

You: y

Claude: ✓ 测试通过

Claude wants to:
  • Run command: git add .
  • Run command: git commit -m "feat(profile): add avatar upload functionality"
Allow? [y/n/always/never]

You: y

Claude: ✓ 功能开发完成！

在 VS Code 中：
- 切换到 feature/avatar-upload 分支
- 4 个新文件已创建
- 测试通过
- 代码已提交

下一步：推送到远程并创建 PR？

批量重构

bash

You: 将所有 class 组件迁移到函数组件

Claude: 这是一个大型重构任务。让我先分析...

Claude wants to:
  • Search pattern: "class.*extends React.Component"
Allow? [y/n/always/never]

You: y

Claude: 找到 8 个 class 组件需要迁移：

1. src/components/OldButton.tsx
2. src/components/LegacyModal.tsx
3. src/components/ClassForm.tsx
...

我会逐个迁移，每个都会在 VS Code 中显示变更。

开始迁移？

You: 是的

# 按 Shift+Tab 切换到 Auto-Accept Mode
[底部显示: ⏵⏵ accept edits on]

Claude: [自动处理所有文件]

✓ OldButton.tsx → 函数组件
✓ LegacyModal.tsx → 函数组件
✓ ClassForm.tsx → 函数组件
...

完成！8 个组件已迁移。

在 VS Code Git 面板查看所有变更。

扩展推荐

配合使用的 VS Code 扩展

bash

You: 推荐一些配合 Claude Code 使用的 VS Code 扩展

Claude: 基于你的项目类型（React + TypeScript），推荐：

必装扩展：
1. ESLint - 代码检查
2. Prettier - 代码格式化
3. GitLens - Git 增强
4. Error Lens - 错误高亮

React 开发：
5. ES7+ React/Redux/React-Native snippets
6. Auto Rename Tag
7. CSS Modules

TypeScript：
8. Pretty TypeScript Errors
9. TypeScript Error Translator

要我生成 .vscode/extensions.json 推荐配置吗？

You: 是的

Claude wants to:
  • Write file: .vscode/extensions.json
Allow? [y/n/always/never]

You: y

Claude: 已创建扩展推荐配置。

团队成员打开项目时，VS Code 会提示安装这些扩展。

工作区设置

项目配置

bash

You: 为项目创建 VS Code 工作区配置

Claude wants to:
  • Write file: .vscode/settings.json
Allow? [y/n/always/never]

You: y

Claude: 已创建工作区设置：

```json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/dist": true
  }
}

这些设置会应用到所有团队成员。


### 调试配置

```bash
You: 创建 VS Code 调试配置

Claude wants to:
  • Write file: .vscode/launch.json
Allow? [y/n/always/never]

You: y

Claude: 已创建调试配置：

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src"
    },
    {
      "name": "Run Tests",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/vitest/vitest.mjs",
      "args": ["--run"],
      "console": "integratedTerminal"
    }
  ]
}

现在可以在 VS Code 中按 F5 启动调试。


## 快捷键集成

### 常用操作

在 VS Code 终端中使用 Claude Code：

```bash
# 快速切换权限模式
Shift+Tab

# 查看帮助
You: /help

# 切换模型
You: /model opus
Claude: 已切换到 Claude Opus 4.6

# 查看成本
You: /cost
Claude: 本次会话成本：$0.15

# 清空历史
You: /clear
Claude: 历史已清空

# 退出
You: /quit

自定义命令

bash

You: 创建一个快捷命令来运行测试和检查

Claude: 我可以创建一个 npm script：

Claude wants to:
  • Read file: package.json
Allow? [y/n/always/never]

You: y

Claude wants to:
  • Edit file: package.json
Allow? [y/n/always/never]

You: y

Claude: 已添加脚本：

```json
{
  "scripts": {
    "check": "npm run type-check && npm run lint && npm test"
  }
}

现在可以运行： npm run check

或在 VS Code 中按 Cmd+Shift+P，输入 "Tasks: Run Task"，选择 "check"。


## 性能优化

### 大型项目处理

```bash
You: 这个项目有 500+ 个文件，如何优化 Claude Code 性能？

Claude: 对于大型项目，建议：

1. 使用 .claudeignore 排除不必要的文件
2. 启用 Fast Mode
3. 使用具体的文件路径而不是全局搜索

要我创建 .claudeignore 吗？

You: 是的

Claude wants to:
  • Write file: .claudeignore
Allow? [y/n/always/never]

You: y

Claude: 已创建 .claudeignore：

node_modules/ dist/ build/ .git/ coverage/ *.log .DS_Store


这会显著提升性能。

You: 启用 Fast Mode

Claude: /fast

[Fast Mode 已启用]

现在响应速度会更快。

团队协作

共享配置

bash

You: 为团队创建标准的 VS Code + Claude Code 配置

Claude wants to:
  • Write file: .vscode/settings.json
  • Write file: .vscode/extensions.json
  • Write file: .vscode/launch.json
  • Write file: .claude/rules.md
  • Write file: .claudeignore
Allow? [y/n/always/never]

You: y

Claude: 已创建完整的团队配置：

VS Code 配置：
- settings.json (编辑器设置)
- extensions.json (推荐扩展)
- launch.json (调试配置)

Claude Code 配置：
- rules.md (团队规则)
- .claudeignore (忽略文件)

提交这些配置到 Git：

Claude wants to:
  • Run command: git add .vscode/ .claude/ .claudeignore
  • Run command: git commit -m "chore: add team VS Code and Claude Code configuration"
Allow? [y/n/always/never]

You: y

Claude: ✓ 配置已提交

团队成员克隆项目后，VS Code 会自动应用这些设置。

故障排除

常见问题

bash

You: VS Code 没有自动刷新 Claude 修改的文件

Claude: 这通常是因为文件被外部修改。解决方法：

1. 在 VS Code 中启用自动刷新：

Claude wants to:
  • Read file: .vscode/settings.json
Allow? [y/n/always/never]

You: y

Claude wants to:
  • Edit file: .vscode/settings.json
Allow? [y/n/always/never]

You: y

Claude: 已添加设置：

```json
{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

重新加载 VS Code 窗口： Cmd+Shift+P → "Reload Window"

问题应该解决了。


## 最佳实践

### 1. 保持终端在 VS Code 中

```bash
# 在 VS Code 集成终端中运行 Claude Code
# 而不是外部终端

# 优点：
- 文件路径自动同步
- 可以直接打开文件
- Git 集成更好
- 快捷键统一

2. 使用工作区

bash

You: 打开多个相关项目

Claude: 建议创建 VS Code 工作区：

Claude wants to:
  • Write file: my-workspace.code-workspace
Allow? [y/n/always/never]

You: y

Claude: 已创建工作区配置：

```json
{
  "folders": [
    { "path": "./frontend" },
    { "path": "./backend" },
    { "path": "./shared" }
  ],
  "settings": {
    "claude.projectRoot": "${workspaceFolder}"
  }
}

在 VS Code 中打开： code my-workspace.code-workspace


### 3. 利用 Git 集成

```bash
# Claude 修改文件后，在 VS Code 中：
# 1. 查看 Git 面板的变更
# 2. 审查 diff
# 3. 选择性暂存
# 4. 提交

You: 只提交部分修改

Claude: 在 VS Code Git 面板中：
1. 点击文件查看 diff
2. 点击行号旁的 "+" 暂存特定行
3. 提交暂存的更改

或使用命令：

Claude wants to:
  • Run command: git add -p
Allow? [y/n/always/never]

You: y

[交互式暂存]

总结

VS Code 与 Claude Code 的集成提供了：

无缝的文件编辑体验
强大的代码导航
完整的 Git 工作流
调试和测试支持
团队协作配置

在 VS Code 中使用 Claude Code，你可以享受熟悉的编辑器界面和 AI 辅助编程的强大能力。

VS Code 集成 ​

安装配置 ​

1. 安装 Claude Code ​

2. 配置 VS Code 终端 ​

3. 工作区集成 ​

核心功能 ​

文件编辑同步 ​

智能代码导航 ​

多文件编辑 ​

调试集成 ​

运行和调试 ​

代码补全增强 ​

Git 集成 ​

提交辅助 ​

代码审查 ​

任务自动化 ​

自定义工作流 ​

批量重构 ​

扩展推荐 ​

配合使用的 VS Code 扩展 ​

工作区设置 ​

项目配置 ​

自定义命令 ​

团队协作 ​

共享配置 ​

故障排除 ​

常见问题 ​

2. 使用工作区 ​

总结 ​

VS Code 集成

安装配置

1. 安装 Claude Code

2. 配置 VS Code 终端

3. 工作区集成

核心功能

文件编辑同步

智能代码导航

多文件编辑

调试集成

运行和调试

代码补全增强

Git 集成

提交辅助

代码审查

任务自动化

自定义工作流

批量重构

扩展推荐

配合使用的 VS Code 扩展

工作区设置

项目配置

自定义命令

团队协作

共享配置

故障排除

常见问题

2. 使用工作区

总结