在 Visual Studio Code 中管理用于 JavaScript 开发的 GitHub 存储库

Visual Studio Code 为 JavaScript 开发人员提供全面的 Git 和 GitHub 集成。 本指南介绍如何直接从开发环境管理 GitHub 存储库，简化从代码创建到部署的工作流。

你将了解如何打开现有存储库、初始化新项目、创建功能分支、提交更改并推送到 GitHub，所有这些作都无需离开 VS Code。 本指南介绍每个任务的多种方法，包括活动栏、命令面板、状态栏和集成终端，以便你可以选择最适合开发样式的方法。

先决条件

• 在本地计算机上安装Git
• Visual Studio 已安装代码
• GitHub 帐户

打开远程存储库

在本地计算机上打开远程存储库。

活动栏

1. 安装远程存储库扩展
2. 选择 Visual Studio Code 左下角的远程指示器。
3. 按提示操作。

状态栏

此功能不提供此操作。 选择其他选项卡。

命令面板

1. 使用 Ctrl + + 的键组合打开命令面板。
2. 在命令提示符下，输入gitcl，选择“Git：克隆”命令，然后从 GitHub 中选择“克隆”，然后按 Enter。
3. 系统提示输入“存储库 URL”时，选择“从 GitHub 克隆”，然后按“Enter”。
4. 如果系统要求你登录到 GitHub，请完成登录过程。
5. 在“存储库 URL”字段中输入 azure-samples/js-e2e-express-server。
6. 选择要克隆项目的本地目录，然后选择“ 选择为存储库目标”。
7. 收到询问是否要打开克隆的存储库的通知时，请选择“打开”。

集成终端

1. 从 终端打开集成终端 -> 新终端。

2. 使用以下 git 命令克隆存储库：

   git clone https://github.com/<ACCOUNT>/<REPOSITORY>
   

3. 在 Visual Studio Code 中打开：

   code <REPOSITORY>
   

Visual Studio Code 使用操作系统（如 macOS KeyChain 或 Windows 凭据管理器）提供的 Git 身份验证以及任何 git 功能。 输出在命令面板 > Git 中可见：显示 Git 输出。

连接到自定义 GitHub 域

默认情况下，Visual Studio Code 假定存储库托管在上 github.com。 如果需要连接到其他域（例如企业 GitHub 等 github.<company_name>.com）上的存储库，则需要相应地配置 Git 路径。

若要更新 VS Code 中的 Git 路径，请打开 文件→首选项→设置 并搜索 Git: Path。 通过此设置，可以指定适用于自定义 GitHub 域的 Git 可执行文件的绝对路径。

或者，可以直接在git.path文件中添加或更新settings.json设置，以确保 VS Code 在所有存储库操作中使用正确的 Git。

打开本地存储库

如果本地计算机上已有一个存储库，并且想要在 Visual Studio Code 中打开它，只需打开该文件夹即可。 Visual Studio Code 识别 .git 子文件夹并显示相关信息。

活动栏

1. 选择 Ctrl + K + O。
2. 选择 文件夹。

状态栏

此功能不提供此操作。 选择其他选项卡。

命令面板

1. 使用 Ctrl + + 的键组合打开命令面板。
2. 使用 Git筛选器，然后选择 Open repository。
3. 选择要选择作为存储库根目录的文件夹。

集成终端

1. 从 终端打开集成终端 -> 新终端。

2. 为存储库目录打开 Visual Studio Code 的新实例：

   code ../dir1/dir2/my-repo
   

初始化新存储库

使用以下过程创建本地 git源代码存储库。

活动栏

1. 从活动栏中选择源代码管理，或使用 Ctrl + + 的键组合。

2. 选择“ 初始化存储库”。

   

状态栏

此功能不提供此操作。 选择其他选项卡。

命令面板

1. 使用 Ctrl + + 的键组合打开命令面板。
2. 使用 Git筛选器，然后选择 Initialize repository。
3. 选择要选择作为存储库根目录的文件夹。

