在 VS Code 中使用 Git 源代码管理
Visual Studio Code 集成了源代码管理 (SCM) 功能,并内置了对 Git 的开箱即用支持。通过 Visual Studio Marketplace 上的扩展,还可以获得许多其他源代码管理提供程序。
借助 VS Code 中的 GitHub Copilot,你可以获得提交消息、拉取请求的建议,并在提交前查看代码更改。了解更多关于VS Code 中的 GitHub Copilot。
如果你还没有 Copilot 订阅,可以通过注册Copilot 免费计划免费使用 Copilot。你将获得每月一定数量的补全和聊天交互次数。
在 Git 仓库中工作
VS Code 会在你打开一个 Git 仓库文件夹时识别它。通过源代码管理视图,你可以在不使用命令行的情况下执行大多数 Git 操作。
请确保你的机器上已安装 Git。 VS Code 使用你机器上安装的 Git(至少版本 2.0.0
),因此在使用这些功能之前,你需要先安装 Git。
你可以通过选择活动栏中的源代码管理图标或使用键盘快捷方式⌃⇧G (Windows, Linux Ctrl+Shift+G)访问源代码管理视图。如果你有更改,源代码管理图标会指示你的仓库中当前有多少更改。
源代码管理视图显示当前仓库更改的详细信息:更改 (CHANGES)、暂存的更改 (STAGED CHANGES) 和合并更改 (MERGE CHANGES)。你还可以查看源代码管理图,以了解你的更改与仓库历史记录的关系。
在源代码管理视图中选择文件时,你会在差异编辑器中看到你对该文件所做的更改。
对于未暂存的更改,右侧的编辑器仍然允许你编辑文件:请随意使用!
你还可以在 VS Code 状态栏的左下角找到仓库状态的指示器:当前分支、更改指示器以及当前分支的入站和出站提交数量。要切换到仓库中的任何分支,请选择状态指示器并从列表中选择 Git 引用。
你可以在 Git 仓库的子目录中打开 VS Code。VS Code 的 Git 服务仍将正常工作,显示仓库内的所有更改,但作用域目录之外的文件更改会以阴影显示,并带有工具提示,表明它们位于当前工作区之外。
克隆仓库
如果你尚未打开文件夹,源代码管理视图将为你提供从本地机器打开文件夹或克隆仓库的选项。
如果选择克隆仓库,系统将询问远程仓库的 URL(例如在 GitHub 上)以及存放本地仓库的父目录。
对于 GitHub 仓库,你可以在 GitHub 的 Code 对话框中找到 URL。
然后将该 URL 粘贴到 Git: Clone 提示符中。
你还会看到从 GitHub 克隆的选项。在 VS Code 中使用 GitHub 账户进行身份验证后,你就可以按名称搜索仓库,并选择任何仓库进行克隆。你还可以通过命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中的 Git: Clone 命令启动克隆 Git 仓库流程。要查看分步演练,请观看我们的从 VS Code 克隆仓库视频。
如果你想在不将仓库内容克隆到本地机器的情况下进行工作,可以安装 GitHub Repositories 扩展,以便直接在 GitHub 上浏览和编辑。你可以在GitHub Repositories 扩展部分了解更多信息。
初始化仓库
如果你的工作区在本地机器上,可以通过使用初始化仓库命令创建一个 Git 仓库来启用 Git 源代码管理。当 VS Code 未检测到现有 Git 仓库时,源代码管理视图将提供初始化仓库或发布到 GitHub 的选项。
你还可以通过命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 运行 Git: Initialize Repository 和 Publish to GitHub 命令。
- 初始化仓库:创建必要的 Git 仓库元数据文件,并将你的工作区文件显示为准备暂存的未跟踪更改。
- 发布到 GitHub:将你的工作区文件夹直接发布到 GitHub 仓库,允许你选择私有或公共仓库。请观看我们的发布仓库视频,了解更多关于发布到 GitHub 的信息。
提交
暂存 (git add
) 和取消暂存 (git reset
) 可以通过文件中的上下文操作或拖放来完成。
配置你的 Git 用户名和电子邮件。提交时请注意,如果在 Git 配置中未设置用户名和/或电子邮件,Git 将回退使用本地机器的信息。你可以在Git 提交信息中找到详细信息。
你可以在更改上方键入提交消息,然后按Ctrl+Enter (macOS: ⌘+Enter) 提交。如果存在任何暂存的更改,则只提交这些更改。否则,系统会提示你选择要提交的更改,并提供更改提交设置的选项。
我们发现这是一种出色的工作流程。例如,在前面的截图中,只有对 overview.png
的暂存更改会包含在提交中。随后的暂存和提交操作可以将对 versioncontrol.md
和另外两张 .png
图片的更改作为单独的提交包含在内。
更具体的提交操作可以在源代码管理视图顶部的视图和更多操作 ...
菜单中找到。
如果你将更改提交到了错误的分支,可以使用命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中的 Git: Undo Last Commit 命令来撤销提交。
使用 AI 生成提交消息
VS Code 中的 GitHub Copilot 可以根据你所做的代码更改为你生成提交消息。在源代码管理视图的提交消息输入框中,选择使用 Copilot 生成提交消息按钮 ()。
如果你的组织或项目对提交消息有特定要求,你可以使用 Copilot 自定义指令来生成提交消息。例如,提交消息的最大长度为 60 个字符,应以动词的现在时开头。获取有关用于生成提交消息的 Copilot 自定义指令的更多详细信息。
使用编辑器编写提交消息
如果提交更改时未输入提交消息,VS Code 将打开 COMMIT_EDITMSG
文件的编辑器,你可以在其中编写提交消息。提供提交消息后,可以关闭编辑器选项卡,或选择编辑器工具栏中的接受提交消息按钮来提交更改。
要取消提交操作,你可以清除文本编辑器的内容并关闭编辑器选项卡,或选择编辑器工具栏中的放弃提交消息按钮。
你可以通过切换 git.useEditorAsCommitInput 设置来禁用此功能。更改设置后,需要重启 VS Code 使更改生效。
要在集成终端中执行 git commit 命令时使用相同的流程,请启用 git.terminalGitEditor 设置。
Git blame 信息
VS Code 可以在编辑器内和状态栏中内联显示 git blame 信息。将鼠标悬停在状态栏项或内联提示上可查看详细的 git blame 信息。
要启用或禁用 git blame 信息,请使用 Git: Toggle Git Blame Editor Decoration 和 Git: Toggle Git Blame Status Bar Item 命令,或配置以下设置
你可以使用 git.blame.editorDecoration.template 和 git.blame.statusBarItem.template 设置来自定义在编辑器和状态栏中显示的消息格式。你可以使用变量来表示最常见的信息。
例如,以下模板显示提交的主题、作者姓名以及作者日期(相对于当前时间)
{
"git.blame.editorDecoration.template": "${subject}, ${authorName} (${authorDateAgo})"
}
要调整编辑器装饰的颜色,请使用 git.blame.editorDecorationForeground
主题颜色。
使用 AI 查看未提交的代码更改
VS Code 中的 GitHub Copilot 可以帮助你查看未提交的代码更改。
-
在源代码管理视图中,选择 Copilot 代码评审按钮以开始对未提交的更改进行代码评审。
-
Copilot 在编辑器中生成代码评审注释和建议作为覆盖层
你还可以在注释面板中查看所有代码评审注释的列表。
-
你可以使用相应的按钮或注释面板中的上下文菜单操作来应用或丢弃建议。
在 GitHub 文档中获取有关使用 Copilot 评审代码更改的更多详细信息。
分支和标签
你可以通过命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中的 Git: Create Branch 和 Git: Checkout to 命令直接在 VS Code 内创建和切换分支。
如果运行 Git: Checkout to,你将看到一个下拉列表,其中包含当前仓库中的所有分支或标签。如果你认为创建新分支是更好的选择,它还会为你提供创建新分支的选项,或在分离模式下切换到分支。
Git: Create Branch 命令让你快速创建新分支。只需提供新分支的名称,VS Code 就会创建分支并切换到它。如果你选择从...创建新分支,你将获得一个额外的提示,允许你指定新分支应该指向哪个提交。
当你切换到另一个分支时,VS Code 可以自动保存和恢复打开的编辑器。使用 scm.workingSets.enabled 设置启用此功能。首次切换到分支时,你可以使用 scm.workingSets.default 设置控制打开的编辑器。
远程仓库
鉴于你的仓库已连接到某个远程仓库,并且你检出的分支与该远程仓库中的分支具有上游链接,VS Code 会为你提供有用的操作来推送 (push)、拉取 (pull) 和同步 (sync) 该分支(后者将先运行拉取命令,然后运行推送命令)。你可以在视图和更多操作 ...
菜单中找到这些操作,以及添加或移除远程仓库的选项。
VS Code 可以定期从你的远程仓库获取更改。这使得 VS Code 可以显示你的本地仓库领先或落后于远程仓库的更改数量。此功能默认禁用,你可以使用 git.autofetch 设置启用它。
你应该设置凭据助手,以避免每次 VS Code 与 Git 远程仓库通信时都要求提供凭据。如果你不这样做,可以考虑通过 git.autofetch 设置禁用自动获取,以减少弹出的提示数量。
源代码管理图
配置远程仓库后,你可以看到你领先或落后于远程仓库的提交数量。源代码管理视图的图部分显示了入站和出站提交的图形表示。
该图包含当前分支、当前分支的上游分支以及可选的基础分支。图的根是这些分支的共同祖先。
该图提供以下功能
- 选择条目以查看提交中相应的更改。
- 通过将鼠标悬停在入站/出站标题上执行获取 (Fetch)、拉取 (Pull) 和推送 (Push) 操作。
Git 状态栏操作
当当前检出的分支配置了上游分支时,状态栏中分支指示器旁边会有一个同步更改操作。同步更改会将远程更改拉取到本地仓库,然后将本地提交推送到上游分支。
如果未配置上游分支且 Git 仓库已设置远程仓库,则会启用发布操作。这将允许你将当前分支发布到远程仓库。
如果你的工作区包含多个 Git 仓库,状态栏将显示当前仓库。选择状态栏项时,你可以选择哪个仓库应处于活动状态。
边栏指示器
如果你打开一个 Git 仓库文件夹并开始进行更改,VS Code 会在边栏和概览尺中添加有用的标注。
- 红色三角形表示行已删除
- 绿色条表示新添加的行
- 蓝色条表示修改的行
合并冲突
VS Code 可以识别合并冲突。差异会被高亮显示,并且有内联操作可以接受其中一个或两个更改。冲突解决后,请暂存冲突文件,以便你可以提交这些更改。
三向合并编辑器
为了帮助你解决合并冲突,VS Code 提供了三向合并编辑器,你可以在其中交互式地接受入站和当前更改,并查看和编辑合并后的结果文件。三向合并编辑器通过选择具有 Git 合并冲突的文件右下角的在合并编辑器中解决按钮打开。
三向合并编辑器显示了入站更改(左侧)、当前更改(右侧)和合并结果(底部)的独立视图。冲突会被高亮显示,并且可以使用 CodeLens 按钮来解决。
解决冲突
三向合并编辑器允许你通过接受其中一个或两个更改来解决冲突。你也可以手动编辑合并结果。
对于某些冲突,合并编辑器会显示一个接受组合按钮。接受组合可以通过智能地合并两个更改来解决当前冲突。这对于同一行中未触及相同字符的更改尤其有用。
使用忽略按钮既不接受入站更改,也不接受当前更改,但将冲突标记为已解决。这将冲突区域重置为进行任何更改之前的状态。
完成合并
你可以使用结果编辑器右侧的冲突计数器来跟踪剩余的未解决冲突数量。点击计数器会跳转到下一个未解决冲突。解决所有冲突后,可以通过选择右下角的完成合并来完成合并。这将暂存文件并关闭合并编辑器。
替代布局及更多
选择合并编辑器右上角的三个点 (···) 会打开一个上下文菜单,其中包含其他选项。你可以切换到垂直布局并显示基础视图,该视图显示进行任何更改之前文件的状态。
入站、当前和结果旁边的三个点为每个视图提供了选项,例如显示与基础的并排差异、接受所有更改或重置结果。
理解冲突
如果你想了解更多关于三向合并编辑器工作原理的详细信息,我们推荐观看以下视频
查看差异
我们的 Git 工具支持在 VS Code 内查看差异。
差异编辑器在中间有一个单独的边栏,它使你能够暂存 (Stage) 或回退 (Revert) 更改的代码块。如果选择一段文本,可以回退或暂存选区中包含的更改。
你可以通过先在资源管理器视图中右键单击一个文件并选择选择进行比较,然后右键单击要比较的第二个文件并选择与已选文件比较来比较任意两个文件。或者,打开命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)),并选择任何 File: Compare 命令。了解更多关于在 VS Code 中比较文件的不同选项。
辅助功能差异查看器
差异编辑器中有一个辅助功能差异查看器,它以统一的补丁格式呈现更改。你可以使用跳转到下一个差异 (F7) 和跳转到上一个差异 (⇧F7 (Windows, Linux Shift+F7)) 在更改之间导航。可以使用箭头键导航行,按 Enter 将返回差异编辑器并跳到选定的行。
这种体验对于屏幕阅读器用户特别有用。
时间线视图
时间线视图默认位于文件资源管理器的底部,是一个统一的视图,用于可视化文件的时序事件(例如,Git 提交)。
VS Code 内置的 Git 支持提供指定文件的 Git 提交历史记录。选择提交会打开该提交引入的更改的差异视图。右键单击提交时,你会获得复制提交 ID 和复制提交消息的选项。
Visual Studio Code 通过 VS Code Marketplace 上提供的扩展支持更多的 Git 历史工作流程。
单击扩展磁贴以在 Marketplace 中阅读描述和评论。
Git 输出窗口
你随时可以查看底层,了解我们正在使用的 Git 命令。如果发生了奇怪的事情,或者你只是好奇,这会很有帮助。 :)
要打开 Git 输出窗口,运行视图 > 输出,然后从下拉列表中选择日志 (Git)。
将 VS Code 用作 Git 编辑器
从命令行启动 VS Code 时,可以传递 --wait
参数,使启动命令等待直到你关闭新的 VS Code 实例。当你将 VS Code 配置为 Git 外部编辑器时,这非常有用,因为 Git 会等待直到你关闭启动的 VS Code 实例。
具体步骤如下
- 确保你可以从命令行运行
code --help
并获得帮助。- 如果没有看到帮助信息,请按照以下步骤操作
- macOS:从命令面板中选择 Shell Command: Install 'Code' command in path。
- Windows:请确保在安装过程中选择了添加到 PATH。
- Linux:请确保通过我们的新
.deb
或.rpm
包安装了 Code。
- 如果没有看到帮助信息,请按照以下步骤操作
- 从命令行运行
git config --global core.editor "code --wait"
现在你可以运行 git config --global -e
并使用 VS Code 作为编辑器来配置 Git。
将 VS Code 用作 Git difftool 和 mergetool
将以下内容添加到你的 Git 配置中,以使用 VS Code 作为差异和合并工具
[diff]
tool = default-difftool
[difftool "default-difftool"]
cmd = code --wait --diff $LOCAL $REMOTE
[merge]
tool = code
[mergetool "code"]
cmd = code --wait --merge $REMOTE $LOCAL $BASE $MERGED
这使用了可以传递给 VS Code 的 --diff
选项来并排比较两个文件。下次 Git 检测到合并冲突时将使用合并工具。
总之,以下是一些可以使用 VS Code 作为编辑器的示例
git rebase HEAD~3 -i
使用 VS Code 执行交互式 rebasegit commit
使用 VS Code 编写提交消息git add -p
之后按 e 进行交互式 addgit difftool <commit>^ <commit>
使用 VS Code 作为差异编辑器查看更改
使用 GitHub 拉取请求和 Issues
Visual Studio Code 还可以集成 GitHub 的拉取请求和 issues。在 VS Code 中创建你的 PR,通过注释进行评审,并在不切换上下文的情况下批准它们。了解更多关于VS Code 中的 GitHub PR 和 Issues。
SCM 提供程序
单击扩展磁贴以在 Marketplace 中阅读描述和评论。
VS Code 支持同时处理多个源代码管理提供程序。例如,你可以同时打开多个 Git 仓库和 Azure DevOps Server 本地工作区,并在项目之间无缝协作。要打开**源代码管理提供程序**视图,请在**源代码管理**视图中选择溢出菜单(⌃⇧G (Windows、Linux Ctrl+Shift+G)),将鼠标悬停在**视图**上,并确保**源代码管理仓库**被勾选。**源代码管理提供程序**视图显示检测到的提供程序和仓库,你可以通过选择特定的提供程序来限定显示你的更改。
SCM 提供程序扩展
如果你想安装其他 SCM 提供程序,可以在**扩展**视图(⇧⌘X (Windows、Linux Ctrl+Shift+X))中搜索 **scm providers** 扩展类别。开始键入 '@ca',你将看到扩展类别的建议,例如调试器和 linter。选择 @category:"scm providers"
查看可用的 SCM 提供程序。
下一步
-
入门视频 - Git 版本控制 - 介绍 VS Code Git 支持的入门视频。
-
GitHub 协作入门 - 了解如何在 VS Code 中使用 GitHub。
-
了解更多关于 Copilot VS Code 的信息 - 了解 VS Code 中的 Copilot。
-
源代码管理 API - 如果你想将其他源代码管理提供程序集成到 VS Code 中,请参阅我们的源代码管理 API。