在 VS Code 中使用 Git 源代码管理
Visual Studio Code 集成了源代码管理(SCM),并内置了对 Git 的支持。许多其他源代码管理提供程序可以通过 Visual Studio Marketplace 上的扩展获得。
通过 VS Code 中的 GitHub Copilot,你可以在提交代码更改之前获得提交信息、拉取请求的建议,并审查代码更改。了解更多关于 VS Code 中的 GitHub Copilot。
如果你还没有 Copilot 订阅,可以通过注册 Copilot 免费计划来免费使用 Copilot。你将获得每月限量的代码补全和聊天交互次数。
在 Git 仓库中工作
当你打开一个 Git 仓库文件夹时,VS Code 会识别出来。“源代码管理”视图使你无需使用命令行即可执行大部分 Git 操作。
请确保你的机器上已安装 Git。 VS Code 使用你机器上安装的 Git(版本至少为 2.0.0
),所以你需要先安装 Git才能使用这些功能。
你可以通过选择活动栏中的源代码管理图标,或使用键盘快捷键 ⌃⇧G (Windows、Linux 为 Ctrl+Shift+G) 来访问“源代码管理”视图。如果你有更改,源代码管理图标会显示你当前仓库中有多少更改。
“源代码管理”视图显示你当前仓库更改的详细信息:更改、暂存的更改和合并更改。你还可以查看源代码管理图,了解你的更改与仓库历史记录的关系。
当你在“源代码管理”视图中选择一个文件时,你将会在一个差异编辑器中看到你对该文件所做的更改。
对于未暂存的更改,右侧的编辑器仍然允许你编辑文件:请随意使用!
你还可以在 VS Code 状态栏的左下角找到仓库状态的指示器:当前分支、脏指示器(dirty indicators),以及当前分支的传入和传出提交数量。要检出仓库中的任何分支,请选择该状态指示器,然后从列表中选择 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 会在编辑器中以浮层形式生成代码审查评论和建议
你还可以在评论面板中查看所有代码审查评论的列表。
-
你可以通过使用相应的按钮,或在评论面板中的上下文菜单操作来应用或丢弃建议
在 GitHub 文档中获取更多关于使用 Copilot 审查代码更改的详细信息。
分支和标签
你可以直接在 VS Code 中通过命令面板 (⇧⌘P (Windows、Linux 为 Ctrl+Shift+P)) 中的 Git: Create Branch 和 Git: Checkout to 命令来创建和检出分支。
如果你运行 Git: Checkout to,你会看到一个下拉列表,其中包含当前仓库中的所有分支或标签。如果你觉得创建新分支是更好的选择,它还会提供创建新分支的选项,或者以分离模式检出分支。
Git: Create Branch 命令让你能够快速创建新分支。只需提供新分支的名称,VS Code 就会创建该分支并切换到它。如果你选择从...创建新分支,你会看到一个额外的提示,允许你指定新分支应该指向哪个提交。
当你切换到另一个分支时,VS Code 可以自动保存和恢复打开的编辑器。使用 scm.workingSets.enabled 设置来启用此功能。要控制首次切换到分支时打开的编辑器,你可以使用 scm.workingSets.default 设置。
工作树
VS Code 内置了对 Git 工作树的支持,使其可以轻松地同时管理和处理多个分支。
你可以通过切换 git.detectWorktrees 设置来禁用自动工作树检测。
创建工作树
你可以直接从源代码管理仓库视图或通过命令面板 (⇧⌘P (Windows、Linux 为 Ctrl+Shift+P)) 中的 Git: Create Worktree 命令创建一个新的工作树。
-
在“源代码管理”视图中,选择 ... > 仓库 来打开“源代码管理仓库”视图。
-
右键单击一个仓库,然后选择工作树 > 创建工作树...
-
按照提示选择新工作树的分支和位置。
VS Code 会在指定位置为工作树创建一个新文件夹,并将所选分支检出到该文件夹中。
“源代码管理仓库”视图会在其父仓库下显示新创建的工作树。VS Code 会区分仓库、子模块和工作树,并显示它们之间的关系以提高清晰度。
打开工作树
有多种方式可以打开工作树
-
直接在 VS Code 中打开与工作树关联的文件夹。VS Code 会自动检测到它是一个现有仓库的工作树。
-
在“源代码管理仓库”视图中右键单击工作树,然后选择在新窗口中打开工作树或在当前窗口中打开工作树。
-
在命令面板中运行 Git: Open Worktree in Current Window 或 Git: Open Worktree in New Window 命令,然后选择所需的工作树。
管理工作树
所有检测到的工作树都显示在“源代码管理仓库”视图中,并按其父仓库分组。
当你在列表中选择一个工作树时,“更改”视图会显示该工作树的待处理更改。
要删除一个工作树,请在列表中右键单击它,然后选择删除工作树。或者,在命令面板中运行 Git: Delete Worktree 命令。
比较和迁移工作树中的更改
当你在工作树中进行更改时,你可以将这些更改与你的主工作区进行比较,并将工作树的更改带回到你的主仓库中。
-
在源代码管理视图中,右键单击工作树中已更改的文件,然后选择与工作区比较,以并排查看差异。
-
审查后,使用命令面板中的迁移工作树更改...命令,将工作树中的所有更改合并到你当前的工作区。
远程仓库
如果你的仓库已连接到某个远程仓库,并且你检出的分支与该远程仓库中的分支有上游链接,VS Code 会为你提供有用的操作来推送(push)、拉取(pull)和同步(sync)该分支(后者将运行一个pull命令,然后是一个push命令)。你可以在视图和更多操作 ...
菜单中找到这些操作,以及添加或移除远程仓库的选项。
VS Code 能够定期从你的远程仓库获取更改。这使得 VS Code 能够显示你的本地仓库领先或落后远程仓库多少更改。此功能默认禁用,你可以使用 git.autofetch 设置来启用它。
你应该设置一个凭证助手,以避免每次 VS Code 与你的 Git 远程仓库通信时都被要求输入凭证。如果你不这样做,你可能需要考虑通过 git.autofetch 设置禁用自动获取,以减少你收到的提示次数。
源代码管理图
当你配置了远程仓库后,你可以看到你领先或落后远程仓库多少个提交。“源代码管理”视图中的图表视图以图形方式显示传入和传出的提交。
该图包含当前分支、当前分支的上游分支以及一个可选的基础分支。图的根是这些分支的共同祖先。
该图提供以下功能
- 选择一个条目以查看该提交中更改的文件。选择打开更改操作以在编辑器中查看该提交的差异。
- 右键单击一个提交以执行操作,如检出、拣选(cherry-pick)、将其添加为聊天上下文等。
- 选择一个文件以在编辑器中查看该文件的差异。
使用图表视图工具栏中的操作来选择分支、获取、拉取、推送和同步更改。
Git 状态栏操作
当当前检出的分支配置了上游分支时,状态栏中分支指示器旁边会有一个同步更改操作。同步更改会将远程更改拉取到你的本地仓库,然后将本地提交推送到上游分支。
如果没有配置上游分支,并且 Git 仓库已设置了远程仓库,则会启用发布操作。这将允许你将当前分支发布到远程仓库。
如果你的工作区包含多个 Git 仓库,状态栏将显示当前仓库。当你选择状态栏项时,你可以选择哪个仓库应该处于活动状态的行为。
行号槽指示器
如果你打开一个作为 Git 仓库的文件夹并开始进行更改,VS Code 会在行号槽和概览标尺上添加有用的注释。
- 红色三角表示行被删除
- 绿色条表示新增的行
- 蓝色条表示修改过的行
合并冲突
VS Code 能够识别合并冲突。差异会被高亮显示,并有内联操作来接受其中一个或两个更改。一旦冲突解决,暂存冲突文件,以便你可以提交这些更改。
三路合并编辑器
为了帮助你解决合并冲突,VS Code 提供了一个三路合并编辑器,你可以在其中交互式地接受传入和当前的更改,并查看和编辑最终合并的文件。通过选择存在 Git 合并冲突文件右下角的在合并编辑器中解决按钮,可以打开三路合并编辑器。
三路合并编辑器分别显示传入的更改(左侧)、当前的更改(右侧)以及合并的结果(底部)。冲突会被高亮显示,并可以使用 CodeLens 按钮来解决。
解决冲突
三路合并编辑器允许你通过接受其中一个或两个更改来解决冲突。你也可以手动编辑合并的结果。
对于某些冲突,合并编辑器会显示一个接受组合按钮。接受组合会通过智能地合并两个更改来解决当前冲突。这对于同一行中不触及相同字符的更改特别有用。
使用忽略按钮可以既不接受传入的更改也不接受当前的更改,但将冲突标记为已解决。这将把冲突区域重置为进行任何更改之前的状态。
完成合并
你可以使用结果编辑器右侧的冲突计数器来跟踪还剩下多少未解决的冲突。点击计数器会跳转到下一个未解决的冲突。一旦所有冲突都解决完毕,你可以通过选择右下角的完成合并来完成合并。这会暂存文件并关闭合并编辑器。
替代布局及更多
选择合并编辑器右上角的三个点 (···) 会打开一个带有附加选项的上下文菜单。你可以切换到垂直布局并显示基础视图,该视图显示文件在进行任何更改之前的状态。
传入、当前和结果旁边的三个点为每个视图提供了选项,例如显示与基础的并排差异、接受所有更改或重置结果。
理解冲突
如果你想了解更多关于三路合并编辑器工作原理的细节,我们推荐观看以下视频
查看差异
我们的 Git 工具支持在 VS Code 内部查看差异。
差异编辑器中间有一个单独的行号槽,使你能够暂存或还原代码块的更改。如果你选择一段文本,你可以还原或暂存包含在该选择中的更改。
你可以通过首先在资源管理器视图中右键单击一个文件并选择选择以进行比较,然后右键单击要比较的第二个文件并选择与选定项比较来比较任意两个文件。或者,打开命令面板 (⇧⌘P (Windows、Linux 为 Ctrl+Shift+P)),然后选择任何文件: 比较命令。了解更多关于在 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 输出窗口,请运行查看 > 输出,然后从下拉列表中选择 Log (Git)。
VS Code 作为 Git 编辑器
当你从命令行启动 VS Code 时,可以传递 --wait
参数,使启动命令等待直到你关闭新的 VS Code 实例。这在你将 VS Code 配置为 Git 外部编辑器时很有用,这样 Git 会等待直到你关闭启动的 VS Code 实例。
以下是操作步骤
- 确保你可以在命令行中运行
code --help
并得到帮助信息。- 如果你没有看到帮助信息,请按照以下步骤操作
- macOS: 从命令面板中选择Shell 命令: 在 PATH 中安装 'code' 命令。
- 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 的差异和合并功能。将以下内容添加到你的 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 进行交互式变基git commit
使用 VS Code 编写提交信息git add -p
后跟 e 进行交互式添加git difftool <commit>^ <commit>
使用 VS Code 作为更改的差异编辑器
处理 GitHub 拉取请求和议题
Visual Studio Code 还可以引入 GitHub 的拉取请求和议题。在 VS Code 中创建你的 PR,用评论进行审查,并在不切换上下文的情况下批准它们。了解更多关于在 VS Code 中处理 GitHub PR 和议题的信息。
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”,你会看到像调试器和代码检查器之类的扩展类别建议。选择 @category:"scm providers"
查看可用的 SCM 提供程序。
后续步骤
-
介绍视频 - Git 版本控制 - 一个介绍性视频,概述了 VS Code 的 Git 支持。
-
GitHub 协作入门 - 学习如何将 GitHub 与 VS Code 结合使用。
-
了解更多关于Copilot VS Code - 了解 VS Code 中的 Copilot。
-
源代码管理 API - 如果你想将另一个源代码管理提供程序集成到 VS Code 中,请参阅我们的源代码管理 API。