在 VS Code 中使用版本控制

原文:Version Control in Visual Studio Code

Visual Studio Code 集成了源代码控制管理 (SCM),并提供了现成的Git支持。许多其他源代码控制提供程序可通过VS Code Marketplace 上的扩展获得。

SCM 供应商#

VS Code 支持同时处理多个源代码管理程序。例如,您可以在 Azure DevOps Server 本地工作区旁边打开多个 Git 存储库,并在您的项目中无缝工作。要打开源代码控制视图,选择源控制视图(Ctrl + Shift + G)上overflow(...)菜单,将鼠标悬停在Views上,确保Source Control Repositories标有√图标。该源代码控制视图显示检测到的供应商和存储库,并可以通过选择特定的供应商范围更改的显示。

溢出菜单中的源代码管理存储库视图选项

SCM 提供程序扩展#

如果您想安装另一个 SCM 程序,您可以在扩展视图 ( Ctrl+Shift+X ) 中搜索scm providers。输入“@ca”,您将看到有关调试器和 linter 等扩展类别的建议。选择以查看可用的 SCM 提供商。@category:"scm providers"

市场中的 SCM 提供商类别

Git 支持#

VS Code 附带一个 Git 源代码控制管理器 (SCM) 扩展。大多数源代码控制 UI 和工作流程在其他 SCM 扩展中是通用的,因此阅读 VS Code 中的一般 Git 支持将帮助您了解如何使用其他提供程序。

**注意:**如果您是 Git 新手,git-scm网站是一个不错的起点,里面有一本流行的在线书籍、入门视频cheat sheets。VS Code 文档假设您已经熟悉 Git。

Git概述

注意: VS Code 将利用您电脑的 Git 安装,因此您需要先安装 Git,然后才能获得这些功能。确保至少安装 version 2.0.0

👉当您提交时,请注意,如果您的用户名和/或电子邮件未在您的 Git 配置中设置,Git 将回退到使用来自您本地机器的信息。您可以在Git 提交信息中找到详细信息

左侧活动栏中的源代码管理图标将始终显示您的存储库中当前有多少更改概览。选择该图标将显示当前存储库更改的详细信息:CHANGESSTAGED CHANGESMERGE CHANGES

单击每个项目将详细显示每个文件中的文本更改。请注意,对于未暂存的更改,右侧的编辑器仍可让您编辑文件:随意使用它!

您还可以在 VS Code 的左下角找到仓库状态的指标:当前分支dirty indicators以及当前分支传入和传出提交的数量。您可以通过单击该状态指示器并从列表中选择 Git 引用来checkout存储库中的任何分支。

**提示:**您可以在 Git 存储库的子目录中打开 VS Code。VS Code 的 Git 服务仍将照常工作,显示存储库内的所有更改,但作用域目录之外的文件更改会以阴影显示,表明它们位于当前工作区之外。

提交#

暂存(git add) 和取消暂存(git reset) 可以通过文件中的上下文操作或通过拖放来完成。

暂存所有更改按钮

您可以在更改上方键入提交消息,然后按Ctrl+EntermacOS:⌘+Enter)以提交它们。如果有任何阶段性更改,则只会提交更改。否则,您将收到一个提示,要求您选择要提交的更改并获得更改提交设置的选项。

我们发现这是一个很棒的工作流程。例如,在前面的屏幕截图中,只有暂存的更改gulpfile.js才会包含在提交中。连续提交操作可以在单独的提交中提交以后对gulpfile.js 的更改、对yarn.lock 的删除和对 tests.js的更改。

更具体的提交操作可以在源代码管理视图顶部的视图和更多操作 ...菜单中找到。

视图和更多操作按钮

提示:如果您将更改提交到错误的分支,请使用命令面板中( Ctrl+Shift+P )的Git: Undo Last Commit命令撤消您的提交。

克隆一个仓库#

如果您尚未打开文件夹,源代码管理视图将为您提供从本地计算机打开文件夹克隆存储库 的选项。

首次运行源代码管理体验

如果您选择Clone Repository,您将被要求提供远程存储库的 URL(例如在GitHub 上)以及放置本地存储库的父目录。

对于 GitHub 存储库,您可以从 GitHubCode对话框中找到 URL 。

克隆存储库对话框

然后将该 URL 粘贴到Git: Clone提示中。

设置存储库 URL

您将看到Clone from GitHub的选项。在 VS Code 中使用 GitHub 帐户进行身份验证后,您将能够按名称搜索存储库,并选择任何存储库来克隆它。您还可以使用命令面板中( Ctrl+Shift+P )的Git: Clone命令启动克隆 Git 存储库的流程。要查看分步演练,请查看VS Code视频中的Clone 存储库

