使用 GitHub Copilot 的 Vibe 编码

简介

Copilot 允许您从零创建全新的应用程序、添加功能或修改用户界面，而无需自己编写任何代码。您可以在聊天视图中输入提示，与 Copilot 合作——将 AI 视为您的编码伙伴——并将所有实际的编码工作交给 Copilot。

在本教程中，您将在 VS Code 或 JetBrains IDE 中以这种方式工作，创建一个个人时间追踪网页应用程序。

此方法非常适合开发概念验证、创建可进一步使用更传统的软件开发方法完善的应用草稿，或为您个人使用创建应用程序。

此教程适用于谁？

• Learner: 学习者：您正在学习如何创建软件应用程序。通过与 Copilot 合作并观察其实现您的请求，您可以学到很多。
• Non-developer: 非开发者：您是产品经理，或在工程团队之外的其他角色工作。您想快速创建一个概念验证应用程序，以演示某些特定功能。您主要关注用户体验，而不是代码细节。
• Individual: 个人用户：您想创建一个应用程序，为日常工作或家庭生活提供有用的功能。该应用将在本地计算机上运行，且仅供您使用，因此您并不太在意代码的组织方式。

本教程并非针对拥有成熟代码编写习惯的经验丰富的开发者。经验丰富的开发者会以不同方式使用 Copilot——将其作为问题解决和提升生产力的工具。在本教程中，我们将在聊天中工作，让 Copilot 完成编辑器中的所有工作。

需要多长时间？

有许多变量可能影响您完成本教程所需的时间。然而，您至少应预留两小时。您可以随时稍后返回，继续在 Copilot 聊天中的同一对话中接着进行。

先决条件

在开始之前，您必须具备以下条件

• A GitHub Copilot 订阅计划。
• 以下任意一个 IDE
  • Visual Studio Code
  • 任意支持 Copilot 的 JetBrains IDE，并已安装 GitHub Copilot 扩展。请参阅 在您的环境中安装 GitHub Copilot 扩展。
• 具备在 Visual Studio Code 或 JetBrains 中使用 Copilot Chat 的经验。如果您从未使用过 Copilot Chat，请参阅 在 IDE 中向 GitHub Copilot 提问。

准备工作

我们将在新的 GitHub 仓库中创建一个时间追踪应用。

1. 在 GitHub 网站上，为您的应用创建一个新的私有仓库，并包含初始的 README 文件。参阅 创建新仓库。

2. 克隆该仓库的副本到本地机器。参阅 克隆仓库。

3. 在本地仓库副本中，创建一个新分支进行工作。

   例如，在终端中使用以下命令

   Bash

   git checkout -b BRANCH-NAME
   

使用 Copilot 进行调研

1. 在 VS Code 或 JetBrains IDE 中，将仓库目录打开为新项目或工作区。

2. 关闭当前打开的所有编辑器标签页。

   在没有打开任何编辑器标签页的空项目或工作区中工作，可防止 Copilot 受到这些标签页中代码或信息的影响。

3. 在 IDE 中打开终端窗口。

4. 打开 Copilot Chat，并在聊天视图底部检查 Ask 是当前选中的聊天模式。如果不是，请从聊天模式下拉菜单中选择 Ask。

   

5. 从模型下拉列表中选择一个模型。

   注意

   本教程中提到的响应是在使用 Claude Sonnet 4.5 时获得的。其他模型的响应可能不同，但大致结果相似。Claude Sonnet 4.5 是一个不错的选择（如果可用），因为它会在聊天视图中提供有用的注释，解释其操作过程，并在完成编码后给出详细的摘要。

   如果 Claude Sonnet 4.5 不可用，请将模型设置为 Auto 或选择您喜欢的模型。

6. 在聊天中输入以下提示

   Copilot 提示

   I need to keep a daily log of what I've spent my time on. I want to build a time-tracking application to help me do this. Throughout the day I want to use the app to record what I'm working on as I move between tasks. At the end of the day it should show me the total time I've spent on each item.
   
   What are the typical features of such an app?
   
   What do I need to consider when building this app?
   

   Copilot 会响应详细信息来回答您的问题。

