将 GitHub Copilot 与 JavaScript 结合使用

使用 GitHub Copilot（一个 AI 结对编程器，可在您编码时提供自动完成式建议）来处理 JavaScript

学习目标

学完本模块后，您将能够：

• 在 Visual Studio Code 中启用 GitHub Copilot 扩展。
• 制作提示，可以从 GitHub Copilot 生成有用的建议。
• 使用 GitHub Copilot 改进 JavaScript 项目。

先决条件

• 对 JavaScript 有基本的了解，例如变量和条件
• 能够使用 Git 和 GitHub 进行版本控制
• 访问 GitHub Copilot 服务

介绍

GitHub Copilot 是一个 AI 编码合作伙伴，可在您编码时提供自动完成建议。通过键入代码或用自然语言描述代码来获取建议。

Copilot 会分析您的文件和相关文件，并在文本编辑器中提供建议。它使用 OpenAI Codex（OpenAI 开发的新人工智能系统）来帮助从书面代码和注释中获取上下文，然后建议新行或整个函数。

GitHub Codespaces 是一个在云中运行的托管开发人员环境，可以使用 Visual Studio Code 运行。您可以为 GitHub 上的任何开发项目自定义开发体验，预安装依赖项、库，甚至 Visual Studio Code 扩展和设置。

场景：改进项目

作为开发人员，您希望能够更高效地为新项目和现有项目更快地键入代码。对于此任务，您希望 AI 助手能够改进代码编写、文档、测试等方面的开发人员工作流程。

在本模块中，您将了解如何使用 GitHub Copilot 以及应用示例来修改存储库，在输入初始代码后使用提示自定义滚动行为和实时建议。

我会学到什么？

学完本模块后，您将获得以下技能：

• 在 Codespaces 中配置 GitHub 存储库并安装 GitHub Copilot 扩展。
• 精心设计的提示以从 GitHub Copilot 生成建议
• 应用 GitHub Copilot 来改进您的项目。

主要目标是什么？

成功完成本模块后，您将能够使用提示在 GitHub Codespaces 中使用 GitHub Copilot 自定义 JavaScript 项目。

先决条件

技能：

• 对 JavaScript 和文本编辑器有基本了解。
• 基本理解 Git 和 GitHub 基础知识并运行和git等基本命令git addgit push

账户：

• 一个GitHub 帐户
• 访问 GitHub Copilot

什么是 GitHub Copilot

通常，当您编写代码时，您需要查阅官方文档或其他网页，以记住语法或如何解决问题。当代码无法运行时，您也可能会花费数小时尝试解决问题。此外，您还花时间编写测试和文档。所有这些任务都很耗时，为了提高效率，您可以使用代码片段或依赖 IDE、集成开发环境中的工具，但有更好的方法吗？

它是如何工作的？

GitHub Copilot 是一个 AI 助手，您可以在 IDE 中使用它，它能够生成代码等。 GitHub Copilot 使用提示、自然语言，并根据您键入的内容提供建议。例如，提示可以如下所示：

然后 Copilot 继续生成响应，您可以选择接受或拒绝。对提示的响应可能类似于以下内容：

它如何识别提示

如果您满足以下条件，副驾驶可以判断某件事是提示、指令：

将其作为注释键入代码文件中，文件结尾类似于.py或.js例如。

在 Markdown 文件中键入文本，然后等待 Copilot 在几秒钟内返回响应。

接受建议

如果您使用黑色作为文本颜色，您从 Copilot 得到的是建议，文本显示为灰色代码。要接受建议，您需要按“Tab”键。

副驾驶可能会建议不止一件事，并且可以使用“ctrl + Enter”键在建议之间循环并选择最合适的一项。

如何设置 GitHub Copilot

要使用 GitHub Copilot，您需要满足以下条件：

创建 GitHub 帐户，因为 Copilot 是 GitHub 服务，您需要 GitHub 帐户才能使用该服务。

注册，您需要通过其网页注册 Copilot。

