欢迎回到 GitHub 初学者指南。本季我们已经介绍了很多内容，所以请务必查看我们的其他剧集。最近一期的主题全部围绕开源展开，包括什么是开源以及如何为社区做贡献。

这一次，我们将了解 VS Code，这是 Microsoft 提供的一款免费且流行的源代码编辑器。它内置了相当多与 GitHub 集成的功能，这也是我们今天要介绍的内容。在 VS Code 中使用 GitHub 可以减少上下文切换，简化你的工作流程，并提高你的生产力。读完本文后，你将了解如何使用 VS Code 初始化仓库、切换分支，以及暂存、提交并推送你的更改。最棒的是，你无需离开编辑器就能完成所有这些操作。

请注意，如果你想跟着这篇博客文章（或视频）一起操作，你需要同时安装 Git 和 VS Code。如果你需要复习如何安装 Git，可以查看我们之前的 GitHub for Beginners 系列中的某一期。

一如既往，如果你更喜欢观看视频，或者想将其作为参考，我们所有的 GitHub for Beginners 系列都可以在 YouTube 上观看。

首先是一些基础知识

你可能已经知道，GitHub 是一种资源，只在代码仓库中托管你的代码副本。那么 Git 是什么？Git 是用于管理源代码的程序，并且可以通过多种不同方式使用（例如，通过命令行、通过 VS Code 等）。Visual Studio Code 通常缩写为 VS Code，它利用 Git 使你能够在 GitHub 中管理你的代码。

初始化文件夹

在 VS Code 中使用 Git 的第一步，是初始化一个文件夹，使其映射你在 GitHub 上的代码仓库。

1. 打开 VS Code。
2. 选择左侧栏中的顶部图标（资源管理器图标）。它看起来像两个文件叠在一起。
3. 点击“打开文件夹”按钮。
4. 在文件资源管理器中，选择一个包含你想上传到 GitHub 的代码的文件夹，然后点击“打开”。
5. 打开代码后，选择源代码管理图标。默认情况下，它是从上往下第三个图标。
6. 点击 Initialize Repository 按钮。

此时，你的 UI 中会发生一些变化。首先，你可以在底部栏左侧看到分支名称。默认值为 main。你可以使用 Command Palette 重命名你的分支。

1. 要打开 Command Palette，请在 Mac 上按 Shift-Command-P，或在 PC 上按 Ctrl-Shift-P。
2. 在 Command Palette 中，开始输入“rename”，然后选择 Git: Rename Branch 命令。
3. 在框中输入分支的新名称，然后按 Enter。

此时，你可以看到左下角的分支名称已更新为新名称。你可以按照相同的步骤将其重命名回 main。

初始化仓库后，你会看到的另一个变化是，源代码管理面板中的每个文件旁边都有一个“U”。“U”代表未跟踪，意思是这些文件是新的或已更改的，但尚未添加到仓库中。要跟踪某个文件，只需点击文件名旁边的加号。如果你想跟踪所有文件，可以点击 CHANGES 一词旁边最上方的加号。

执行此操作后，你选择的文件将被暂存，它们旁边的字母会变为“A”。这意味着文件已暂存，但尚未上传到 GitHub。要上传这些更改，你需要提交这些文件。

1. 在“源代码管理”窗口顶部的文本框中输入一条消息来描述此次提交。或者，你也可以点击文本框中的 Copilot 图标，让 Copilot 为你生成提交消息。
2. 选择文本框下方的“提交”按钮以提交你的更改。

就是这么简单！

创建和更改分支

现在，你很可能位于 main 分支上。请记住，你可以通过查看窗口左下角来检查当前分支。如果这是一个大型应用，而你正在添加新代码或功能，你会希望创建一个新分支，并使用该分支开展工作。

1. 在 Mac 上按 Shift-Command-P，或在 PC 上按 Ctrl-Shift-P，打开命令面板。
2. 在文本框中输入“create branch”。
3. 从选项列表中选择 Git: Create Branch…。
4. 在框中输入新分支的名称。例如，“new-features”。
5. 按 Enter。

完成此操作后，VS Code 将创建新分支，并自动将你切换到该分支。你可以通过查看左下角的分支名称来验证这一点。

跟踪你所做的更改

现在你已经进入工作分支，接下来在某个文件中输入一行代码。执行此操作时，你会注意到编辑器右侧、你添加的代码旁边会出现一条细绿色线。编辑器的这一部分称为边栏，而这条绿色线表示你添加了一行新代码。

移动到另一行，并对已有的一行代码进行一些修改。执行此操作时，你会在边栏中看到一条带有图案的蓝色线。这条线表示你已经对现有的一行代码进行了更改。

最后，移动到文件中一行未更改的代码并将其删除。注意，边栏会添加一个红色箭头。这表示已从文件中删除了一行代码。

当你修改此文件时，可以看到该文件出现在 Source Control 窗口的 CHANGES 标题下。如果将鼠标悬停在文件名上，你会看到出现几个按钮。这些按钮可用于打开文件、放弃你的更改以及暂存你的更改。与之前类似，如果有多个文件发生更改，你可以将鼠标悬停在 CHANGES 标题上，并看到一些按钮，可用于查看未暂存的更改、打开更改、放弃所有更改以及暂存所有更改。

