使用 GitHub Copilot 进行 Vibe 编码

介绍

Copilot 允许你从头开始创建全新的应用程序、添加功能或更改用户界面，而无需亲自编写任何代码。 可以使用 Copilot，在聊天视图中输入提示，使用 AI 作为编码伙伴，并将所有实际编码留给 Copilot。

在本教程中，你将在 VS Code 或 JetBrains IDE 中以这种方式创建个人时间跟踪 Web 应用。

此方法适用于开发概念证明、创建应用程序草稿，以便进一步使用更传统的软件开发方法开发应用程序，或创建应用程序以供个人使用。

本教程面向谁？

•         **学习者：** 你正在学习如何创建软件应用程序。 通过使用 Copilot 并查看它如何实现你的请求，你可以学到很多东西。
  

•         **非开发人员：** 你是产品经理，或在工程团队之外担任另一个角色。 你想要快速创建概念证明应用程序来演示一些特定功能。 你主要关注用户体验，而不是代码的详细信息。
  

•         **个人：** 你希望创建一个应用程序，以提供一些有用的功能来帮助你在日常工作或家庭生活中。 应用程序将在您的计算机本地运行，并且只有您会使用它，因此您并不过于担心代码是如何编写和整合的。
  

本教程不适用于具有在编辑器中编写代码的既定做法的经验丰富的开发人员。 经验丰富的开发人员将以不同的方式使用 Copilot 作为解决问题和提高生产力的工具。 在本教程中，我们将在聊天中进行操作，并让 Copilot在编辑器中完成所有工作。

此过程需要多长时间？

有许多变量可能会影响完成本教程可能需要多长时间。 但是，应至少允许两个小时。 在任何时候，你都可以稍后返回，从 Copilot对话 中的同一对话中中断的地方继续。

先决条件

在开始之前，您必须具备以下各项： * GitHub Copilot 订阅计划。

• 以下 IDE 之一：
  • 数据变量.product.prodname_vscode %}
  • 任何支持 Copilot 的 JetBrains IDE，并安装了JetBrains的 GitHub Copilot 扩展。 请参阅“在环境中安装 GitHub Copilot 扩展”。
• 在 Visual Studio Code 或 JetBrains 中使用 Copilot对话 的一些经验。 如果以前从未使用过 Copilot对话，请参阅 在 IDE 中提问GitHub Copilot 问题。

准备工作

我们将在新的 GitHub 存储库中创建时间跟踪应用。

1. 在 GitHub 网站中，为应用程序创建新的专用存储库，包括初始自述文件。 请参阅 “创建新存储库”。

2. 将存储库的副本克隆到本地计算机。 请参阅 克隆存储库。

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

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

   Bash

   git checkout -b BRANCH-NAME
   

使用 Copilot 进行研究

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

2. 关闭当前打开的任何编辑器选项卡。

   在没有打开编辑器选项卡的情况下，在空项目或工作区中工作，可防止 Copilot 受这些选项卡中的任何代码或信息的影响。

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

4. 打开 Copilot对话，在聊天视图底部检查询问是否为当前选择的聊天模式。 如果不是，请从聊天模式下拉列表中选择 “询问 ”。

   

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

   注意

   本教程中提到的响应在使用 Claude Sonnet 4.5 时收到。 其他模型会以不同的方式做出响应，但应获得大致类似的结果。 Claude Sonnet 4.5 是一个不错的选择，如果可用，因为它在聊天视图中提供了有用的评论，解释了它正在执行的作，并在完成编码后提供详细的摘要。

   如果 Claude Sonnet 4.5 不可用，请将模型设置为 “自动 ”或选择所选的模型。

6. 在聊天中输入此提示：

   Copilot prompt

   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 prompt

   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对话 对话中，通过从聊天视图底部的聊天模式下拉列表中选择“计划”，从询问模式切换到计划模式。****