7. 根据 Copilot 的响应并根据需要请求更多信息，以澄清您对应用的想法。

   例如，您可以询问

   Copilot 提示

   Data storage: the application will run locally on my laptop. What's the best way to persistently store data so that I'll have access to historic time-tracking data?
   
   Data structure: How should I structure the data for this application? There will be tasks and projects. Each chunk of time will be associated with a task and some, but not all, tasks will be associated with projects. I will want to see totals for: each task, each project, each task per project.
   

8. 在同一聊天对话中继续提问，以构建对您想要构建的应用的更清晰概念。

   保持聊天对话打开，因为 Copilot 将在接下来的步骤中使用它。

规划实现

您现在可以开始规划应用的初始实现。建议先从一个基本版本开始迭代，这样可以更容易先让核心功能工作，然后再添加特性。

1. 在前一节使用的同一 Copilot Chat 对话中，通过在聊天视图底部的聊天模式下拉菜单中选择 Plan，将模式从 ask 切换为 plan。

2. 输入以下提示

   Copilot 提示

   I want to build a time-tracking application that allows me to keep track of how much time I spend on tasks during my working day. This should be a web app that runs locally on my computer. Plan the implementation of a basic, initial version of this application. This first version should allow me to:
   
   - Add, edit and delete projects and tasks - each a name with a maximum of about 50 characters
   - Quickly click to select a project and task and record the start time
   - Click another task to stop the current timer, recording the stop time, and recording the start time for the new task
   - Pause/resume/end the current task
   - Display the totals of times I have spent on each: task, project, and task per project.
   
   Time is always recorded for a specific task. A task can optionally be associated with a project.
   
   Store data for each day, but for this version do not include any user interface or functionality for looking at historical data, or compiling statistics. The initial version of the application should be limited to today's time tracking.
   
   Notes:
   - Tasks never overlap
   - Time should be accurate to the minute by recording the day, hour, minute tasks are started and stopped and calculating the duration from this
   - Design the web UI for display on a desktop monitor
   - Keep things very simple for the initial version. Do not add any other features not mentioned in this prompt
   

   Copilot 会回复类似以下内容

   计划：构建时间追踪网页应用

   一个使用原生 HTML/CSS/JavaScript 与 localStorage 的单页面网页应用，用于追踪每日任务时间。该应用在侧边栏显示项目/任务，在中心面板显示活动计时器，并按任务和项目计算每日总计。

   步骤

   1. 创建项目结构，包括 index.html、styles.css、app.js 和 storage.js，实现一个自包含的原生 JavaScript 应用

   2. 实现数据存储层，在 storage.js 中使用 localStorage，建立 projects、tasks、timeEntries 的集合，包含 CRUD 操作和 ID 生成

   3. 构建 HTML 结构，在 index.html 中设定三个主要区域：左侧侧边栏用于项目/任务管理，中心面板用于活动计时器及控制（开始/暂停/继续/停止），右侧面板显示每日总计

   4. 实现核心计时逻辑，在 app.js 中处理任务选择（自动停止先前任务，自动启动新任务），暂停/继续/停止操作，以及以分钟精度的时间计算，存储 { taskId, startTime, endTime, duration }

   5. 创建 UI 渲染函数，在 app.js 中实现项目/任务列表的内联编辑/删除、实时更新的活动计时显示，以及按任务、项目和每项目任务汇总的总计面板

   6. 为界面设定样式，在 styles.css 中实现桌面优化的三列布局，为活动/暂停的计时器提供明确的视觉状态，并为添加/编辑项目和任务的表单提供简洁样式

   进一步考虑事项

   1. 日期处理——将所有时间存储为 ISO 字符串，并按今天的日期（YYYY-MM-DD）过滤条目。日界限应是午夜还是自定义时间（例如凌晨 4 点）？
   2. 计时器显示格式——显示已过时间为 HH:MM 还是 H 小时 M 分钟？每秒更新还是每分钟更新？
   3. 未分配任务——如何在 UI 中显示没有项目的任务？在侧边栏顶部/底部单独的 “无项目” 区域，还是按字母顺序混合显示？