集成终端

1. 从 终端打开集成终端 -> 新终端。

2. 使用以下 git 命令使用 git 初始化文件夹：

   git init
   

初始化存储库后， 在 GitHub 上创建存储库。 然后，从命令面板将该存储库作为远程存储库添加到本地项目：搜索 Git: Add remote。

为更改创建分支

创建新的分支以捕获更改，并隔离主或默认分支。

活动栏

1. 从活动栏中选择源代码管理。
2. 选择源代码管理旁边的省略号（...）。
3. 选择 “分支 ->创建分支”。

状态栏

1. 在状态栏中选择分支名称。 这会打开命令面板。

   状态栏位于 Visual Studio Code 底部。

2. 在命令面板中，选择“+创建新分支”。

3. 输入新分支名称。

4. 输入新分支名称。 分支名称将显示在状态栏中。

   

命令面板

1. 使用 Ctrl + + 的键组合打开命令面板。

2. 搜索 git branch 并选择 Git: Create Branch。

   

3. 输入新的分支名称，例如 test。

4. 分支名称将显示在状态栏中。

   

集成终端

1. 从 终端打开集成终端 -> 新终端。

2. 使用以下 git 命令创建一 MY-BRANCH 个名为的新分支：

   git checkout -b MY-BRANCH
   

在本地提交更改

对分支上的文件进行更改后，提交更改。

活动栏

1. 从活动栏中选择源代码管理。

2. 输入提交消息，然后选择“提交”。

   

状态栏

此功能不提供此操作。 选择其他选项卡。

命令面板

1. 使用 Ctrl + + 的键组合打开命令面板。
2. 在命令面板中，筛选， Git 然后选择 Commit。
3. 输入提交消息，然后按 Enter。

集成终端

1. 从 终端打开集成终端 -> 新终端。

2. 使用以下 git 命令创建一 MY-BRANCH 个名为的新分支：

   git commit -m "YOUR COMMIT MESSAGE"
   

将本地分支推送到 GitHub

活动栏

1. 在活动栏中选择“源代码管理”图标。
2. 选择“发布分支”。 如果 GitHub 上不存在存储库，则会为你创建存储库。

状态栏

1. 在 Visual Studio Code 状态栏中，选择分支名称右侧的推送图标。

   

2. 从弹出框中选择远程名称。 如果只有一个远程，则不会要求你选择远程名称。

命令面板

1. 使用 Ctrl + + 的键组合打开命令面板。
2. 在命令面板中，筛选， Git 然后选择 Push。
3. 如果有多个上游远程，请选择远程名称，然后按 Enter。

集成终端

1. 从 终端打开集成终端 -> 新终端。

2. 使用以下 git 命令创建一 MY-BRANCH 个名为的新分支：

   git push <remote-name> <branch-name>
   

查看 Git 输出

使用源代码管理扩展时，可以查看 Git 命令输出。 当命令失败时，此输出有助于调试。

1. 在活动栏中选择“源代码管理”图标。

2. 选择省略号 (…)，然后选择“显示 Git 输出”。

   

用于处理 Git 和 GitHub 的 Visual Studio Code 工具

在 Visual Studio Code 中处理存储库需使用单独的工具。

图标	信息	访问来源
	命令面板中的 Git 命令	F1
	源代码管理扩展	活动栏
	GitHub 拉取请求和问题扩展	活动栏
	GitHub 存储库扩展	可通过以下方法快速轻松地打开一个 GitHub 存储库：从命令面板 (F1) 搜索“GitHub 存储库: 打开存储库…”，或者从远程指示器（状态栏左下角的绿色按钮）选择“打开 GitHub 存储库…”。

相关资源

• 如何部署 Web 应用
• 在 Visual Studio Code 中使用 GitHub
• 将 Visual Studio Code 与其他版本控制提供程序结合使用