VS Code + Claude Code：让AI帮你写代码的正确姿势

Claude Code 是什么

Claude Code 是 Anthropic 官方出品的 VS Code 插件，让你在编辑器里直接和 Claude 对话，它能 读取当前项目上下文、编辑多个文件、执行终端命令。不是简单的聊天框，而是一个真正能 ” 动手 ” 的 AI 编程助手。

安装与配置

1. VS Code 扩展市场搜索 ”Claude Code” 安装
2. 需要 Anthropic API Key（或用 WorkBuddy 等第三方接入）
3. 安装后侧边栏会出现 Claude 图标，点击打开对话面板

核心功能 1：上下文感知的代码补全

传统代码补全（如 Copilot）只能看当前文件。Claude Code 能：

• 读取整个项目的文件结构
• 理解你的代码风格并保持一致
• 跨文件引用（比如改了一个接口，自动更新调用方）

实测：在一个有 50+ 文件的 Node.js 项目里，让 Claude Code 添加一个新的 API 端点，它自动创建了路由、控制器、测试文件，并更新了 API 文档。

核心功能 2：自然语言编辑

选中一段代码，按快捷键打开 Claude Code，输入：

"把这个函数改成异步的，并添加错误处理"
"给这个组件加一个加载中的状态"
"重构这段代码，把它拆成 3 个更小的函数"

Claude Code 会直接修改代码，并在聊天框里解释改了什么、为什么这么改。

核心功能 3：终端命令生成

不知道该怎么写某个命令？直接问：

"帮我生成一个 git 命令，把最近 3 次 commit 合并成一个"
"写一个 find 命令，找出所有大于 100MB 的文件"
"生成一个 curl 命令测试这个 API，需要带 Bearer Token"

实战技巧

技巧 1：用.project.md 文件提供项目上下文

在项目根目录创建.project.md，写下：

# 项目说明
- 技术栈：React + TypeScript + Tailwind
- 代码规范：使用函数式组件，避免 class 组件
- 目录结构：src/components 存放组件，src/pages 存放页面
- 状态管理：使用 Zustand，不要用 Redux

Claude Code 会自动读取这个文件，生成的代码更符合你的项目规范。

技巧 2：分阶段提需求

不要一次性扔给 AI 一个超大的需求。正确做法是：

1. 先让 AI 帮你设计数据结构
2. 确认后，让它写核心逻辑
3. 再让它加边界处理
4. 最后让它写测试

技巧 3：让它解释代码

遇到看不懂的开源代码？把文件内容复制进去，问：

"逐行解释这个函数的逻辑"
"这段正则是在匹配什么"
"这个算法的时空复杂度是多少"

注意事项

• 永远 review AI 生成的代码——它偶尔会 ” 自信地出错 ”
• 敏感信息不要贴进聊天框——API Key、密码、内部接口地址
• 大文件先给摘要——超过 500 行的文件，先让 AI 给出结构摘要再具体操作

总结

Claude Code 不是让你 ” 不写代码 ”，而是让你把 重复劳动交给 AI，把创造力留给自己。用好它的关键在于：会提问、会拆解、会验证。