第4课：学会AI编程工具

工欲善其事，必先利其器 ⚙️

🎯 1. 为什么需要本地编程环境

在前几课中，我们使用 z.ai 等在线平台进行编程。这些平台非常适合快速原型开发和学习基础概念，但当你想要开发更复杂的项目时，就需要一个更强大的本地编程环境。

在线平台 vs 本地环境

特性 在线平台 本地环境
启动速度 即开即用，无需安装 需要安装配置
项目规模 适合小型项目和学习 支持大型复杂项目
离线工作 需要联网 可离线开发
文件管理 单文件或有限多文件 完整文件系统
版本控制 有限支持 完整Git支持
扩展性 功能有限 插件生态丰富
早期终端界面IDE示例

图1: 早期IDE界面以终端为主，主要通过键盘操作

Emacs编辑器界面

图2: Emacs是经典的终端编辑器，功能强大

Vim编辑器界面

图3: Vim是内置IDE的代表，常用于服务器远程操作

💡 什么时候需要本地环境？

当你的项目需要多个文件协作、使用外部库、版本控制或长期维护时， 就应该考虑搭建本地开发环境了。对于初学者，建议先在在线平台熟悉基础，再逐步过渡到本地开发。

🚀 2. IDE vs AI IDE：编程工具的进化

什么是IDE？

IDE（Integrated Development Environment，集成开发环境）是程序员用来编写代码的软件。它就像一个"代码工作台"，集成了编辑器、编译器、调试器等多种工具。

传统的IDE包括：

什么是AI IDE？

AI IDE是在传统IDE基础上集成了AI助手的新型编程工具。它们能理解你的代码、自动补全、回答问题、甚至帮你写代码。

✨ AI IDE的核心优势

AI IDE不只是"代码编辑器+AI聊天"，而是将AI深度集成到开发流程中。 你可以用自然语言描述需求，AI会理解你的意图并直接修改代码。 这就是"对话式编程"的完整体验——在本地环境中也能享受AI辅助的便利。

VS Code内置AI助手

图4: VS Code已内置AI助手，可直接与代码仓库对话

主流AI IDE工具对比

🆚
VS Code + 插件 推荐
微软出品的免费开源编辑器，配合AI插件（如GitHub Copilot、Cline）使用，是最灵活的组合。
  • 免费开源，社区活跃
  • 插件生态丰富
  • 支持多种编程语言
  • 轻量快速，可定制性强
🔵
Cursor
基于VS Code的AI原生编辑器，深度集成了Claude和GPT-4模型。
  • AI原生设计
  • 支持多模型切换
  • 智能代码生成
  • 需要订阅付费
🟠
Trae
国内团队开发的AI IDE，支持中文界面，适合初学者快速上手。
  • 中文界面友好
  • 免费使用
  • 支持国内AI模型
  • 适合中文用户
🟣
Windsurf
Codeium出品的AI IDE，提供免费的AI代码补全功能。
  • 免费AI补全
  • 多种语言支持
  • 快速响应
  • 基础功能免费
📊 AI IDE 效率数据
55%
编码速度提升
40%
代码AI生成
3x
学习效率
90%
用户满意度

根据GitHub Copilot的研究数据，使用AI IDE的开发者编码速度提升55%， 约40%的代码由AI生成。对于初学者，AI IDE能帮助理解代码、提供实时建议， 学习效率提升3倍以上。

⚙️ 3. VS Code 安装指南

本节将指导你安装 VS Code 并配置基础AI插件。这是最推荐的入门组合，既免费又强大。

3.1 下载并安装 VS Code

  1. 访问官网下载页面 打开浏览器，访问 code.visualstudio.com。 网站会自动识别你的操作系统（Windows/Mac/Linux），点击大大的"Download"按钮即可。
  2. 运行安装程序 下载完成后，双击安装文件。建议选择"添加到PATH"选项，这样可以在命令行直接使用code命令打开VS Code。
  3. 启动VS Code 安装完成后，打开VS Code。你会看到一个欢迎页面，可以浏览一些基础教程。