注意:如果您想在不将内容克隆到本地计算机的情况下处理存储库,您可以安装GitHub 存储库扩展以直接在 GitHub 上浏览和编辑。您可以在GitHub 存储库扩展部分了解更多信息。

分支和标签#

您可以通过Command Palette ( Ctrl+Shift+P )中的Git: Create BranchGit: Checkout to commands 直接在 VS 代码中创建和检出分支。

如果您运行Git: Checkout to,您将看到一个下拉列表,其中包含当前存储库中的所有分支或标签。如果您认为这是一个更好的选择,它还会为您提供创建新分支的选项,或者以分离模式检出分支。

Git 结帐

Git: Create Branch命令,可以快速创建一个新的分支。只需提供新分支的名称,VS Code 就会创建该分支并切换到该分支。如果你选择Create new branch from…,你会得到一个额外的提示,允许你指定新分支应该指向哪个提交。

远程仓库#

鉴于您的存储库已连接到某个远程仓库并且您checked out的分支具有指向该远程分支的上游链接,VS Code 为您提供了有用的操作来推送拉取同步该分支(后者将运行一个pull命令通过推送命令)。您可以在“视图”和“更多操作” ...菜单中找到这些操作,以及添加或删除远程.

VS Code 能够定期从您的远程仓库获取更改。这使 VS Code 能够显示您的本地存储库在远程存储库之前或之后的更改数量。从 VS Code 1.19 开始,默认情况下禁用此功能,您可以使用git.autofetch 设置启用它。

**提示:**您应该设置一个凭证助手,以避免每次 VS Code 与您的 Git 远程仓库对话时都被要求提供凭证。如果您不这样做,您可能需要考虑通过git.autofetch 设置禁用自动获取以减少您收到的提示数量。

Git 状态栏操作#

在当前检出的分支配置了上游分支时,状态栏中的分支指示器旁边有一个同步更改操作。同步更改会将远程更改拉到您的本地存储库,然后将本地提交推送到上游分支。

git 状态栏同步

如果没有配置上游分支并且 Git 存储库设置了远程,则启用发布操作。这将允许您将当前分支发布到远程。

git 状态栏发布

Gutter 指示器#

如果您打开一个作为 Git 存储库的文件夹并开始进行更改,VS Code 将向装订线和概览标尺添加有用的注释。

  • 红色三角形表示已删除行的位置
  • 绿色条表示新添加的行
  • 蓝色条表示修改后的行

天沟指标

合并冲突#

Git合并

VS Code 可以识别合并冲突。差异被突出显示,并且有内联操作来接受一个或两个更改。解决冲突后,暂存冲突文件,以便您可以提交这些更改。

查看差异#

我们的 Git 工具支持在 VS Code 中查看差异。

VS Code 中的文件差异

提示:您可以首先右键单击 Explorer 或OPEN EDITORS列表中的文件并选择Select for Compare,然后右键单击要与之比较的第二个文件并选择Compare with 'file_name_you_chose’来比较任意两个文件。或者从键盘Ctrl+Shift+P并选择File: Compare Active File With,您将看到最近文件的列表。

Diff 编辑器审阅窗格#

Diff 编辑器中有一个查看窗格,以统一的补丁格式显示更改。您可以使用Go to Next Difference (F7) 和 Go to Previous Difference (Shift+F7)在更改之间切换。可以使用箭头键导航行,按Enter将跳回到 Diff 编辑器和所选行中。

差异审查窗格

**注意:**此体验对屏幕阅读器用户特别有用。

时间线视图#

默认情况下,可在文件资源管理器底部访问的时间轴视图是用于可视化文件的时间序列事件(例如 Git 提交)的统一视图。

时间线视图

VS Code 的内置 Git 支持提供指定文件的 Git 提交历史记录。选择提交将打开该提交引入的更改的差异视图。当您右键单击一个提交时,您将获得Copy Commit IDCopy Commit Message 的选项

Visual Studio Code 通过VS Code Marketplace 上提供的扩展支持更多 Git 历史工作流。

Git输出窗口#

您可以随时窥探幕后情况以查看我们正在使用的 Git 命令。如果发生了奇怪的事情或者您只是好奇,这会很有帮助。😃

要打开 Git 输出窗口,请运行View > Output并从下拉列表中选择Git

初始化存储库#

如果您的工作区位于本地计算机上,则可以通过使用Initialize Repository命令创建 Git 存储库来启用 Git 源代码控制。当 VS Code 未检测到现有的 Git 存储库时,源代码控制视图将为您提供Initialize RepositoryPublish to GitHub的选项。

Git初始化存储库

