步骤 1: Hello Copilot

欢迎来到 “GitHub Copilot 入门” 课程! :robot:

在本课程中，你将和 GitHub Copilot 一起动手参与一个真实项目 —— 帮助优化 Mergington 高中的学生课外活动报名网站。🎻 ⚽️ ♟️

📖 快速了解 GitHub Copilot

GitHub Copilot 是一款 AI 编程助手，可以帮助你更快、更高效地编写代码，让你能把精力集中在问题分析和协作上。

研究证明，GitHub Copilot 能显著提升开发效率，加快软件开发节奏。 如果你感兴趣可查看 GitHub 博客：量化 Copilot 对开发者效率与幸福感的影响。

在 IDE 中使用 Copilot 常见的几种方式：

交互模式	📝 功能说明	🎯 适用场景
⚡ 行内建议（Inline Suggestions）	在你输入代码时自动弹出补全建议，从一行代码到整段函数都可能帮你生成。	快速补全代码、减少重复输入
💬 行内对话（Inline Chat）	针对当前文件或选中代码进行提问和交流。	理解代码、调试函数、局部优化
💬 提问模式（Ask Mode）	用于回答关于代码、项目结构或技术概念的问题。	学习原理、理清思路、提问解惑
🤖 智能体模式（Agent Mode）	默认推荐模式，可以自动修改代码并持续执行任务直到完成。	日常开发任务，从小修改到多文件改动
🧭 规划模式（Plan Agent）	先帮你制定方案、再执行代码修改。	需要先评估方案再动手的场景

在实际使用中，Copilot 不仅可以在 github.com 网站上发挥作用，也可以集成在你常用的开发工具中，比如 VS Code、JetBrains 系列 IDE 和 Xcode 等。

本次课程我们将在基于 VS Code 的云端开发环境 —— GitHub Codespace 中进行。

[!TIP] 想了解更多功能？请参考 GitHub Copilot 功能文档

⌨️ 实操环节: 使用 Copilot 快速了解项目

接下来，我们将启动开发环境，通过 Copilot 帮助理解当前项目概况，并运行项目。

1. 点击下方按钮，在新标签页中打开 Create Codespace 页面，保持默认配置。

   

2. 确认 Repository 显示的是你自己练习的仓库，而不是原始仓库，然后点击绿色的 Create Codespace 按钮。

   • ✅ 你的: /{{full_repo_name}}
   • ❌ 原始: /skills/getting-started-with-github-copilot

3. 等待 VS Code 在浏览器中加载完成。

4. 打开左边栏的扩展（Extensions）菜单，确认 GitHub Copilot 和 Python 插件均已安装并启用。

   

5. 点击 VS Code 顶部的 Toggle Chat 图标，打开 Copilot 聊天侧边栏。

   

   🪧 Note: If this is your first time using GitHub Copilot, you will need to accept the usage terms to continue.

6. 将模式切换为 Ask Mode（提问模式）。

   

7. 输入以下提示词，让 Copilot 介绍项目

   

   请简单介绍一下这个项目的结构。
   我应该如何运行它？
   

   🪧 注意:：Copilot 给出的运行步骤仅供参考，本练习环境已经帮你配置好了。

8. 了解完项目后，让我们实际运行一下！点击左侧边栏的 Run and Debug 菜单，然后按下 Start Debugging 图标。

   

9. 为了在浏览器中查看网页，我们需要找到访问地址和端口。在底部面板中找到 Ports tab页。 找到端口号 8000，将鼠标悬停在其链接上，点击 Open in browser（在浏览器中打开）。

   

⌨️ 实操环节: 使用 Copilot 执行 git 命令 🙋

网站已成功运行起来了。接下来我们借助 Copilot 来完成一个常见操作：创建并发布一个新分支。

1. 在 VS Code 底部面板中，切换到 Terminal 标签页，然后点击右上角的 “+” 号，打开一个新终端窗口。

2. 在新终端中，按下快捷键 Ctrl + I（Windows）或 Cmd + I（Mac），调出 Copilot 的终端内联聊天窗口。