3. 回答 Copilot 提出的 “进一步考虑事项” 问题。例如，您可以使用以下提示进行回复

   Copilot 提示

   - Date handling: only consider the local date. This app is only going to be used by one person in one timezone. Set the day boundary to 4 am.
   - Time display: Show elapsed time as HH:MM. Don't track seconds.
   - Unassigned tasks: I've changed my mind. All tasks should be associated with a project, but there should be a built-in project called "No Project" (which the user can't delete or rename). All tasks should be associated with this project until the user chooses another project.
   
   If the user is changing tasks for the same project then they should be able to do this with one click (assuming the new task has already been defined). If they are doing the same task but for a different project, this should also be possible to change with one click (assuming the new project is already defined). If they want to track time for a different task in a different project then they should be able to do this with 2 clicks.
   

   Copilot 可能会进一步提出供您考虑的问题。

4. 您可以回答其中的一部分或全部，或者如果您认为计划已有足够细节，则直接进入下一阶段。

   Copilot 的响应是非确定性的，因此它提出的问题会有所不同，但我们假设其响应包含以下问题

   新任务默认项目——在未指定项目时添加新任务，是分配到 “无项目” 还是当前激活/选定的项目？建议：默认分配到当前选定/激活的项目，若没有则使用 “无项目”。

   计时精度边缘情况——如果用户在同一分钟内切换任务（如 10:30:15 到 10:30:45），是否产生 0 分钟的记录或直接忽略？建议：忽略并视为即时切换，不记录。

   您可以通过输入以下提示来回答这些问题

   Copilot 提示

   New task default project - When adding a new task without actively specifying a project, use the currently selected/active project with "No Project" as the default when the user has not actively selected any other project.
   
   Timer precision edge case - If user switches or ends tasks within the same minute as the start time then delete this entry. Only time entries of more than one minute should be recorded.
   

5. 如果您认为还有其他问题需要解答，请继续迭代。

6. 保持聊天对话打开，因为 Copilot 将在接下来的步骤中使用它。

使用 Copilot 云代理构建您的应用程序

当您认为计划已足够详细时

1. 点击聊天视图中的 Start Implementation。

   根据您的 IDE，这将立即启动代理，或将 Start Implementation 作为提示添加，您随后需要提交它。

   请注意，聊天模式已从 “Plan” 切换为 “Agent”。

2. Copilot 将请求您批准执行诸如编辑敏感文件、运行命令或向 Git 添加文件等操作。

   • 在 VS Code: 点击 Allow。

     

     或者，点击 Allow 按钮右侧的箭头，在下拉菜单中选择 Allow in this Session。

   • 在 JetBrains 中

     • 当询问是否将文件添加到 Git 时，选中 Don't ask again 复选框，然后点击 Add。

     • 当询问是否运行命令时，点击 Continue。

       

   Copilot 将开始实现您的应用的初始版本。

3. 如果 Copilot 在完成响应后仍未完成安装，或似乎卡住，请根据需要采取以下补救措施。

   • 缺少组件

     如果 Copilot 表示因缺少必需组件（例如 Node.js）而无法继续，您可以输入提示让 Copilot 下载并安装缺失的组件。

   • 过程耗时较长

     某些步骤可能需要几分钟才能完成。请耐心等待，允许代理完成每一步。动画的旋转图标表示代理当前正在执行命令。

     例如，在 JetBrains IDE 中

     

   • 需要输入

     有时 Copilot 会运行需要手动输入的命令。

     如果 Copilot 看似卡住，请检查 IDE 的终端窗口，查看是否有命令等待您的操作。Copilot 将等待您在终端中输入响应后继续。

   • 错误信息

     如果在开发过程中出现任何错误信息，请将错误信息复制到聊天提示框中，询问 Copilot 修复问题。

     注意

     您可能需要以这种方式与 Copilot 迭代，要求其调试并修复问题，直至得到可在浏览器中查看的可运行应用。

   • Copilot 的响应似乎卡住了

     如果响应中出现旋转图标并且在等待数分钟后（且已确认终端无需您输入）仍无任何进展，您可以停止并重新开始对话。

     点击聊天视图底部的取消按钮。例如，在 VS Code 中

     

     然后输入提示

     Copilot 提示

     Your previous response stalled. Try again, picking up from where you left off.
     