您还可以从命令面板( Ctrl+Shift+P )运行Initialize RepositoryPublish to GitHub命令。运行Initialize Repository将创建必要的 Git 存储库元数据文件,并将您的工作区文件显示为准备暂存的未跟踪更改。Publish to GitHub将直接将您的工作区文件夹发布到 GitHub 存储库,允许您在私有和公共存储库之间进行选择。查看我们的Publish to GitHub视频,了解有关发布到 GitHub 的更多信息。

VS Code 作为 Git 编辑器#

当您从命令行启动 VS Code 时,您可以传递--wait参数以使启动命令等待直到您关闭新的 VS Code 实例。当您将 VS Code 配置为 Git 外部编辑器时,这会很有用,因此 Git 将等到您关闭启动的 VS Code 实例。

以下是执行此操作的步骤:

  1. 确保您可以从命令行运行

    code --help
    

    并获得帮助。

    • 如果您没有看到帮助,请按照以下步骤操作:
      • macOS:从命令面板中选择Shell Command: Install ‘Code’ command in path
      • Windows:确保在安装过程中选择了Add to PATH
      • Linux:确保您通过我们新的 .deb 或 .rpm 包安装了 Code。
  2. 从命令行,运行 git config --global core.editor "code --wait"

现在您可以运行git config --global -e并使用 VS Code 作为配置 Git 的编辑器。

VS Code 作为 Git 差异工具#

将以下内容添加到您的 Git 配置中以使用 VS Code 作为差异工具:

[diff]
    tool = default-difftool
[difftool "default-difftool"]
    cmd = code --wait --diff $LOCAL $REMOTE

这利用了--diff您可以传递给 VS Code的选项来并排比较两个文件。

总而言之,以下是一些可以使用 VS Code 作为编辑器的示例:

  • git rebase HEAD~3 -i 使用 VS Code 进行交互式 rebase
  • git commit 使用 VS Code 作为提交消息
  • git add -p后跟e用于交互式添加
  • git difftool <commit>^ <commit> 使用 VS Code 作为差异编辑器进行更改

处理拉取请求#

Visual Studio Code 还通过VS Code 市场上提供的 GitHub Pull Requests and Issues extension 支持拉取请求工作流。拉取请求扩展允许您直接在 VS Code 中查看、评论和验证源代码贡献。

下一步#

  • 介绍视频 - Git 版本控制- 介绍性视频,概述了 VS Code Git 支持。
  • 基本编辑- 了解强大的 VS Code 编辑器。
  • 代码导航- 快速浏览源代码。
  • 调试- 这就是 VS Code 真正闪耀的地方
  • 任务- 使用 Gulp、Grunt 和 Jake 运行任务。显示错误和警告
  • Source Control API - 如果您想将另一个 Source Control 提供程序集成到 VS Code 中,请参阅我们的 Source Control API。

常见问题#

我初始化了我的仓库,但...菜单中的操作都变灰了#

要**推送、拉取和同步,**您需要设置 Git 源。您可以从存储库主机获取所需的 URL。获得该 URL 后,您需要通过运行几个命令行操作将其添加到 Git 设置中。例如:

> git remote add origin https://github.com/<repo owner>/<repo name>.git
> git push -u origin main

我的团队正在使用 Team Foundation 版本控制 (TFVC) 而不是 Git。我应该怎么办?#

使用Azure Repos扩展,这将点亮 TFVC 支持。

为什么拉、推和同步操作永远不会完成?#

这通常意味着 Git 中没有配置凭据管理,并且由于某种原因您没有收到凭据提示。

您始终可以设置凭据帮助程序,以便从远程服务器拉取和推送,而无需 VS Code 每次都提示您输入凭据。

如何使用需要多重身份验证的 Azure DevOps 组织登录 Git?#

现在有帮助多因素身份验证的Git 凭证助手。您可以从下载这些混帐凭证管理Mac和LinuxGit的凭据管理器为Windows

我的电脑上安装了 GitHub Desktop,但 VS Code 忽略了它#

VS Code 仅支持官方 Git 发行版的 Git 集成。

每当 VS Code 运行时,我都会收到 Git 身份验证对话框#

VS Code 会自动从服务器获取更改,以便向您显示传入更改的摘要。Git 身份验证对话框独立于 VS Code 本身,是您当前 Git 凭据帮助程序的一部分。

避免这些提示的一种方法是设置一个记住您的凭据的凭据助手

另一种方法是禁用自动通过改变以下设置抓取特点:"git.autofetch": false

我可以在 VS Code 中使用 SSH Git 身份验证吗?#

是的,尽管 VS Code 最容易使用 SSH 密钥而无需密码。如果您有带密码的 SSH 密钥,则需要从 Git Bash 提示符启动 VS Code 以继承其 SSH 环境。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