3.2 安装中文语言包（可选）

  1. 打开扩展商店 点击左侧边栏的方块图标（或按快捷键 Ctrl+Shift+X / Cmd+Shift+X）打开扩展商店。
  2. 搜索"Chinese" 在搜索框中输入"Chinese"，找到"Chinese (Simplified) Language Pack for Visual Studio Code"。
  3. 安装并重启 点击"Install"按钮安装，安装完成后重启VS Code，界面就会变成中文。

3.3 安装AI插件

VS Code的强大之处在于插件生态。以下是推荐的AI插件：

🤖
GitHub Copilot 推荐
GitHub和OpenAI联合开发的AI编程助手，提供智能代码补全和生成。
  • 智能代码补全
  • 自然语言生成代码
  • 多语言支持
  • 学生可免费申请
🔧
Cline (Claude Dev)
基于Claude模型的AI编程助手，支持对话式编程和代码修改。
  • 对话式交互
  • 自动修改代码
  • 免费使用（需API Key）
  • 支持Claude模型
⚡
Codeium
免费的AI代码补全插件，支持多种编程语言。
  • 完全免费
  • 快速补全
  • 多语言支持
  • 无需配置
🧠
Continue
开源的AI编程助手，支持多种AI模型（OpenAI、Anthropic、本地模型等）。
  • 开源免费
  • 支持多种模型
  • 可本地运行
  • 高度可定制

⚠️ 家长陪同提示

安装过程中如果遇到以下情况，请寻求家长或老师的帮助：

  • 安装程序提示需要管理员权限
  • 不确定某个选项是否应该勾选
  • 安装完成后VS Code无法正常启动
  • 需要注册GitHub账号（Copilot需要）
  • 需要绑定信用卡（部分付费插件）

在MG Space，我们建议学生在家长指导下完成安装过程，这不仅是安全问题，也是一个学习机会—— 你可以和父母一起了解软件是如何安装到电脑上的！

🎯 4. Trae 和 Cursor：AI原生IDE

除了VS Code+插件组合，还有专门的AI原生IDE可以选择。这些工具从设计之初就深度集成了AI能力，使用体验更加流畅。

4.1 Cursor：AI优先的代码编辑器

Cursor是一款基于VS Code的AI原生编辑器，它不是简单的"VS Code+AI插件"，而是重新设计了与AI交互的方式。

✨ Cursor的核心特性

Chat模式：类似ChatGPT的对话界面，可以问任何编程问题。
Composer模式：让AI直接修改多个文件，适合大型项目重构。
Cmd+K：选中代码后按Cmd+K，用自然语言描述修改需求，AI会直接修改代码。
Tab补全：比传统补全更智能，能理解你的意图并生成完整代码块。

安装Cursor

  1. 访问官网 前往 cursor.sh，点击"Download"按钮下载适合你系统的版本。
  2. 安装并登录 安装完成后打开Cursor，使用Google或GitHub账号登录。免费版每月有使用限制，但对学习来说足够了。
  3. 开始使用 打开一个项目文件夹，尝试按Cmd+L（Mac）或Ctrl+L（Windows）打开AI对话面板，开始你的AI编程之旅！

4.2 Trae：国内AI IDE新秀

Trae是国内团队开发的AI IDE，特别优化了中文用户体验，适合初学者快速上手。

🌟 Trae的优势

中文界面：全中文界面，无需担心语言障碍。
国内模型：支持国内AI模型（如智谱AI、文心一言等），网络更稳定。
免费使用：基础功能完全免费，适合学生用户。
快速上手：简洁的界面设计，新手友好。