4. 通常，在编码过程的后期，Copilot 会请求您允许打开一个不受信任的网页来运行应用

   

   请授予此权限。

5. 当代理完成对应用的工作后，它会在聊天面板中显示构建内容的摘要。通常会提供指向运行中应用的链接。

   时间追踪应用可能也会在 IDE 的浏览器标签页中显示，这有助于确认页面可用。但您仍应在默认浏览器中检查应用，以验证真实的用户体验。

   点击聊天面板中的链接，在默认浏览器中打开应用。

   如果 Copilot 的聊天响应中未显示链接，请等待几分钟，因为代理可能仍在部署应用。如果仍未显示链接，您可以提示 Copilot 显示链接。

   Copilot 提示

   Confirm the implementation is complete. If so, give me a link to the running application.
   

6. 如果 Copilot 的最终信息为您提供了启动应用的指令（例如运行 npm start），而未提供运行中应用的链接，您可以请求 Copilot 为您运行该命令并检查是否成功。例如

   Copilot 提示

   Run npm start for me and confirm everything is working
   

   如果 Copilot 无法自行运行所有命令，它会向您提供可以复制粘贴到终端的命令。

测试您的应用程序

1. 查看您的应用网页。

   以下是 Copilot 创建的时间追踪应用示例

   
   

   注意

   Copilot 为您生成的应用可能与上述示例大相径庭。

2. 尝试使用该应用。添加几个项目和若干任务，然后开始对任务进行时间追踪。

3. 在使用该应用的初稿时，记录下两三件最需要更改的关键点。随后步骤中您将针对这些点进行修复。目前无需记录所有想改动的地方，只需先确定最迫切需要修复的事项。稍后您将有时间让所有功能和外观符合预期。

4. 如果应用未加载或出现错误，请在聊天提示框中描述问题，复制粘贴任何错误信息，并请求 Copilot 调试并修复。

5. 在您审阅完应用的初稿并确认其至少能够基本运行后，返回 IDE。

6. 可选：如果您熟悉 Copilot 为您编写的代码类型，请在编辑器中显示 Copilot 已更改的文件并审阅更改。如有需要，您也可以自行修改。

7. 在 Copilot Chat 视图中点击 Keep（VS Code）或 Accept All（JetBrains IDE），接受更改并从编辑器中移除差异行。

   现在您已经拥有一个可迭代的基础版本，可进一步改进功能和用户界面。

8. 将更改提交到 Git。

   在每次成功迭代后提交更改是个好习惯，这样如果您不喜欢 Copilot 的某些更改，可以轻松回退到之前的版本。

9. 关闭所有打开的编辑器标签页，但保持 Copilot Chat 视图打开，以便继续在同一聊天对话中工作。

迭代更改

1. 在将初始版本提交到 git 后，您可以对应用进行更改，修复在审查页面时记下的某个问题。

   例如，实现可能把任务绑定到项目上，导致为某一项目创建的任务在切换到另一个项目时不显示。若要更改为允许创建可用于任意项目的任务，请在同一对话中（仍保持代理模式）输入提示，例如

   Copilot 提示

   Tasks should not be tied to projects in the user interface, as they currently are. When the user selects a project, allow them to choose any currently defined task. There should be a many-to-many relationship between projects and tasks.
   

2. 同样，Copilot 可能会要求您批准其对代码所做的更改。点击 Approve 或 Continue。

3. Copilot 完成更改后，返回浏览器并刷新页面。

4. 审阅修改后的应用，并告知 Copilot 若更改未正确实现。

   您可能会发现不止一个需要修复的地方，但为让 Copilot 专注一次只处理一件事，请将每个提示限制在单个任务上，并通过一系列提示与响应迭代，直至问题解决，然后再继续下一个更改。

5. 如果网页布局存在问题，例如元素重叠或对齐不当，您可以截图并粘贴到聊天中，然后输入提示，例如

   Copilot 提示

   This part of the web page looks bad. Fix it.
   

6. 在满意地实现更改后，点击 Keep 或 Accept All 并提交更改。

