Claude 在 VS Code 中的最佳使用姿势

一、VS Code 中使用 Claude 的三条路径

在 VS Code 中集成 Claude，目前主流有三种方式，各有适用场景：

本文重点介绍前两种，它们覆盖了绝大多数开发者的实际需求。

二、Claude Code CLI + VS Code：最强组合

安装 Claude Code

# 需要 Node.js 18+
npm install -g @anthropic-ai/claude-code

# 验证安装
claude --version

# 首次登录（需要 Claude Pro/Max 账号或 API Key）
claude login

VS Code 集成配置

Claude Code 运行在终端里，和 VS Code 配合的关键是让两者共享相同的工作目录和文件系统：

步骤一：在 VS Code 内置终端启动 Claude Code

用 Ctrl+`（或 Cmd+`）打开 VS Code 内置终端，在项目根目录运行：

cd /你的项目路径
claude

这样 Claude Code 就在你的项目上下文里运行——它能读取你在 VS Code 里打开的所有文件，你在 VS Code 里做的修改它也能看到。

步骤二：配置 .claude 项目指令

在项目根目录创建 CLAUDE.md（Claude Code 会自动读取），写入项目背景和规范：

# 项目说明（CLAUDE.md）

## 项目背景
这是一个 B2B SaaS 平台的后端服务，使用 FastAPI + PostgreSQL。
主要功能：用户管理、订单处理、数据分析报告。

## 技术栈
- Python 3.11 + FastAPI 0.115
- PostgreSQL 16 + SQLAlchemy 2.0
- Redis 用于缓存和任务队列
- Pytest 用于测试

## 代码规范
- 所有函数必须有类型注解和 Google Style Docstring
- 数据库操作必须在 async 函数中
- 错误处理统一使用 app/exceptions.py 中的自定义异常
- 新功能必须附带单元测试，覆盖率目标 80%+

## 重要文件
- app/models/ — 数据库模型
- app/api/v1/ — API 路由
- app/services/ — 业务逻辑层
- tests/ — 测试文件

## 禁止事项
- 不要直接修改 alembic/versions/ 中的迁移文件
- 不要在 API 层直接写 SQL，必须通过 service 层
- 不要 commit 包含硬编码密钥的代码

Claude Code 在 VS Code 中的核心工作流

工作流一：让 Claude 直接阅读并修改文件

// 在 Claude Code 终端中：

// 读取当前打开的文件
"看一下 app/api/v1/users.py，找出所有没有做权限检查的接口"

// 修改文件
"在 app/services/user_service.py 的 get_user 函数里加上 Redis 缓存，
缓存键用 user:{id}，过期时间 5 分钟"

// 跨文件操作
"参考 app/api/v1/orders.py 的接口风格，
为 app/models/product.py 里的 Product 模型创建完整的 CRUD API"

工作流二：边开发边测试

"为 app/services/payment_service.py 里的所有公开方法写单元测试。
测试文件放在 tests/services/test_payment_service.py。
写完后直接运行 pytest tests/services/test_payment_service.py -v，
如果有失败的测试，分析原因并修复，直到全部通过。"

工作流三：代码审查模式

"审查我今天修改的所有文件（用 git diff HEAD 查看），
重点检查：
1. 有没有引入安全漏洞
2. 数据库查询有没有 N+1 问题
3. 错误处理是否完整
给出按优先级排序的改进清单"

三、Continue 插件：VS Code 内联 AI 体验

安装和配置

在 VS Code 扩展市场搜索 “Continue” 并安装。安装后，在 ~/.continue/config.json 配置使用 Claude：

{
  "models": [
    {
      "title": "Claude Sonnet（日常主力）",
      "provider": "anthropic",
      "model": "claude-sonnet-4-6",
      "apiKey": "sk-ant-你的key"
    },
    {
      "title": "Claude Opus（复杂任务）",
      "provider": "anthropic",
      "model": "claude-opus-4-6",
      "apiKey": "sk-ant-你的key"
    },
    {
      "title": "Claude Haiku（快速补全）",
      "provider": "anthropic",
      "model": "claude-haiku-4-5-20251001",
      "apiKey": "sk-ant-你的key"
    }
  ],
  "tabAutocompleteModel": {
    "title": "Haiku 自动补全",
    "provider": "anthropic",
    "model": "claude-haiku-4-5-20251001",
    "apiKey": "sk-ant-你的key"
  },
  "customCommands": [
    {
      "name": "review",
      "prompt": "审查以下代码，按优先级列出安全、性能、逻辑问题：\n\n{{{ input }}}",
      "description": "代码审查"
    },
    {
      "name": "test",
      "prompt": "为以下代码生成全面的单元测试，覆盖正常路径、边界情况和错误情况：\n\n{{{ input }}}",
      "description": "生成测试"
    },
    {
      "name": "doc",
      "prompt": "为以下代码生成详细的文档注释（Google Style）：\n\n{{{ input }}}",
      "description": "生成文档"
    },
    {
      "name": "refactor",
      "prompt": "重构以下代码，提升可读性和可维护性，不改变功能，说明主要改动：\n\n{{{ input }}}",
      "description": "重构代码"
    }
  ],
  "contextProviders": [
    { "name": "diff",       "params": {} },
    { "name": "terminal",   "params": {} },
    { "name": "problems",   "params": {} },
    { "name": "folder",     "params": {} },
    { "name": "codebase",   "params": {} }
  ],
  "slashCommands": [
    { "name": "edit",   "description": "内联编辑选中代码" },
    { "name": "comment","description": "添加注释" },
    { "name": "share",  "description": "分享对话" }
  ]
}