在 GitHub 中选择您的个人资料，然后转到设置，在 Copilot 下您可以启用访问或注册免费试用。

要使用 GitHub Copilot，您需要将其作为扩展安装到 IDE 中。

扩展适用于 Visual Studio、Visual Studio Code 等主要 IDE。

练习 - 设置 GitHub Copilot 以使用 Visual Studio Code

在本练习中，我们使用 GitHub 模板为 JavaScript 个人作品集前端 Web 应用程序创建一个新存储库。

注册 GitHub Copilot

在安装和使用扩展程序之前，您需要通过为您的帐户设置免费试用或订阅来进行注册。

笔记

教育工作者、学生和精选开源维护者可以免费注册 Copilot，了解如何操作：Step-by-Step: Setting Up GitHub Student and GitHub Copilot as an Authenticated Student Developer

环境搭建

首先，您需要启动 Codespaces 环境，该环境已预先配置了 GitHub Copilot 扩展。

1. 在浏览器中打开具有预配置环境的 Codespace 。
2. 在创建代码空间页面上，查看代码空间配置设置，然后选择创建新代码空间
3. 等待代码空间启动。此启动过程可能需要几分钟时间。
4. 该项目中的其余练习在此开发容器的上下文中进行

重要的

所有 GitHub 帐户每月均可免费使用 Codespaces 最多 60 小时，并有 2 个核心实例。有关更多信息，请参阅GitHub Codespaces 每月包含的存储和核心时间。

JavaScript 组合

完成后，Codespaces 会在底部加载一个终端部分。 Codespaces 在您的容器中安装所有必需的扩展和依赖项。完成后，Codespaces 将npm start在您的 Codespace 中启动 Web 应用程序。

当 Web 应用程序成功启动后，终端中会显示一条消息，显示服务器正在 Codespace 内的端口 1234 上运行。

将 GitHub Copilot 与 JavaScript 结合使用

在之前的单元中，我们展示了如何设置 Copilot 并提到它如何让您作为开发人员更快地开始编写代码。

在本单元中，我们将讨论 Copilot 如何帮助您完成现有项目并帮助您完成更复杂的任务。

使用 GitHub Copilot 进行开发

通常，当我们构建项目时，我们需要不断确保我们的代码是最新的和更新的。此外，我们可能需要修复出现的任何错误或添加新功能以改进其功能和可用性。让我们探索一些使用 GitHub Copilot 和 GitHub Copilot Chat 进行更新的方法，这是一个交互式聊天界面，用于询问和接收代码相关问题的答案。

及时工程

尽管 GitHub Copilot 可以在您键入时建议代码，但您也可以构建提示来创建有用的建议。提示是我们的输入，是帮助生成代码的指令或指南的集合。提示对于从 Copilot 生成特定响应非常有用。使用 GitHub Copilot Chat 引导 Copilot 代表您生成代码或编写 Copilot 自动完成的代码时，提示可能是注释或输入。

Copilot 的输出质量取决于您制作提示的程度。因此，设计有效的提示对于确保我们实现预期结果至关重要。例如，如果出现以下提示：

由于提示不明确且模糊，GitHub Copilot 的结果可能不是您需要的。例如，它可能使用您不知道的框架，或者需要您无法识别的数据的端点。但如果出现以下提示：

最后一条提示具体、清晰，可以让 GitHub Copilot 了解任务的目标和范围。尽管您还可以使用注释或代码向 Copilot 提供上下文和示例，但您也可以使用 GitHub Copilot Chat 的聊天选项。良好的提示可确保模型生成高质量的输出。

使用 GitHub Copilot 的最佳实践

Copilot 可以提高您的工作效率，但需要一些良好的实践来确保质量。使用 Copilot 时的一些最佳实践包括：

保持提示简单，然后在继续操作时添加更复杂的组件，例如：

接下来，详细说明提示以获得更具体的建议：

text

