VSCode设置Claude
- 常用设置项
设置claude界面及默认的模式，编程建议用plan。
核心功能
- 代码生成与补全
- 代码分析与解释
- 重构与优化
- 调试辅助
编程实践技巧
如何写好Prompt
Prompt是与Claude Code交互的核心，好的Prompt能显著提高代码质量和开发效率。
基本原则
明确具体：清楚描述你想要什么，避免模糊表述
- 差：帮我写个函数
- 好：写一个TypeScript函数，接收字符串数组，返回去重后的数组
提供上下文：说明技术栈、约束条件、相关文件
- 例：在这个Next.js项目中，使用React Query实现用户列表组件
分步骤：复杂任务拆分成多个小请求
- 先搭架子 → 再实现核心逻辑 → 最后处理边界情况
常用Prompt模板
代码生成
请实现一个[功能名称]，要求：
- 技术栈：[框架/库]
- 输入：[参数说明]
- 输出：[返回值说明]
- 约束：[性能/安全/风格要求]
代码解释
请解释这段代码的作用：
[粘贴代码]
重点关注：[具体问题]
Bug修复
这段代码出现[错误信息]，期望行为是[...]，请帮我定位并修复：
[粘贴代码]
代码重构
请重构以下代码，目标是：
- 提高可读性
- 遵循[编码规范]
- 保持功能不变
[粘贴代码]
进阶技巧
- 指定文件范围：
在src/utils目录下创建... - 引用现有代码：
参考api/user.ts的风格实现... - 添加约束：
不使用第三方库、兼容IE11 - 要求解释：
并解释你的实现思路
利用CLAUDE.md文件
CLAUDE.md是项目根目录下的一个特殊文件，用于为Claude Code提供项目级的上下文信息，让AI更好地理解你的项目。
什么是CLAUDE.md
CLAUDE.md类似README，但专门写给Claude看。Claude Code在每次交互时会自动读取这个文件，了解项目背景、规范和约定。
应该写什么
# 项目概述
这是一个使用Next.js 14 + TypeScript的电商平台后台管理系统。
# 技术栈
- 框架：Next.js 14 (App Router)
- 语言：TypeScript
- 样式：Tailwind CSS
- 状态管理：Zustand
- 数据获取：TanStack Query
# 代码规范
- 组件放在src/components，按功能模块分类
- API路由放在app/api目录
- 使用函数式组件和Hooks
- 命名：组件用PascalCase，函数用camelCase
# 重要约定
- 所有API响应使用统一格式 { code, data, message }
- 表单使用react-hook-form + zod验证
- 错误处理使用全局ErrorBoundary
# 注意事项
- 不要修改src/legacy目录下的代码
- 新功能需要添加单元测试
最佳实践
- 保持更新：技术栈变更时同步更新
- 控制长度：控制在200行以内，过长会被截断
- 突出重点：写AI需要知道的，而非所有细节
- 明确禁止：列出不想让AI做的事情
斜杠命令使用
Claude Code提供了丰富的斜杠命令（Slash Commands），用于快速执行常见任务。
常用命令
| 命令 | 作用 |
|---|---|
/help | 查看帮助信息 |
/clear | 清除当前对话历史 |
/compact | 压缩对话历史，释放上下文空间 |
/config | 打开配置设置 |
/init | 初始化CLAUDE.md文件 |
/terminal-setup | 配置终端集成 |
Git相关命令
| 命令 | 作用 |
|---|---|
/commit | 智能生成commit信息并提交 |
/review-pr | 审查当前PR |
使用技巧
快速提交代码：修改完成后直接输入
/commit，Claude会自动分析变更并生成合适的commit message清理上下文：对话过长时使用
/compact压缩历史，保留关键信息重新开始：
/clear清空对话，适合切换到新任务
实战案例
前端开发案例
以下是一个React项目在CLAUDE.md中定义的前端开发规范，让Claude Code能够按照团队约定生成代码。
技术栈与架构
## framework
- react version: v19.2
- axios: api call
- MobX: manage state, do not use react useXXX functions
- tailwind
## architecture
src/
├── assets/ # 静态资源
├── apis/ # API接口
├── models/ # 数据模型
├── pages/ # 页面组件
├── utils/ # 工具函数
├── components/ # 公共组件
├── stores/ # MobX状态
├── layouts/ # 布局组件
└── transforms/ # 数据转换
API规范
请求规范
- 使用class管理API对象，每个对象一个class
- RESTful风格，查询参数使用snake_case（如
start_date、page_size） - 分页使用
page和page_size参数
响应格式
// 成功响应
{
"success": true,
"code": 0,
"message": "success",
"data": { ... },
"timestamp": 1234567890
}
// 分页响应
{
"data": {
"list": [...],
"total": 100,
"page": 1,
"page_size": 10,
"has_next": true
}
}
错误码分模块管理
| 范围 | 模块 |
|---|---|
| 1000-1999 | 全局 |
| 2000-2999 | 用户 |
| 2100-2199 | 团队 |
| 2200-2299 | 计费 |
代码规范
组件开发
- 组件控制在300行以内，过长则拆分
- 使用函数式组件
- 分离UI组件与业务逻辑组件
- 组件可复用、可测试
状态管理
- 使用MobX管理全局状态
- 按领域划分store（如authStore、userStore）
- 使用computed处理派生状态
性能优化
- 长列表使用虚拟滚动
- 图片和组件懒加载
- 用户输入防抖/节流
- 合理使用React.memo
暗黑模式配色映射
| 亮色模式 | 暗色模式 | 用途 |
|---|---|---|
bg-white | dark:bg-gray-900 | 主背景 |
bg-gray-50 | dark:bg-gray-800/50 | 卡片面板 |
text-gray-900 | dark:text-gray-100 | 主标题 |
text-gray-600 | dark:text-gray-400 | 正文 |
效果
通过在CLAUDE.md中定义这些规范，Claude Code在生成代码时会：
- 自动使用MobX而非useState
- 遵循API响应格式规范
- 按照目录结构组织文件
- 添加暗黑模式适配
最佳实践与进阶
提高效率的使用习惯
善用Plan模式：复杂任务先进入Plan模式，让Claude分析后再实施，避免走弯路
分而治之：大功能拆分成小任务，逐步完成，每步验证后再继续
及时Review：生成的代码要阅读理解，不要盲目接受
保持对话聚焦：一个对话专注一个任务，切换任务时用
/clear清空利用选中上下文：在编辑器选中相关代码后再提问，Claude能更好理解意图
建立个人模板：总结常用的Prompt模板，提高沟通效率
注意事项与局限
安全注意
- 不要让Claude处理敏感信息（密钥、密码、token）
- 生成的代码要审查潜在安全漏洞
- API密钥等配置使用环境变量
局限性
- 不了解最新框架版本特性（知识有截止日期）
- 复杂业务逻辑可能理解偏差
- 大型项目上下文有限，需要提供关键信息
- 生成的代码可能有bug，需要测试验证
最佳实践
- 关键逻辑自己把控，AI辅助实现
- 重要变更先备份或提交
- 对生成结果保持怀疑态度，验证后再用
持续学习建议
关注更新：Claude Code迭代快，新功能持续推出
社区交流：
总结沉淀：记录有效的Prompt和踩坑经验
实践出真知：在实际项目中不断尝试，找到最适合自己的工作流
总结
Claude Code作为Anthropic官方推出的AI编程助手，正在改变开发者的工作方式。本文从实践角度出发，总结了使用Claude Code的关键要点：
核心技巧
- 写好Prompt：明确具体、提供上下文、分步执行
- 善用CLAUDE.md：让AI理解项目规范和约定
- 掌握斜杠命令：提高常用操作效率
- 自定义Skills：扩展Claude Code能力（待补充）
正确心态
- AI是助手而非替代，关键逻辑仍需人工把控
- 对生成代码保持审视，验证后再使用
- 持续学习迭代，找到适合自己的工作流
AI编程工具的本质是放大开发者的能力。用好Claude Code，不是让它代替你写代码，而是让它成为你最得力的编程伙伴。