Continue 的核心使用方式

内联代码编辑（最常用）

选中一段代码，按 Ctrl+I（Mac: Cmd+I），在弹出的输入框里描述你想做什么，Claude 会直接在编辑器里修改代码：

// 选中函数后按 Cmd+I，输入：
"加上类型注解和 Google Style docstring"
"把这个同步函数改为异步"
"加上完整的错误处理和日志"
"用列表推导式简化这个循环"

侧边栏聊天（带上下文）

按 Ctrl+L（Mac: Cmd+L）打开侧边栏聊天，自动包含当前文件上下文。在聊天中可以用 @ 引用更多上下文：

@file:app/models/user.py   // 引用特定文件
@folder:app/services       // 引用整个目录
@terminal                  // 引用终端最近输出
@problems                  // 引用当前错误列表
@diff                      // 引用 git 变更

四、10个高效工作流

工作流一：粘贴报错，一键修复

在 VS Code 终端看到报错后，不用手动复制，直接在 Continue 侧边栏输入 @terminal，Claude 会自动获取终端内容：

@terminal 帮我分析这个报错，找到根本原因并给出修复方案

工作流二：选中代码问问题

选中任意代码片段，按 Cmd+L 把它加入对话，直接问：

这段代码的时间复杂度是多少？有没有优化空间？
这个正则表达式是什么意思？
为什么这里要用 asyncio.gather 而不是 await 逐个执行？

工作流三：利用 @problems 批量修复警告

@problems 帮我修复这些 TypeScript 类型错误，
保持代码逻辑不变，只修类型问题

工作流四：理解陌生代码库

@folder:src 这个项目的整体架构是什么？
主要的数据流是怎样的？有哪些核心模块，它们之间的关系是什么？

工作流五：写提交信息

@diff 基于这次的代码变更，
帮我写一条符合 Conventional Commits 规范的提交信息，
包含 type、scope 和详细描述

工作流六：生成接口测试

// 选中 API 路由文件后
用 pytest + httpx 为选中的这些接口生成集成测试，
包括正常情况、缺少参数、权限不足三类测试用例

工作流七：数据库迁移

@file:app/models/order.py 
我需要给 Order 模型加一个 status_history 字段，记录状态变更历史。
帮我：
1. 修改模型定义
2. 生成对应的 Alembic 迁移脚本
3. 更新相关的 Pydantic schema

工作流八：性能分析

// 选中慢查询相关代码
这个接口响应很慢，帮我分析可能的性能瓶颈，
特别关注数据库查询和内存使用，给出优化建议和优先级

工作流九：代码翻译（语言迁移）

// 选中 Python 代码
把这段 Python 代码转换为 TypeScript，
保持相同的功能和错误处理逻辑，
使用 TypeScript 的惯用写法（不要直接翻译 Python 风格）

工作流十：生成 Mock 数据

@file:app/models/product.py
基于这个数据模型，生成20条真实感强的测试数据，
用 Python 字典格式，方便直接插入数据库做开发测试

五、VS Code 快捷键和任务配置

配置自定义任务（.vscode/tasks.json）

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "启动 Claude Code",
      "type": "shell",
      "command": "claude",
      "options": {
        "cwd": "${workspaceFolder}"
      },
      "presentation": {
        "reveal": "always",
        "panel": "dedicated",
        "clear": false
      },
      "group": "none"
    },
    {
      "label": "Claude：审查当前文件",
      "type": "shell",
      "command": "claude -p '请审查 ${relativeFile}，找出安全漏洞、性能问题和逻辑错误，按优先级排序'",
      "options": {
        "cwd": "${workspaceFolder}"
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared"
      }
    },
    {
      "label": "Claude：生成测试",
      "type": "shell",
      "command": "claude -p '为 ${relativeFile} 生成完整的单元测试，放到对应的 tests/ 目录下，运行测试确认通过'",
      "options": {
        "cwd": "${workspaceFolder}"
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared"
      }
    },
    {
      "label": "Claude：生成提交信息",
      "type": "shell",
      "command": "git diff --staged | claude -p '基于这个 diff，生成符合 Conventional Commits 规范的提交信息'",
      "options": {
        "cwd": "${workspaceFolder}"
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared"
      }
    }
  ]
}

