演示文稿
文稿要求：1.使用Claude Code完成了哪些工作 2.过程中遇到了哪些难题，是如何解决的 3.想给大家分享的经验；
完成的工作
简单需求任务
ibox个人中心，修改完密码，添加一个弹窗倒计时功能。
简单任务，目标明确任务，效率提升两倍以上。
优化任务
优化 pdf 预览组件
优化Echart的导入顺序，首屏渲染速度加快。出了好几个版本，中间反复说不合适，反复横跳，还是自己
去除无用包，升级/优化包。直接让AI去除无用包，升级包，并兼容当前 node 版本，AI做不到。只能手动升级，转换思路让它推荐工具，但是推荐了一些 npm 命令，可视化工具，vscode 插件 version lens
中间有命令行报错询问 AI, 提供解决方案。
感觉 claude 应该对这类任务，没法直接修改，其实这个可以用 chat 类的 AI 工具就够用。
效率提升不多，但是对个人成长提升还是不少，过程中我俩是合作者，它对项目的整体把握度不够，我对一些边界处理考虑不够和知识储备量也不如他，但是奔着一个目标，互相在卡壳的时候给提示，最终把任务完成，提升了自己的代码能力和知识储备。
困难任务
写 Vite 插件，自己本身基本没有写插件的经验，只看得懂代码语法，基本全程让AI自己写，自己验证效果，告诉AI是否对，不对的话就自己测
从无到有写插件，效率提升无法估量，但是作用还是很大的。
开发任务
敏感数据加解密，脱敏。理解代码逻辑，代码优化。逻辑是自己理的。成果：
改 bug
地图未显示，数据边界处理检测问题
首页加载 undefined 图片
难题
分享的经验
技巧
快捷键
| 快捷键 | 功能 |
|---|---|
! | 切换为命令行模式（如 Bash） |
@ | 插入文件路径 |
# | 标记内容为“需记忆”或重点 |
Esc（双击） | 清空输入框 |
Ctrl + _ | 撤销 |
Alt + M | 自动接受编辑建议 |
Alt + V | 粘贴图片 |
Ctrl + O | 显示详细输出 |
Ctrl + T | 查看待办事项 |
Tab | 切换思考模式（显示推理过程） |
\ + 回车 | 插入换行，不提交 |
插件
vscode 插件 Claude Code for VS Code（如果不生效，请升级 node，升级 vscode），作用：
- AI 输出的文件变更，实时显示对比
- 实时监控鼠标选中代码，在命令行中有提示。明确目标和方向
git
git 配合（非远程项目也可以在工作目录执行 git init）。建议每次进行一个任务 git add . 一次，每次任务取得阶段性进展的时候 commit 提交到本地一次
每次输出都要看一下 AI 输出了哪些内容，原因：
- 把握 AI 的方向，把控节奏,以免跑偏，过度设计；还有就是，陷入死胡同，及时提示
- 减少输出无用代码
- 学习 AI 输出的代码，自我提升，例如：代码质量、逻辑清晰度
git 历史记录
配合其他 mcp
vscode 安装 chrome devtools mcp
code --add-mcp '{\"name\":\"chrome-devtools\",\"command\":\"npx\",\"args\":[\"chrome-devtools-mcp@latest\"]}'或者直接在.vscode/mcp.json 中添加
{
"servers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest"
]
}
},
"inputs": []
}
```txt
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest告诉CLAUDE 连接 chrome devtools mcp 然后打开网站，测试性能
拆分步骤，添加 todo
踩坑
AI命令行是沙箱环境，每次让AI 启动项目测试都会占用一个端口，测完了关不掉
让AI对比git的修改记录，生成.patch文件，，不能真正生成到工作目录下，只能生成的在沙箱环境里面
全局变量、函数要少用，或者让 AI 优化代码的时候告诉 AI 哪些是全局的，否则 AI 可能会自己实现一遍，或者转去读其他文件，浪费 时间和 token
codex 每次只能读180行代码，超过180行代码，AI会自动询问是否读取剩余的代码