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

  • 5 分钟

让我们探讨如何使用 GitHub Copilot 中的代码建议。 在本练习中，你将添加包含实时建议的动画，并使用提示来自定义现有 JavaScript 模板存储库中的滚动行为。 借助 GitHub Copilot，可以快速使用真实的 JavaScript 环境。

JavaScript 项目组合

无论你是学生、应届毕业生还是经验丰富的专业人士，你的项目组合都可用作展示技能和经验的个人空间。

拥有项目组合为你申请工作时在简历中提到的经验提供了可信度和名声。 无论你是数据科学家、UX 设计师还是前端开发人员。 强大的在线形象可以帮助你找到工作并被发现！

注意

对于本练习，请在浏览器中将 Codespace 与预配置环境配合使用。

自定义 JavaScript 项目组合

在此模板组合中，我们提供了一个基于 React 的 Web 应用程序，可让你仅使用 Web 浏览器来轻松进行自定义和部署。

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

const siteProps = {
  name: "Alexandrie Grenier",
  title: "Web Designer & Content Creator",
  email: "alex@example.com",
  gitHub: "microsoft",
  instagram: "microsoft",
  linkedIn: "satyanadella",
  medium: "",
  twitter: "microsoft",
  youTube: "Code",
};

使用提示对社交媒体图标进行动画处理

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

/* add an amazing animation to the social icons */

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

img.socialIcon:hover {
  animation: bounce 0.5s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

按 Tab 键可接受建议。 如果未收到完全相同的建议，则可以尝试所提供的建议，也可以继续键入 CSS 代码，直到匹配为止。

你的站点应该已在 Codespace 中运行，并且更改将自动重新加载到页面上。 若要查看它们，请将鼠标悬停在页脚中的一个社交媒体图标上，以查看效果！

祝贺你，通过练习，你不仅试用 Copilot 生成了代码，还以一种交互、有趣的方式完成了此操作！ 使用 GitHub Copilot 不仅可以生成代码，还可编写文档、测试应用程序等。

在 GitHub 中完成练习后，请返回此处完成以下内容：

  • 快速知识检查
  • 浏览已学习内容的摘要
  • 完成此模块的徽章