3. 假设我们需要新建一个分支并把它推送到到远程仓库，但我们忘记了命令，我们可以这样对Copilot说：

   

   Hey copilot, how can I create and publish a new Git branch called "accelerate-with-copilot"?
   

   💡 提示: 如果回答不完全符合你的需求，可以继续补充说明，Copilot 会结合上下文继续回答

4. 然后点击 Run 按钮，Copilot 会直接执行命令，无需手动复制粘贴。

5. 稍等片刻后查看 VS Code 左下角状态栏，当前分支应显示为 accelerate-with-copilot。若已切换成功，说明你完成了此步骤！

6. 分支推送到 GitHub 后，Mona 会自动开始检查你的任务。稍等片刻，她会在评论中回复进度与下一步任务。

遇到问题? 🤷

若未收到反馈，请检查以下事项：

• 确认分支名称是否为 accelerate-with-copilot。
• 确认分支是否成功推送到你的仓库中。

步骤 2: 借助 Copilot 快速完成任务

在上一步中，GitHub Copilot 已经帮助我们快速熟悉了项目，这本身就节省了不少时间。接下来，我们来真正解决一个实际问题！

🐛 糟糕，网站上出现了一个 BUG 🐛

我们发现报名流程有点问题：学生竟然可以重复报名同一个活动！😱 考验 Copilot 的时候到了，看它能否帮助我们找出问题来源并修复。

在开始之前，先简单了解一下 Copilot 的工作方式。🧑‍🚀

📖 Copilot 是如何工作的

可以把 Copilot 想象成一位“专业但需要引导的同事”。要让它发挥最大价值，你需要给它两样东西：上下文 和 清晰的指令。另外，不同模型就像不同背景的工程师，各有所长。

• 如何提供上下文?: 在 IDE 中，Copilot 会自动参考当前文件、附近代码以及已打开的标签页。如果使用聊天功能，你也可以手动指定文件。
• 选择模型： 本次练习中选哪个模型不是我们关注的焦点，可以自行尝试，体会不同模型的特点与效果。🤖
• 如何写提示词（prompt）： 指令要清楚明确，这样 Copilot 才能给出最贴切的结果；当然，你也可以随时补充说明，它能理解上下文继续帮你完善。

[!TIP] 你还可以通过 聊天参与者、聊天变量、斜杠命令 和 MCP 工具 等方式进一步增强 Copilot 的能力。

⌨️ 实操环节: 使用 Copilot 修复 bug 🐛

1. 首先让 Copilot 帮我们分析 Bug 可能出在哪里。打开 Copilot Chat 面板，选择 Ask 模式，然后输入：

   

   #codebase Students are able to register twice for an activity.
   Where could this bug be coming from?
   

2. 根据 Copilot 的提示，我们知道问题出现在 src/app.py 文件中的 signup_for_activity 方法。接下来我们手动配合 Copilot 来修复这个问题。

   1. 找到并打开 src/app.py 文件。

      💡 提示: 如果 Copilot 在聊天中提及了该文件，可以直接点击打开

   2. 滚动到文件底部附近，找到 signup_for_activity 方法。

   3. 找到那条 “Add student” 的注释，在它上方添加注册校验逻辑。

   4. 输入下面这行注释后按下回车，稍等片刻，你会看到 Copilot 自动出现代码建议：

      # Validate student is not already signed up
      

      

   5. 按下 Tab 键接受建议，生成代码。

   参考示例代码

   
   

   注意：Copilot 每天都在不断进步，因此生成的结果可能会有所不同。 如果你对当前的建议不太满意，可以参考我们给出的示例结果，用它来继续完成后续步骤。

   @app.post("/activities/{activity_name}/signup")
   def signup_for_activity(activity_name: str, email: str):
      """Sign up a student for an activity"""
      # Validate activity exists
      if activity_name not in activities:
         raise HTTPException(status_code=404, detail="Activity not found")
   
      # Get the activity
      activity = activities[activity_name]
   
      # Validate student is not already signed up
      if email in activity["participants"]:
        raise HTTPException(status_code=400, detail="Student is already signed up")
   
      # Add student
      activity["participants"].append(email)
      return {"message": f"Signed up {email} for {activity_name}"}
   