7. 可选：根据您的工作流程——例如在开发团队中工作——您可以在此时以及每次重大更改后发起拉取请求。这将使更改得到审查并合并到仓库的默认分支，以便其他人可以参与代码工作。

8. 继续迭代您的应用。

   例如，您可能想为应用提供不同的用户界面样式。在仍处于代理模式时，您可以提示 Copilot

   Copilot 提示

   I don't like the look of the user interface. Suggest some alternative web UI libraries I could choose to give the app a more formal, business-like appearance.
   

   Copilot 将列出一些 UI 库。

9. 选择其中一个库并让 Copilot 使用它。例如

   Copilot 提示

   Alter the user interface to use Bootstrap 5. I want the app to look like a professionally designed business application.
   

   Copilot 将重构应用以使用您选择的用户界面库。

10. 检查结果，如果您对改进后的外观满意，则提交更改。

11. 时间追踪应用的常见需求是能够输出工时表。例如，作为承包商，您可能需要随发票提交工时表。于是我们添加生成 PDF 的功能。

    使用以下提示

    Copilot 提示

    Add a button to the user interface which generates a PDF timesheet for the work the user has tracked today. The timesheet should show the total time spent on task for each of the defined project for which data has been recorded today. Under this show the total time spent on each project. Then show the total time spent on each task irrespective of projects. Finally show a chronological lists of tasks performed during the day with the time spent on each.
    

示例应用

在与 Copilot 合作构建、扩展并改进时间追踪器后，应用可能如下所示

改进您的软件项目

1. Copilot 可以通过添加和运行测试帮助您使项目更健壮。测试有助于防止 bug 进入代码库。您可以在代理模式下提示 Copilot

   Copilot 提示

   Add a comprehensive suite of tests for this application. These should include unit tests, integration tests, component tests, database tests, and end-to-end tests. Locate the tests in a `tests` directory. Run the tests and fix any problems that are identified.
   

2. 在项目中始终最好拥有 README 文件。README 应提供项目概览并给出使用应用的说明。您可以请求 Copilot 创建或更新 README 文件。

   Copilot 提示

   Add or update a README.md file. This should provide an introduction to the application, describing its primary use and highlighting its features. It should give easy to follow user instructions for using the application in the browser. It should provide admin instructions, explaining how to deploy the application. Finally it should give an overview of the technologies used to build the application and some basic information for developers on how to maintain the code and extend the application.
   

3. 现在您已将应用的初始代码添加到仓库中，应该为 Copilot 添加自定义指令文件。自定义指令文件通过提供仓库特定的指导和实现偏好来改进 Copilot 在仓库中的响应。要添加自定义指令文件

   • 在 VS Code: 点击聊天视图顶部的 “Configure Chat” 齿轮图标，然后点击 Generate Chat Instructions。

   • 在 JetBrains IDE 中: 在 Copilot Chat 的代理模式下，提交类似以下提示的内容

     Copilot 提示

     Analyze this codebase and create or update `.github/copilot-instructions.md` to guide AI agents.
     
     Discover essential knowledge for immediate productivity:
     - Architecture: major components, service boundaries, data flows, and structural decisions
     - Developer workflows: builds, tests, debugging commands
     - Project conventions that differ from common practices
     - Integration points and cross-component communication
     
     Guidelines:
     - Merge intelligently if file exists
     - Write ~20-50 concise lines with markdown structure
     - Include specific codebase examples
     - Focus on THIS project's approaches, not generic advice
     - Document discoverable patterns, not aspirational patterns
     - Reference key files/directories that exemplify important patterns
     

4. 审阅指令文件。如果您认为指令需要更多细节，可以手动将其添加到文件并保存。例如，若文件中尚未包含关于运行测试的指令，您可以添加相应指令。

   Text

   ## Running tests
   
   Always run the complete test suite after completing a batch of code changes, to ensure the changes do not break or adversely affect any part of the application. Fix any test failures and then run the tests again to verify the fix.
   

后续步骤

• 继续在此项目上迭代，改进您的时间追踪器。
• 使用相同的方法，创建另一个应用。
• 了解另一种无需亲自编写代码即可创建应用的方法。参见 关于 GitHub Spark。