绑定快捷键（keybindings.json）

// 在 VS Code 命令面板搜索 "Open Keyboard Shortcuts (JSON)" 打开
[
  {
    "key": "ctrl+alt+c",
    "command": "workbench.action.tasks.runTask",
    "args": "启动 Claude Code"
  },
  {
    "key": "ctrl+alt+r",
    "command": "workbench.action.tasks.runTask",
    "args": "Claude：审查当前文件"
  },
  {
    "key": "ctrl+alt+t",
    "command": "workbench.action.tasks.runTask",
    "args": "Claude：生成测试"
  },
  {
    "key": "ctrl+alt+g",
    "command": "workbench.action.tasks.runTask",
    "args": "Claude：生成提交信息"
  }
]

六、让 Claude 更好理解你代码库的配置

编写高质量的 CLAUDE.md

CLAUDE.md 是 Claude Code 的”项目说明书”，写得越详细，Claude 生成的代码与项目越契合。关键内容：

# CLAUDE.md 最佳实践模板

## 项目简介
[2-3句话：这个项目是什么，服务什么用户，解决什么问题]

## 技术栈
[列出所有主要技术和版本号]

## 目录结构说明
[解释主要目录的用途，特别是不直观的结构]

## 代码规范
[具体到可执行的规则，而不是"写好代码"这种废话]
- 命名规范：文件名/函数名/变量名的规则
- 注释要求：什么情况必须加注释
- 错误处理：统一的异常处理方式
- 测试要求：测试覆盖率目标和测试文件位置

## 常用命令
[开发、测试、部署常用的命令]
- 启动开发服务器：npm run dev
- 运行测试：pytest tests/ -v
- 数据库迁移：alembic upgrade head

## 已知问题 / 技术债
[让 Claude 知道哪些地方是暂时不动的]

## 禁止事项
[明确列出不能做的事，防止 Claude 误改]

善用 .claudeignore

在项目根目录创建 .claudeignore，排除不需要 Claude 处理的文件，减少 token 消耗：

# .claudeignore
node_modules/
.git/
__pycache__/
*.pyc
.env
.env.*
dist/
build/
*.lock
*.log
coverage/
.pytest_cache/

七、常见问题与解决方案

Q：Claude Code 在 VS Code 终端里运行很慢，有优化方法吗？
最主要的原因通常是项目文件太多，Claude Code 索引耗时。解决方法：一是配置好 .claudeignore 排除 node_modules 等大目录；二是用 claude --model claude-haiku-4-5-20251001 启动轻量模式，快速任务响应更快；三是在 CLAUDE.md 里告诉它哪些目录是核心代码，减少不必要的扫描。

Q：Continue 的 Tab 自动补全总是给出不相关的建议，怎么改善？
Tab 补全的质量很大程度取决于当前文件的上下文。建议在 config.json 里的 tabAutocompleteModel 保持用 Haiku（速度快），同时在 contextProviders 里启用 codebase——这样 Continue 能更好地理解整个项目的代码风格，给出更一致的补全。

Q：Claude 修改了文件后，如何快速 diff 查看改动？
Claude Code 会在每次修改文件前自动创建备份，你可以用 git diff 查看变更。在 VS Code 里，修改后源代码控制面板会显示所有变更文件，点击文件名可以查看 diff。建议在让 Claude 做大范围修改前先提交一次 git，这样随时可以回滚。

Q：如何让 Claude 保持代码风格与现有代码一致？
两个方法：一是在 CLAUDE.md 里详细描述你的代码风格规范；二是每次生成代码时，把一个你满意的现有文件作为示例粘贴给 Claude，说”请参考这个文件的风格来写新代码”。Few-shot 示例比规则描述更有效。

总结

在 VS Code 中高效使用 Claude 的核心是选择合适的集成方式：需要自主完成大型任务用 Claude Code CLI；需要日常内联编辑和补全用 Continue 插件；两者可以并行使用，分别承担不同类型的任务。投入15分钟配置好 CLAUDE.md 和 Continue 的 config.json，能让 Claude 在整个项目周期内都保持高质量的输出。