⌨️ 实操环节: 让 Copilot 生成测试数据 📋

开发阶段，经常需要生成用于测试的模拟数据。Copilot 在这方面非常强！ 这里我们也顺便体验另一种交互方式：Inline Chat（行内对话）

👉 区别说明：

Copilot Chat：适合跨文件、全局问题 Inline Chat：适合针对当前代码块的快速修改

1. 打开 src/app.py 文件，在顶部（大约第 23 行）找到 activities 变量

2. 选中整个 activities 字典，这样可以为 Copilot 提供更充分的上下文信息。

   

3. 使用快捷键打开行内对话，Windows：Ctrl + I，Mac：Cmd + I

   💡 提示: 或者右键选择“Open Inline Chat”

4. 输入提示词，并发送：

   

   Add 2 more sports related activities, 2 more artistic
   activities, and 2 more intellectual activities.
   

5. Copilot 会直接修改代码，并用高亮标出变更内容，检查无误后点击 Keep 保留修改

   示例结果

   
   

   如果你对当前的建议不太满意，可参考下面的完整样例

   # In-memory activity database
   activities = {
      "Chess Club": {
         "description": "Learn strategies and compete in chess tournaments",
         "schedule": "Fridays, 3:30 PM - 5:00 PM",
         "max_participants": 12,
         "participants": ["[email protected]", "[email protected]"]
      },
      "Programming Class": {
         "description": "Learn programming fundamentals and build software projects",
         "schedule": "Tuesdays and Thursdays, 3:30 PM - 4:30 PM",
         "max_participants": 20,
         "participants": ["[email protected]", "[email protected]"]
      },
      "Gym Class": {
         "description": "Physical education and sports activities",
         "schedule": "Mondays, Wednesdays, Fridays, 2:00 PM - 3:00 PM",
         "max_participants": 30,
         "participants": ["[email protected]", "[email protected]"]
      },
      "Basketball Team": {
         "description": "Competitive basketball training and games",
         "schedule": "Tuesdays and Thursdays, 4:00 PM - 6:00 PM",
         "max_participants": 15,
         "participants": []
      },
      "Swimming Club": {
         "description": "Swimming training and water sports",
         "schedule": "Mondays and Wednesdays, 3:30 PM - 5:00 PM",
         "max_participants": 20,
         "participants": []
      },
      "Art Studio": {
         "description": "Express creativity through painting and drawing",
         "schedule": "Wednesdays, 3:30 PM - 5:00 PM",
         "max_participants": 15,
         "participants": []
      },
      "Drama Club": {
         "description": "Theater arts and performance training",
         "schedule": "Tuesdays, 4:00 PM - 6:00 PM",
         "max_participants": 25,
         "participants": []
      },
      "Debate Team": {
         "description": "Learn public speaking and argumentation skills",
         "schedule": "Thursdays, 3:30 PM - 5:00 PM",
         "max_participants": 16,
         "participants": []
      },
      "Science Club": {
         "description": "Hands-on experiments and scientific exploration",
         "schedule": "Fridays, 3:30 PM - 5:00 PM",
         "max_participants": 20,
         "participants": []
      }
   }
   

6. 现在你可以回到网页中，确认刚刚新增的活动是否已经显示出来。

⌨️ 实操环节: 用 Copilot 自动生成提交说明 💬

很好！你已经完成了 Bug 修复和数据扩展，接下来把修改提交到 GitHub。

1. 打开左侧 Source Control（源代码管理） 面板

   💡 Tip: 从这里打开文件可以直接看到改动差异

2. 找到 app.py，点击 + 将修改加入暂存区

   

3. 不要手动输入提交信息，而是点击消息框右边的 ✨ Generate Commit Message 按钮，让 Copilot 自动生成说明。