2. 输入以下提示：

   Copilot prompt

   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 回答类似这样的内容：

   计划：构建时间跟踪（Time-Tracking）Web 应用程序

   单页 Web 应用程序，用于使用 vanilla HTML/CSS/JavaScript 和 localStorage 跟踪每日任务时间。 应用在边栏中显示项目/任务，显示活动计时器，并按任务和project计算每日总计。

   Steps

   1.           为自包含的 vanilla JavaScript 应用程序**创建具有 `index.html`、`styles.css`、`app.js` 和 `storage.js` 的项目结构**
      

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

          `index.html`，其中包含三个主要部分：用于project/任务管理的左侧边栏、活动计时器和控件的中心面板（开始/暂停/恢复/停止），以及每日总计的右面板
   

   4.           在 **** 中`app.js`，处理任务选择（自动停止上一个，自动启动新项）、暂停/恢复/停止操作以及存储 `{ taskId, startTime, endTime, duration }` 的分钟精度时间计算
      

   5.           在 `app.js` 中为项目/任务列表**创建 UI 呈现函数**，包括内联编辑/删除、实时更新的活动计时器显示以及按任务、项目和每个项目的任务聚合的总计面板
      

   6.           在 **** 中使用桌面优化的三列布局、活动/暂停计时器的清晰视觉状态以及添加/编辑项目和任务的简单表单`styles.css`
      

   进一步注意事项

          **日期处理** - 按今天的日期将所有时间存储为 ISO 字符串和筛选条目。`YYYY-MM-DD` 日边界应该是午夜还是自定义时间（例如深夜工人的凌晨 4 点）？
   

          **计时器显示格式** - 将已用时间显示为`HH:MM`还是`H hours M minutes`？ 每隔一秒或每分钟更新一次？
   

             **未分配的任务** - 如何在 UI 中显示没有项目的任务？ 在侧栏顶部/底部单独显示“无项目”部分，还是与其他项目按字母顺序混合显示？
   

1. 回答 Copilot 所提出的“进一步注意事项”问题。 例如，可以使用以下提示进行响应：

   Copilot prompt

   - 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 可能会回答更多问题供你考虑。

2. 可以回答部分或全部问题，或者，如果你觉得计划有足够的详细信息，则可以跳到下一阶段。

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

          **新任务默认项目** - 添加新任务时，如果未指定项目，应该分配给“无项目”还是当前活动或选定的项目？ 建议：当前选定/活动项目，其中“无项目”作为备用选项。
   

          **计时器精度边缘情况** - 如果用户在同一分钟内切换任务（例如，10:30:15 到 10:30:45），是否应该创建一个时长为 0 分钟的条目，还是应该忽略？ 建议：忽略并视为即时切换而不录制。
   

   你可以通过输入提示来决定回答这些问题：

   Copilot prompt

   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.
   

3. 如果你觉得有进一步的问题需要回答，请继续迭代。

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

使用 Copilot编程助理

构建应用程序

当你认为该计划包含足够的详细信息时：

1. 在 Copilot对话 视图中单击开始实施。

   根据 IDE，这会立即启动代理，或者会添加“开始实施”作为提示，然后提交该代理。

   请注意，聊天模式从“计划”切换到“代理”。

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

   •      **在 VS Code 中：** 单击“允许”。****
     

     

     或者，单击允许按钮上的箭头，在下拉菜单中选择允许在此会话中。

   •      **在 JetBrains 中：**
     

     • 当系统询问是否要将文件添加到 Git 时，请 选中“不再询问 ”复选框，然后单击“ 添加”。

     • 当系统询问运行命令时，请单击“ 继续”。

       

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

3. 如果 Copilot 在未完成安装的情况下完成响应，或者如果 Copilot 似乎已停止，请根据需要采取以下补救措施：

   •      **缺少组件**
     

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

   •      **进程需要很长时间**
     

     某些步骤可能需要几分钟才能完成。 请耐心等待，并允许代理完成该过程的每个部分。 动画旋转图标指示代理当前正在处理命令。

     例如，在 JetBrains IDE 中：

     

   •      **请输入**
     

     Copilot 偶尔会运行需要一些手动输入的命令。

     如果 Copilot 似乎已停止，请检查 IDE 的终端窗口，查看命令是否需要你执行操作。 Copilot 将等待你在终端中输入响应，然后再继续。

   •      **错误消息**
     

     如果在开发应用程序时收到任何错误消息，请将错误消息复制到聊天提示框中，并要求Copilot解决问题。

     注意

     你可能必须以这种方式循环访问 Copilot，要求它调试和解决问题，直到它有一个可在浏览器中查看的工作应用程序。

   •      **Copilot 的响应似乎停滞**
     

     如果在响应中显示旋转图标，但等了几分钟后（并且确认终端上不需要你的任何交互），依然没有反应，你可以停止并重启对话。

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

     

     然后输入提示：

     Copilot prompt

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

4. 通常，在编码过程结束时，Copilot 将请求你为应用程序打开不受信任的网页的权限：

   

   授予你对此的权限。

5. 当代理完成对应用程序的工作时，它将显示它在聊天面板中生成的内容的摘要。 通常，它将提供指向正在运行的应用程序的链接。

   时间跟踪器应用程序也可能显示在 IDE 中的浏览器选项卡中。 这可用于确认页面是否可用。 但是，应始终在默认浏览器中检查应用程序，以验证真实的用户体验。

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

   如果在 Copilot 的聊天响应中未显示链接，请稍等几分钟，因为代理可能正在部署应用程序。 如果链接仍未显示，你可以提示 Copilot 显示一个链接：

   Copilot prompt

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