查看差异

有时你想查看自己在文件中所做的更改。VS Code 允许你通过并排差异比较来完成此操作，而无需使用其他工具。要查看某个文件的更改，请在“源代码管理”窗口中点击你想查看的文件名。在这里，你可以查看文件中的更改并比较差异。

根据你的偏好，你也可以以内联视图查看差异。

1. 点击差异视图右上角的三个点（…）。
2. 从下拉菜单中选择“Inline View”。

这样你就可以在单个窗口中查看所有更改，而无需将其拆分到两个单独的视图中。在此视图中，你甚至可以直接在差异视图中进行编辑。

完成对文件所需的任何更改后，就可以将它们上传到 GitHub。按照我们之前介绍的步骤，继续暂存你的更改，然后提交已暂存的更改。完成这些步骤后，Source Control 窗口中应该不会显示任何文件。

合并分支

请注意，你已上传的更改仍会保留在你的工作分支中。如果你返回 main 分支，将看到你进行更改之前的原始代码。

1. 点击窗口左下角的分支名称。
2. 分支名称会显示在程序顶部的下拉菜单中。选择 main 分支。

为了将这些更改纳入你的 main 分支，你需要合并分支。

1. 在“源代码”窗口中，点击 CHANGES 旁边的三个点（…）。
2. 在上下文菜单中，将鼠标悬停在 Branch 上，然后选择 Merge…
3. 顶部的框会提示你选择要从中合并的分支。选择包含你想要合并到 main 中的更改的分支。

恭喜！现在你的 main 分支已经纳入了这些更改！

发布到 GitHub

假设你想将项目发布到 GitHub。为此，请在“源代码管理”窗口中点击“发布分支”按钮。VS Code 会提示你选择将其发布为私有仓库还是公共仓库。选择你想要的选项，然后 VS Code 会处理其余事项。

VS Code 完成发布过程后，会通知你项目已发布到 GitHub 上的一个仓库。你可以点击“在 GitHub 上打开”按钮，访问 GitHub 上的项目并在线查看。

克隆仓库

现在假设你想克隆一个仓库，以便在自己的机器上处理它。这会创建一个本地副本，你可以使用该副本，并在两个位置之间同步更改。克隆仓库有多种方法，下面是在 VS Code 中执行此操作的一种简单方法。

1. 导航到你想克隆的仓库主页。
2. 点击仓库文件列表顶部的绿色 <> Code 按钮。
3. 在下拉菜单中，选择包含仓库 URL 的框旁边的“复制 URL 到剪贴板”按钮。
4. 打开 VS Code。
5. 在 Mac 上按 Shift-Command-P，或在 PC 上按 Ctrl-Shift-P，打开命令面板。
6. 输入“clone”。
7. 从选项列表中选择 Git: Clone。
8. 将 URL 粘贴到框中。
9. 选择 Clone from URL，并使用你刚才粘贴的 URL。
10. 弹出窗口会要求你选择一个位置。选择你想要存储项目文件的文件夹。
11. 点击 Select as Repository Destination 按钮。
12. 将出现一个弹出菜单，询问你是否要打开该仓库。选择“打开”。

恭喜！你刚刚已将该仓库克隆到你的机器上，现在可以在本地环境中开始处理它了！

模型上下文协议

你知道吗，在 VS Code 中你不必所有事情都手动完成？你可以利用模型上下文协议（MCP）安全地让 AI 工具访问外部工具和数据。第一步是添加 GitHub MCP 扩展。

1. 在左侧导航栏中，点击 Extensions 图标。
2. 在搜索框中输入“@mcp github”。
3. 从列表中选择 GitHub 扩展。
4. 在该扩展的说明中，点击 Install。
5. 会出现一个弹出窗口，要求你允许 MCP 服务器进行身份验证。选择允许。
6. 从列表中选择你的 GitHub 用户名。

此时，GitHub MCP 服务器已安装。你可以通过查看扩展视图底部并看到已安装 MCP 服务器的部分来验证这一点。安装 MCP 服务器后，你可以使用 Copilot 聊天为你创建一些代码，并且它会在必要时利用外部工具来完成。

1. 通过选择命令面板窗口旁边的聊天图标来打开聊天窗口。
2. 输入一个提示词，请 Copilot 为你的项目添加一些功能。

有关其工作方式的示例，请查看本集的视频版本，其中演示了如何请求 Copilot 创建多个 issue，以改进一个闪卡应用程序。

后续步骤

就是这样！我们介绍了开发者使用 VS Code 与 Git 交互的一些最常见方式。我们已经讲解了从创建仓库到在 GitHub 上发布的所有内容，最后甚至还加入了一点 AI 的使用。还有更高级的技巧，但这些内容是你最常用到的。

祝你编码愉快！

作者

正文：Kedasha Kerr

正文：@ladykerr

Kedasha 是 GitHub 的开发者倡导者，她乐于与更广泛的开发者社区分享自己学到的经验。她以帮助他人了解科技行业为乐，也喜欢分享自己作为软件开发者的经历。可在线通过 @itsthatladydev 找到她。