4. 点击 Commit 按钮提交，然后点击 Sync Changes 推送到 GitHub。

5. 稍等片刻，Mona 会自动检查你的提交并给出反馈和下一步任务

遇到问题? 🤷

如果没有收到反馈，请确认:

• 是否将 src/app.py 文件的修改推送到了 accelerate-with-copilot 分支。

步骤 3: 智能体模式 🚀

📖 理论: 什么是 Copilot Agent Mode?

Copilot agent mode（智能体模式） 可以看作是 AI 编程能力的一次“进化升级”。在这个模式下，它更像一位能够独立完成任务的“协作开发者”，可以根据你的指令自动拆解问题，并一步步完成复杂的开发工作。

它不仅能写代码，还能

• 响应编译和代码检查（lint）错误
• 监控终端输出和测试结果
• 自动循环修正问题，直到任务完成

Agent Mode 一览

方面	👩‍🚀 Agent Mode 表现
自主性与规划能力	能将高层需求拆解为多个步骤，并持续迭代直至完成
上下文获取	利用当前代码环境，并在需要时自动查找相关文件
工具调用	自动选择并使用工具，也支持通过 #codebase 等方式手动指定
安全与控制	涉及敏感操作时会请求确认，确保你始终掌控过程

🧰 Agent Mode Tools

Agent Mode 会借助各种“工具”来完成任务，例如：

• 查找与你需求相关的代码文件
• 获取网页内容
• 执行测试或终端命令

[!TIP] 除了 VS Code 内置工具，你还可以通过 MCP 工具扩展 Agent Mode 的能力，使其更贴合特定业务场景。

更多请阅读 MCP servers 和 GitHub MCP Server

下面我们来具体试试吧! 👩‍🚀

⌨️ 实操环节: 用 Copilot 添加新功能! 🚀

当前网站虽然展示了活动列表，但报名的学生名单却是“隐藏”的 🤫

我们来让 Copilot 帮我们把每个活动的报名人员显示出来！

1. 在 Copilot Chat 窗口底部，将模式切换为 Agent Mode

   

2. 打开以下与网页相关的文件，并拖入聊天窗口作为上下文：

   • src/static/app.js
   • src/static/index.html
   • src/static/styles.css

   🪧 注意: 添加文件上下文不是必须的，如果你跳过这一步，Copilot 的 Agent Mode 仍然可以通过 #codebase 等工具自动搜索相关文件。不过，手动指定相关文件可以帮助 Copilot 更准确理解你的意图（尤其在大型项目中非常有用）

   

   💡 提示: 也可以通过 Add Context... 添加其他类型的上下文，例如 GitHub Issue 或终端输出。

3. 输入提示词，让 Copilot 显示活动的当前参与者。稍等片刻，Copilot 会自动生成并应用修改建议。

   

   Hey Copilot, can you please edit the activity cards to add a participants section.
   It will show what participants that are already signed up for that activity as a bulleted list.
   Remember to make it pretty!
   

   Copilot 完成后，你可以选择是否保留这些修改：

   使用 Keep 按钮接受，或逐条查看后再决定是否保留

   

4. 在确认修改前，请先运行网站进行验证：

   查看活动卡片是否显示了报名人员。必要时刷新页面或重启应用

   

   🪧 注意: 不同人生成的界面可能略有差异，这是正常的

   需要帮助? 🤷

   
   如果网站无法加载，请检查以下几点：

   • 重启 VS Code 调试器，以确保加载的是网站的最新版本。
   • 如果您忘记了网址或已关闭窗口，请回顾第 1 步。
   • 尝试“强制刷新”网页，或在“隐私窗口”中打开，以防缓存问题。

5. 确认无误后，点击 Keep 应用修改

   💡 提示: 您可以在聊天界面直接接受更改、对其进行修改，或提供进一步的指令以进行完善。

⌨️ 实操环节: 添加“取消报名”按钮

接下来我们做一个更开放的功能扩展：允许用户取消报名。

如果结果不理想，您可以尝试其他模型或继续提问以改进结果。

