{"meta":{"title":"编写和存储代码","intro":"按照核心开发人员工作流创建分支、编写代码以及使用 Copilot 和 GitHub Desktop打开拉取请求。","product":"开始","breadcrumbs":[{"href":"/zh/get-started","title":"开始"},{"href":"/zh/get-started/start-your-journey","title":"开始你的旅程"},{"href":"/zh/get-started/start-your-journey/writing-and-storing-your-code","title":"编写和存储代码"}],"documentType":"article"},"body":"# 编写和存储代码\n\n按照核心开发人员工作流创建分支、编写代码以及使用 Copilot 和 GitHub Desktop打开拉取请求。\n\n现在，你将构建你之前规划的网站功能：一个列出已加星标仓库的页面。 在这一过程中，你将遵循核心开发者工作流程——使用分支、提交和拉取请求来为你的工作创建空间、进行并保存更改，以及提交更改以供审查。\n\n## 先决条件\n\n* 你的 `stargazers-log` 仓库的本地克隆副本。 如果尚未设置此项，请参阅 [在本地连接到您的代码库](/zh/get-started/start-your-journey/connecting-to-your-code-locally)。\n\n## 创建分支\n\n分支允许你在自己的空间中处理功能，而无需更改 `main` 代码的副本，直到准备就绪。\n\n1. 打开 GitHub Desktop。\n2. 在应用的顶部，单击 **“Current Branch**”，然后单击“ **新建分支**”。\n3. 为分支 `add-starred-list`命名，然后单击“ **创建分支**”。\n4. 单击 **发布分支** 以使该分支在 GitHub 上可用。\n\n## 生成网站代码\n\n你的功能需要几个文件：示例数据、样式表、用于显示数据的脚本和更新的主页。\n\n你可以自行编写这些文件，也可以询问 CopilotAI 助手来生成这些文件。 每个 GitHub 帐户都包含对 GitHub Copilot Free 的访问权限，并附带一定额度的 AI 积分，因此你可以立即开始使用 Copilot。\n\n若要了解Copilot可用计划以及使用方式，请参阅[](/zh/copilot/get-started/plans)文档。\n\n在编辑器中打开 Copilot Chat ，并要求其创建包含如下所示提示的文件。\n\n\n\n```text copy\nCreate a starred repositories page for my software project. Add:\n- events.json with sample data for a few starred repositories\n- style.css to style a simple list\n- script.js to fetch events.json and render the list\n- an update to index.html that links style.css and script.js\n\nUse the code written in https://docs.github.com/get-started/start-your-journey/creating-and-changing-your-code.\n```\n\n\n\n\n在Copilot Chat中打开VS Code\n

\n\n查看生成的内容 Copilot ，然后调整文件以匹配以下示例。\n\n如果未使用 Copilot，请使用代码编辑器在分支中创建 `add-starred-list` 以下文件。\n\n1. 创建一 `events.json` 个名为以下示例数据的文件。 保存文件。\n\n ```json copy\n [\n { \"name\": \"octocat/Hello-World\", \"starred\": \"2024-01-15\" },\n { \"name\": \"github/docs\", \"starred\": \"2024-02-02\" },\n { \"name\": \"octo-org/octo-repo\", \"starred\": \"2024-03-21\" }\n ]\n ```\n\n2. 创建具有以下样式的文件 `style.css` 。 保存文件。\n\n ```scss copy\n body {\n font-family: sans-serif;\n margin: 2rem;\n }\n\n ul {\n list-style: none;\n padding: 0;\n }\n\n li {\n padding: 0.5rem 0;\n border-bottom: 1px solid #ddd;\n }\n ```\n\n3. 创建包含以下代码的文件 `script.js` 。 保存文件。\n\n ```javascript copy\n fetch(\"events.json\")\n .then((response) => response.json())\n .then((events) => {\n const list = document.querySelector(\"#starred\");\n events.forEach((event) => {\n const item = document.createElement(\"li\");\n item.textContent = `${event.name} — starred ${event.starred}`;\n list.appendChild(item);\n });\n });\n ```\n\n4. 更新 `index.html` 以链接新文件并保存列表。 保存文件。\n\n ```html copy\n \n \n \n \n Stargazers log\n \n \n \n

Stargazers log

\n

A log of the repositories I've starred.

\n \n \n \n \n ```\n\n## 提交和推送更改\n\n提交会保存你所做更改的一个快照，而推送会将这些更改发送到 GitHub，并存储在你的仓库中。\n\n1. 在 GitHub Desktop左侧栏中查看已更改的文件。\n2. 在边栏底部的 **“摘要** ”字段中，键入提交消息，例如 `Add starred repositories list`。\n3. 单击 **“提交 4 个文件”以添加星型列表**。\n4. 单击 **“推送源** ”以将提交发送到 GitHub。\n\n## 打开拉取请求\n\n拉取请求会提交你分支中的更改以供审查，然后这些更改才能合并到 `main` 中。\n\n1. 在 GitHub Desktop 中，单击 **预览拉取请求**，然后单击 **创建拉取请求**。 您的浏览器随即在 GitHub 上打开拉取请求表单。\n2. 查看标题和说明，然后添加有关功能用途的说明。\n3. 单击“创建拉取请求”\\*\\*\\*\\*。\n\n## 你完成的工作\n\n| 任务 | 结果 |\n| ------- | --------------------------------------------- |\n| 创建了分支 | 你使用 `add-starred-list` 为你的功能创建了一个隔离空间。 |\n| 编写代码 | 你已将该功能相关的文件添加到你的分支，并可选择在 Copilot Chat 的帮助下完成。 |\n| 已推送你的更改 | 你已将你的分支更改存储到 GitHub 上。 |\n| 打开拉取请求 | 你已提交更改以供审核。 |\n\n## 延伸阅读\n\n* [GitHub Copilot计划](/zh/copilot/concepts/billing/individual-plans)\n* [个人基于使用情况的计费](/zh/copilot/concepts/billing/usage-based-billing-for-individuals)\n* [监控您的GitHub AI Credits使用情况](/zh/copilot/how-tos/manage-and-track-spending/monitor-ai-usage)\n\n## 后续步骤\n\n* 在合并之前，请检查自己所做的更改，以便及早发现问题。 继续前往 [审查你提出的更改](/zh/get-started/start-your-journey/reviewing-your-proposed-changes)。"}