Claude Code 基础课-03-在 VS Code 里用 AI 写代码

开场白

#

“终端敲命令太累？今天教你把 Claude Code 装进 VS Code，拖拖拽拽就能用 AI 写代码。”

第一部分：为什么用 VS Code？

#

三个理由

#

用 VS Code = 告别终端恐惧

第二部分：安装插件

#

步骤

#

1. 下载、安装、打开 VS Code点击这里

2. 打开扩展商店

   • Mac: Cmd + Shift + X
   • Windows: Ctrl + Shift + X

3. 搜索并安装

   • 输入 “Claude Code”
   • 找到 Anthropic 发布的插件
   • 点击 Install

4. 验证安装

   • 右上角出现 Spark 图标 ✨ = 安装成功

第三部分：创建项目并打开（1分钟）

#

创建项目文件夹（图形化操作）

#

Mac

1. 打开 Finder（访达）
2. 进入 Documents（文稿）
3. 右键 → 新建文件夹 → 命名为 my-first-project

Windows

1. 打开资源管理器
2. 进入 Documents（文档）
3. 右键 → 新建 → 文件夹 → 命名为 my-first-project

用 VS Code 打开

#

1. VS Code 菜单：File → Open Folder
2. 选择刚才创建的 my-first-project
3. 点击 Open

第四部分：开始和 AI 聊天

#

打开 Claude 面板

#

点击右上角的 Spark 图标 ✨

如何引用文件

#

在聊天框输入 @ 会弹出文件列表，选择要引用的文件。

@main.py 帮我优化这个文件的代码

实战：用自然语言完成功能

#

在聊天框输入：

帮我创建一个简单的网页，包含一个按钮，点击后弹出"你好，AI！"

重命名照片：

当前目录有很多猫咪的照片，帮我统一命名格式为：猫咪_1、猫咪_2、猫咪_3...这样的名称

将照片组合成为猫咪相册：

@index.html 修改为手机使用的网页， 把所有的猫咪相片组合成为一个相册，需要让人感觉到温馨、可爱。

增加微信朋友圈功能：

相册再增加一个分享微信朋友圈功能

Claude 会：

1. 生成代码
2. 显示改动预览
3. 点击 Accept 应用改动

第五部分：常用操作

#

结尾

#

“VS Code 里用 AI，就是这么简单。下一节课，教你什么是 Skill，让 AI 学会更多技能。”