6. 如果 Copilot 的最终消息中提供了关于启动应用程序的指示（例如运行 npm start），而不是提供一个用于访问正在运行的应用程序的链接，那么你可以要求 Copilot 帮助你执行该命令，并确认其已成功完成。 例如：

   Copilot prompt

   Run npm start for me and confirm everything is working
   

   如果 Copilot 无法自身运行所有命令，它将为你提供可以复制并粘贴到终端中的命令。

测试应用程序

1. 查看应用程序的网页。

   下面是由 Copilot 创建的时间跟踪应用程序的几个示例：

   
   

   注意

   Copilot 为你生成的应用程序可能与上面显示的示例有很大不同。

2. 请尝试使用应用程序。 添加几个项目和一系列任务，然后开始跟踪任务的时间。

3. 在试用应用程序的第一个草稿时，请记下需要更改的两到三个最重要的事项。 在后续步骤中，你将致力于解决这些问题。 目前，不要花点时间注意到你想要更改的所有内容。 只需确定需要首先修复的最紧迫的事情。 你将有时间让一切正常运行，并在稍后的过程中按照你想要的方式进行。

4. 如果应用程序未加载或显示错误，请在聊天提示框中详细描述问题，并复制并粘贴任何错误消息，并要求 Copilot 进行调试并解决问题。

5. 查看应用程序的初始草稿并确定它至少以基本的方式运行后，请返回到 IDE。

6.        _
          **可选**：如果你熟悉由 Copilot 为你编写的代码类型。_ 在编辑器中显示 Copilot 已更改的文件，并查看更改。 如果需要，可以自行进行更改。
   

7. 单击 保留（在 VS Code 中）或 接受全部（在 JetBrains IDE 中），在 Copilot对话 视图中接受更改，并从编辑器中删除差异行。

   现在，你有一个可循环访问的应用程序的基本版本，以改进和扩展功能和用户界面。

8. 将更改提交到 Git。

   每次成功的迭代后提交更改始终是个好主意，因为这样如果你发现自己不喜欢 Copilot 为你所做的一些更改，可以轻松地恢复到以前的版本。

9. 关闭任何打开的编辑器选项卡，但保持 Copilot对话 视图打开，因为你将继续在同一聊天对话中进行工作。

循环访问更改

1. 将初始版本提交到 git 后，可以更改应用程序，修复查看站点时记下的内容之一。

   例如，实现可能已经将任务与项目绑定，这样在选择另一个项目时，为一个项目创建的任务不会显示。 若要更改此项（允许创建可用于任何项目的任务），请在 Copilot 仍处于代理模式时，在同一对话中输入另一个提示。 可以使用提示，例如：

   Copilot prompt

   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 可能会要求你批准它对代码所做的更改。 单击“ 批准 ”或 “继续”。

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

4. 查看修订后的应用程序，如果更改未正确实现，请告知 Copilot。

   你可能会发现需要修复的事情不止一件，但为了让 Copilot 一次专注于一件事，你应该将每个提示限制为一个任务，并根据需要在一系列提示和响应中循环，直到问题得到解决。 然后，继续处理你想更改的下一件事。

5. 如果网页的布局出现问题（例如重叠或对齐不对齐的元素），可以拍摄屏幕截图，将其粘贴到聊天中并输入提示，例如：

   Copilot prompt

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

6. 完全实现更改后，单击“ 保留 ”或“ 全部接受 ”并提交更改。

7.        _
          **可选**：_ 根据你的工作实践（例如，如果你在开发团队中工作），你此时可能会决定，并在每次重大更改后提出拉取请求。 这样，便可以查看更改并将其合并到存储库的默认分支中，以便其他人可以处理代码。
   

8. 继续迭代您的应用程序。

   例如，你可能希望为应用提供不同的用户界面样式。 在这种情况下，你仍处于代理模式时，可以提示 Copilot：

   Copilot prompt

   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 prompt

   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 prompt

    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 prompt

   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 prompt

   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 中：** 单击聊天视图顶部的“配置聊天”齿轮图标，然后单击“ **生成聊天说明**”。
     

   •      **在 JetBrains IDE 中：** 在 Copilot对话 的代理模式下，提交如下提示：
     

     Copilot prompt

     Analyze this codebase and create or update `.github/copilot-instructions.md` to guide AI coding 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”。