Add an event listen to the button to send a POST request to /generate endpoint and display response in a div with id "result"

在建议之间循环，您可以使用Ctrl+Enter（或Cmd+Enter在 Mac 上）执行此操作。您可以从 Copilot 获得各种建议，然后选择最佳输出。或者，在使用 GitHub Copilot Chat 时，您可以使用聊天输入来添加提示并与输出交互。

如果您遇到困难或未获得所需的结果，则可以重新措辞提示或开始编写 Copilot 的代码以自动完成。

 笔记

GitHub Copilot 使用文本编辑器中打开的文件作为附加上下文。这很有用，因为除了您可能正在编写的提示或代码之外，它还提供了有用的信息。如果您需要 GitHub Copilot 根据其他文件提供建议，您可以打开这些文件或@workspace在使用 GitHub Copilot Chat 时结合提示使用。

练习 - 使用 GitHub Copilot 更新 JavaScript 组合

让我们探讨如何使用 GitHub Copilot 的代码建议。在本练习中，您将添加带有实时建议的动画，并使用提示从现有的 JavaScript 模板存储库自定义滚动行为。借助 GitHub Copilot，您可以快速处理现实生活中的 JavaScript 情况。

JavaScript 组合

无论您是学生、应届毕业生还是经验丰富的专业人士，您的作品集都是您展示技能和经验的个人空间。

拥有作品集可以为您在申请工作时在简历中提到的经历提供可信度和知名度。无论您是数据科学家、用户体验设计师还是前端开发人员。强大的在线形象可以帮助您找到工作并被发现！

笔记

对于本练习，请使用Codespace 以及浏览器中的预配置环境。

定制您的 JavaScript 组合

在此模板组合中，我们提供了一个基于 React 的 Web 应用程序，您只需使用 Web 浏览器即可轻松自定义和部署。

在开始之前，您可以使用自己的链接自定义投资组合。前往src/App.jsx并更新siteProps您的信息。该siteProps变量是一个 JavaScript 对象，保存用于自定义站点的键值对，它应该如下所示：

通过提示为您的社交媒体图标添加动画效果

动画可以让社交媒体部分更加引人注目。请求 Copilot 帮助设置图标动画。您可以使用 GitHub Copilot Chat 询问 Copilot 或在文件中写入以下提示注释src/styles.css：

Copilot 的建议应类似于以下内容：

按 Tab 键接受建议。如果您没有收到完全相同的建议，那么您可以尝试提供的建议，或者继续键入 CSS 代码，直到匹配为止。

您的网站应该已经在 Codespace 中运行，并且更改将自动重新加载到页面上。要查看它们，请将鼠标悬停在页脚中的社交媒体图标之一上，看看它的魔力！

恭喜，通过练习，您不仅使用 Copilot 生成代码，而且还以互动且有趣的方式完成了它！您不仅可以使用 GitHub Copilot 生成代码，还可以编写文档、测试应用程序等。

概括

从从 GitHub 模板创建存储库到添加具有实时建议的动画，GitHub Codespaces 允许您自定义编码体验，GitHub Copilot 会指导您完成每一步，从而显着改善软件开发生命周期。

现在您已经完成了本模块，您应该能够：

• 了解 GitHub Copilot 如何通过提供自动完成式建议来帮助您编码。
• 利用其良好实践将即时工程应用于各种项目。
• 使用 GitHub Copilot Chat 询问和接收与编码相关的问题。

删除您的 Codespaces 资源

为了避免消耗您每月在 GitHub Codespaces 上的所有时间，在将更改上传到存储库后删除所有资源非常重要。请按照以下步骤删除您的资源：

1. 转到此链接Sign in to GitHub · GitHub
2. 从列表中找到您的 Codespace 实例，然后选择三点菜单以显示您的选项。
3. 选择“删除”以删除您的 Codespace 实例。

笔记

如果您不将更改提交到存储库，您将丢失所有工作。因此，在删除 Codespace 实例之前提交并推送更改非常重要。