1. 确认当前仍处于 Agent mode.

   

2. 点击 Tools 图标，查看 Copilot 当前可用工具

   

3. 输入提示词，让 Copilot 添加“删除参与者”的功能。

   

   #codebase Please add a delete icon next to each participant and hide the bullet points.
   When clicked, it will unregister that participant from the activity.
   

   这里的 #codebase 工具用于让 Copilot 自动查找相关代码文件

   🪧 注意: 本实验中我们刻意加入 #codebase，是为了让结果更稳定、便于重复验证。 你可以尝试去掉 #codebase 再执行一次，看看 Agent Mode 是否会主动分析整个项目并获取更广泛的上下文信息。

4. 等待 Copilot 完成修改后，检查代码变更并在网页中验证功能是否正常。如果满意，点击 Keep，否则可以继续让 Copilot 调整

   🪧 注意: 如果网页没有更新，可能需要重启下。

5. 接下来，我们再让 Copilot 修复注册 Bug。

   💡 提示: 我们建议您亲自测试注册流程，以便清晰地观察变更前后的行为差异。

   

   I've noticed there seems to be a bug.
   When a participant is registered, the page must be refreshed to see the change on the activity.
   

6. 等 Copilot 修改完成后，再次测试报名流程。

   满意点击 Keep 按钮，否则继续反馈修改。

7. 完成后，将所有修改 Commit 并 push 到 accelerate-with-copilot 分支。

8. 稍等片刻，Mona 会自动检查你的代码并给出下一步指引

步骤 4: 使用 Plan Agent 设计你的实现 🧭

在上一步中，Agent Mode 帮助我们快速完成了功能开发，让迭代速度大幅提升。 🚀

这一步我们换一种更“工程化”的方式：先设计方案，再执行实现。就像架构师一样，先把路径规划清楚，再交给开发去落地，这样可以减少不确定性，让结果更稳定、结构更清晰 🧪

📖 理论: 什么是 Copilot Plan Agent?

Copilot Plan Agent 用于在真正修改代码之前，先帮助你设计完整的解决方案。

它不会一上来就改代码，而是会：

• 分析你的需求
• 主动提出澄清问题
• 生成可执行的实现计划
• 根据你的反馈不断优化方案

Plan Agent 一览

方面	🧭 Plan Agent 表现
目标	在编码前生成结构化实现方案
上下文获取	以只读方式分析代码与需求
协作方式	提问 + 迭代优化计划
迭代能力	支持多轮方案调整
安全机制	在你确认前不会修改任何文件
执行切换	点击 Start implementation 后交由 Agent Mode 执行代码实现

[!TIP] 你可以先提出一个高层需求，然后逐步补充约束条件，让计划越来越完善。

⌨️ 实操环节: 使用 Plan Agent 设计并实现后端测试

目前我们的后端还没有任何测试覆盖，现在我们用 Plan Agent 来设计一套测试方案，并最终自动实现它。

1. 打开 Copilot Chat 面板，将模式切换为 Plan Agent（规划模式）。

   

2. 我们先提出初始需求，让 Copilot 帮我们补充细节：

   

   I want to add backend FastAPI tests in a separate tests directory.
   

3. 请等待 Copilot 生成初步方案。如果它向您提出任何问题，请您尽可能回答。

   🪧 注意: 不需要一次就完美实现，可以逐步完善方案

4. 你可以继续补充约束，让方案更专业，例如：

   例如下面：

   

   Let's use the AAA (Arrange-Act-Assert) testing pattern to structure our tests
   

   

   Make sure we use `pytest` and add it to `requirements.txt` file
   

5. 当你对方案满意后，点击 Start implementation 开始真正干活。

   

   请注意，点击该按钮后，模式已从 Plan 切换到了 Agent Mode。从此刻起，Copilot 即可像往常一样编辑您的代码库。

6. 观察 Copilot 执行，执行过程中可能会请求某些权限（例如，执行命令或创建虚拟环境）。请批准这些权限，以便它能继续工作。