安装Trae

  1. 访问官网 前往 trae.ai，下载适合你系统的安装包。
  2. 注册账号 使用手机号或邮箱注册Trae账号（国内手机号可直接注册）。
  3. 选择AI模型 登录后可以选择使用的AI模型（推荐选择智谱AI或文心一言，中文理解更好）。
  4. 开始编程 创建一个新项目，用自然语言描述你的需求，Trae会帮你生成代码！
💡 如何选择工具？

初学者：推荐使用 Trae 或 VS Code + Codeium，免费且中文友好。
进阶用户：推荐 VS Code + GitHub Copilot 或 Cursor，功能更强大。
预算有限：VS Code + Continue（开源） + 免费AI模型是最好的选择。
无论选择哪个工具，重要的是开始实践！工具只是手段，编程思维才是核心。

🎓 5. 动手：创建你的第一个本地项目

安装好IDE后，让我们创建第一个本地项目来测试环境是否正常工作。

VS Code界面布局详解

图5: VS Code界面完整布局 - 标题栏、活动栏、侧边栏、编辑区、面板、状态栏

5.1 创建项目文件夹

  1. 选择位置 在电脑上选择一个合适的位置（如桌面或文档文件夹），创建一个名为my-first-project的文件夹。
  2. 在IDE中打开 打开VS Code/Cursor/Trae，选择"文件 → 打开文件夹"，选择你刚创建的文件夹。
  3. 创建HTML文件 在左侧文件资源管理器中右键，选择"新建文件"，命名为index.html。

5.2 使用AI生成代码

现在，让我们用AI来生成一个简单的网页！根据你使用的工具，尝试以下方法：

💬 VS Code + GitHub Copilot

在文件中输入注释：
<!-- 创建一个简单的个人介绍网页，包含标题、简介和联系方式 -->
然后按回车，Copilot会自动建议代码，按Tab键接受建议。

💬 Cursor / Trae

按 Cmd+L（Mac）或 Ctrl+L（Windows）打开AI对话面板，输入：
帮我创建一个简单的个人介绍网页，包含标题、简介和联系方式
AI会直接在文件中生成代码。

5.3 在浏览器中预览

  1. 安装Live Server插件（VS Code） 在扩展商店搜索"Live Server"，安装后右键点击HTML文件，选择"Open with Live Server"，浏览器会自动打开并实时预览。
  2. 直接打开文件 或者，在文件资源管理器中双击HTML文件，会用默认浏览器打开。
  3. 查看效果 你应该能看到一个简单的个人介绍网页！尝试修改内容，看看浏览器中的效果如何变化。

🎯 MG Space 教育理念

在MG Space，我们相信"做中学"（Learning by Doing）是最好的学习方式。 不要担心一开始看不懂所有代码——先运行起来，再慢慢理解。 AI是你的编程伙伴，它帮你跨越"从0到1"的障碍，让你专注于创造而不是语法细节。

🎯 本章任务

🎯 搭建本地开发环境
⭐ 150 XP

你已经学习了AI IDE的基础知识。现在动手搭建你自己的开发环境吧！

  • 基础任务（必做）：
    • 安装VS Code或Cursor或Trae其中一个IDE
    • 安装至少一个AI插件（如果使用VS Code）
    • 创建第一个HTML文件并用AI生成代码
    • 在浏览器中成功预览网页
  • 进阶任务（可选）：
    • 安装中文语言包（如果需要）
    • 安装Live Server插件，实现实时预览
    • 尝试用AI修改网页样式（如改变颜色、字体）
    • 创建一个CSS文件，让网页更美观
  • 挑战任务：
    • 对比不同AI IDE的使用体验，记录优缺点
    • 尝试用AI生成一个完整的个人作品集网页
    • 在家长帮助下，了解版本控制（Git）的基础概念

💡 提示：搭建环境可能需要1-2小时。如果遇到问题，不要害怕向家长、老师或同学求助！ 安装和配置的过程本身就是学习的一部分。

← 上一课：举一反三 下一课：发现好点子 →