7. 查看本次代码修改，并确认测试已成功运行。如果需要，可以继续引导 Copilot 调整，直到实现全部完成。

   🎯 目标: 确保所有测试运行成功，并显示为绿色通过状态 ✅

   🪧 注意: 任务可能一次性就通过，也可能需要你通过后续提示进行进一步引导和调整

8. 完成后提交代码并推送到 accelerate-with-copilot 分支。

9. 提交完成后，Mona 会自动检查你的测试实现，并给出下一步指引

遇到问题? 🤷

• 如果测试没有运行，可以让 Copilot 帮你执行测试命令
• 确认 pytest 已添加到 requirements.txt 文件中，并且项目中已创建 tests/ 目录

Step 5: 在 Pull Request 中使用 Copilot

恭喜你！🎉 到这里，你已经完成了本次课程的所有编码环节。 接下来，我们需要将把成果合并到主分支中。

📖 理论: 在 Pull Request 中使用 Copilot

Copilot 自动生成 PR 摘要

在之前的课程中，我们创建 Pull Request 时，我们通常会根据备注和提交信息手动撰写摘要。但如果提交记录不够规范或缺少注释，这一步往往就比较耗时。 好消息是，Copilot 可以自动阅读 PR 中的所有更改，帮你生成一份包含重点变更与引用的专业摘要。

Copilot 代码审查

在合并代码前，多一双“眼睛”总是好事。我们可以请 Copilot 先进行一次初步审查，再进入人工代码评审环节。 Copilot 擅长发现常见的小问题，并给出简单的修改建议。不过要记住——它只是辅助工具，最终判断仍需由开发者完成。

[!NOTE] 这些功能仅对 GitHub Copilot 付费用户开放。官方文档

⌨️ 实操环节：使用 Copilot 生成摘要并审查 PR

Copilot PR 摘要和Copilot 代码审查目前属于受限功能，如果你没有访问权限，可以跳过对应步骤。

1. 打开浏览器，进入你的练习项目仓库。

2. 你可能会看到一个提示横幅，建议你创建新的 Pull Request。点击它，或前往顶部的 Pull Requests 标签页，新建一个 PR，参数如下：

   • base 分支： main
   • compare 分支： accelerate-with-copilot
   • 标题： Improve student activity registration system

3. （可选）在 PR 描述编辑栏点击 Copilot 图标，选择 Summary 操作。稍等片刻，Copilot 会自动生成一段基于代码更改的摘要说明。📝

   

4. （可选）在右侧信息面板顶部的 Reviewers 区域，点击 Copilot 图标旁的 Request 按钮。等待片刻，Copilot 会自动在你的 PR 下留下审查意见。

   

   💡 提示： 你可以在日志中看到“已请求 Copilot 审查”的记录。

5. 最后，点击底部的 Merge pull request 按钮。干得漂亮！🎉 你已经完成所有步骤！

6. 稍等片刻，Mona 会自动检查你的成果，并在评论区留下最终反馈。

课程回顾

恭喜你，你已顺利完成本课程，并深入学习了 GitHub Copilot 的强大功能!

以下是你在本次课程中掌握的 Copilot 能力：

• Ask 模式：借助 Copilot 理解和探索整个代码库
• 行内补全：使用 Tab 快速接受代码建议
• 行内聊天：通过 Ctrl/Cmd + I 生成代码或数据
• 智能体模式（Agent Mode）：让 Copilot 自动推进功能开发
• Plan Agent（规划模式）：先制定方案、回答问题，再逐步落地实现
• GitHub 集成能力：自动生成提交信息、PR 摘要和代码审查

接下来可以做什么？

• 探索更多 GitHub Skills 实操课程：

  • 学习如何 将 MCP 集成到 Copilot 中，为 Copilot 增强领域能力
  • 在 自定义你的 GitHub Copilot 体验 中个性化你的助手
  • 通过 使用 GitHub Copilot 现代化遗留代码 挑战旧系统改造
  • 尝试 让 Copilot 成为你团队的一员，体验 Coding Agent 的协作力量