This article explores Visual Studio Code integration with Git Source Control.

本文探讨了Visual Studio Code与Git Source Control的集成。

介绍 (Introduction)

Visual Studio Code is a well-liked editor to support various development activities, programming languages. You can start exploring it by referring to the Getting started with Visual Studio Code (VS Code) article.

Visual Studio Code是一个受欢迎的编辑器，可支持各种开发活动和编程语言。 您可以通过参考“ Visual Studio代码入门（VS Code）”一文来开始探索它。

Git is a source control platform, and it helps you in managing the development activities. It takes snapshots of your filesystem and saves the state of the project in a snapshot. It maintains the stream of snapshots as the file changes over time.

Git是一个源代码控制平台，它可以帮助您管理开发活动。 它为您的文件系统创建快照，并将项目状态保存在快照中。 当文件随时间变化时，它会维护快照流。

In the articles below, we explored the useful functionality of Git in the Azure Data Studio.

在下面的文章中，我们探讨了Azure Data Studio中Git的有用功能。

在Azure Data Studio（ADS）中使用Git进行源代码控制 (Source Control using Git in Azure Data Studio (ADS) )

• It gives an overview of Git along with its installation, configuration in Azure Data Studio 它概述了Git及其在Azure Data Studio中的安装和配置
• It also explores a repositor’s initialization, commits, and timeline of the changes 它还探讨了存储库的初始化，提交和更改的时间表

将Azure Data Studio与Git和GitHub集成 (Integrating Azure Data Studio with Git and GitHub)

• Integration of Git and GitHub web repository 集成Git和GitHub Web存储库
• It covers synchronization between Git and GitHub in bidirectional mode 它涵盖了双向模式下Git和GitHub之间的同步

在Azure Data Studio中使用Git组件 (Working with Git components in Azure Data Studio)

• It explains the data flow between the Staging area, working tree and repository 它说明了暂存区域，工作树和存储库之间的数据流
• Explain a few useful Git commands in a terminal 在终端中解释一些有用的Git命令

In this article, we will explore Git integration in the Visual Studio Code and its useful features

在本文中，我们将探讨Visual Studio Code中的Git集成及其有用的功能。

Visual Studio代码和Git源代码控制 (Visual Studio Code and Git Source Control)

VS code contains integrated Git source control. It also supports various other source control such as Azure Repos, Perforce, TFS, and SCM using extensions.

VS代码包含集成的Git源代码控制。 它还支持使用扩展的各种其他源代码控制，例如Azure Repos，Perforce，TFS和SCM。

Launch VS code, and in the left-hand menu, click on the Source Control icon for Git. It gives two options – Open Folder and Clone Repository.

启动VS代码，然后在左侧菜单中，单击Git的Source Control图标。 它提供了两个选项-打开文件夹和克隆存储库。

We can open a git repository folder or clone from a GitHub URL. We already set up a GitHub repository in the previous article. Therefore, instead of creating a new repository, let’s clone the repository from GitHub in the VS Code.

我们可以打开git存储库文件夹或从GitHub URL克隆。 我们已经在上一篇文章中建立了GitHub存储库。 因此，让我们从GitHub中的VS Code中克隆该存储库，而不是创建一个新的存储库。

First, log in to your GitHub profile, view the files in it, and copy the repository URL.

首先，登录到您的GitHub配置文件，查看其中的文件，然后复制存储库URL。

In the VS Code, click on the Clone Repository. It asks for the GitHub URL, pastes the URL, and clicks on the Clone from URL.

在“ VS代码”中，单击“ 克隆存储库” 。 它要求提供GitHub URL，粘贴URL，然后单击从URL克隆。

Next, it asks for the folder in your local system. VS Code will copy the scripts from the GitHub repository into the VS Code Git repository.

接下来，它询问您本地系统中的文件夹。 VS Code会将脚本从GitHub存储库复制到VS Code Git存储库。

Click on the Select Repository Location. You get a prompt while it clones the repository from the GitHub URL you specified.

单击选择存储库位置。 当它从您指定的GitHub URL复制存储库时，您会得到提示。

Once the cloning process is completed, it asks you – Would you like to open the cloned repository?

克隆过程完成后，它会询问您–您想打开克隆的存储库吗？

Click on Open to view all the files in VS code repository. You can compare both the VS Code repository and the GitHub Repository.

单击“打开”以查看VS代码存储库中的所有文件。 您可以比较VS Code存储库和GitHub存储库。

Git状态栏操作 (Git Status Bar actions)

In the Git status bar, you get the following indicators.

在Git状态栏中，您将获得以下指示器。

• Branch: It shows the Git Branch. By default, it uses a master branch for all scripts and changes 分支 ：它显示Git分支。 默认情况下，它对所有脚本和更改使用master分支
• Synchronize: You can click on the 同步 ：您可以单击“ Synchronize Changes indicator to synchronize the VS code repository with the upstream branch. It pulls the remote changes to the Visual Studio Code local repository. Similarly, if you have performed any changes in the local repository, it pushes changes back to the GitHub branch 同步更改”指示器以将VS代码存储库与上游分支同步。 它将远程更改拉到Visual Studio Code本地存储库。 同样，如果您在本地存储库中进行了任何更改，它会将更改推回到GitHub分支
• Errors and Warning: If your code contains any errors, warnings in the script, these indicators highlight it 错误和警告 ：如果您的代码包含任何错误，脚本中的警告，这些指示符会高亮显示

For example, I made a syntax error in the SQL script on purpose. It highlights the same in the indicator. You can click on the indicator to view the errors in a separate window, as shown below.

例如，我故意在SQL脚本中犯了语法错误。 它在指示器中突出显示相同内容。 您可以单击指示器在单独的窗口中查看错误，如下所示。

天沟指示器 (Gutter indicators)

Once we make the changes in the Git repository scripts, VS Code adds annotations in the gutter and the overview ruler.

一旦我们在Git存储库脚本中进行了更改，VS Code就会在装订线和概览标尺中添加注释。

• A red triangle is for the deleted lines 红色三角形代表已删除的行
• A green bar for the newly added files 新添加文件的绿色条
• A blue bar is for the modified lines 蓝色条用于修改的行

Similarly, it also shows the indicators in the overview ruler.

同样，它也显示概览标尺中的指标。

The gutter helps you to identify the code that was modified, deleted, or inserted. For example, click on the red triangle, and it shows the deleted line from the code. Suppose you realized that someone deleted the row by mistake, you can revert the changes as well.

装订线可帮助您识别已修改，删除或插入的代码。 例如，单击红色三角形，它显示从代码中删除的行。 假设您意识到有人错误地删除了该行，那么您也可以还原更改。

Click on the Revert Change icon, as shown in the following image.

单击还原更改图标，如下图所示。

Similarly, you can click on the green or blue bar to see the changes done in the script.

同样，您可以单击绿色或蓝色条以查看脚本中所做的更改。

查看差异 (Viewing diffs)

VS Code also provides the functionality to perform a diff on query files. Usually, you download a separate third party tool for the comparison of the two different versions of a script. It compares the script changes with the last commit file in a Git repository and gives comparison visually. It saves your efforts to copy the code in a separate tool, then make the comparisons, and come back to the VS Code for further changes in the script.

VS Code还提供了对查询文件进行比较的功能。 通常，您下载一个单独的第三方工具来比较脚本的两个不同版本。 它将脚本更改与Git存储库中的最后一个提交文件进行比较，并直观地进行比较。 它省去了将代码复制到单独工具中，然后进行比较，然后返回VS Code进行脚本进一步更改的工作。

To view the demo for this feature, open any script in the Git repository, and make the changes. In the following screenshot, note the following things:

要查看此功能的演示，请在Git存储库中打开任何脚本，然后进行更改。 在以下屏幕截图中，请注意以下事项：

• Few code lines are removed after the last commit. It shows those rows in the red background 在最后一次提交之后，很少有代码行被删除。 它以红色背景显示那些行
• Few code lines are unchanged. It does not put any background color for those lines 几乎没有代码行保持不变。 这些行不会放置任何背景色
• Few code lines are inserted recently after the last commit. You can see a green background for those rows 在最后一次提交之后，最近插入的代码行很少。 您可以看到这些行的绿色背景

Git输出窗口 (Git output window)

You might be interested to learn the Git commands that are performing the tasks for you once you click on any option in the Git source control in the Visual Studio Code. VS Code provides a git output window and shows you commands that it is using. It helps learn the Git language and commands.

单击Visual Studio Code中Git源代码控件中的任何选项后，您可能有兴趣了解正在为您执行任务的Git命令。 VS Code提供了一个git输出窗口，并向您显示其正在使用的命令。 它有助于学习Git语言和命令。

In the VS Code, navigate to Command Palette -> Git: Show Git Output.

在VS Code中，导航到Command Palette-> Git：Show Git Output。

It opens another window for Git output, and you can see all commands in real-time.

它会打开另一个用于Git输出的窗口，您可以实时查看所有命令。

Git扩展 (Git Extensions)

VS Code provides several extensions to extend the functionality of the Git Source control. You can install these git extensions from the VS Code market place.

VS Code提供了几个扩展来扩展Git Source控件的功能。 您可以从VS Code市场安装这些git扩展。

Click on the Extensions icon in the menu and search for the Git keyword. It shows all related extensions in the list.

单击菜单中的扩展图标，然后搜索Git关键字。 它显示列表中的所有相关扩展。

Few useful extensions for Git source control are as below.

Git源代码管理的几个有用扩展如下。

吉特·布拉姆 (Git Blame)

Git blame gives information about the person who modified the code in the status bar. Suppose someone changed the code intentionally, and you want to know about the person and when it was changed. Git blame shows the information, as shown below. Its purpose is to keep you aware of the changes, and you can ask the questions for the developer in case of any issues.

Git怪在状态栏中提供了有关修改代码的人的信息。 假设有人故意更改了代码，并且您想了解该人以及更改时间。 Git责备显示信息，如下所示。 其目的是使您了解更改，并在出现任何问题时可以向开发人员提出问题。

git历史 (Git History)

You can explore the history of a file, author, branch in a GUI mode using Git history extension. You can search for a term as well. It provides additional information, commit history, branch actions, compare branches, and compares commits.

您可以使用Git历史扩展名以GUI模式浏览文件，作者，分支的历史。 您也可以搜索一个词。 它提供了其他信息，提交历史记录，分支操作，比较分支以及比较提交。

You can install the Git History extension and launch it from the VS Code Command Palette. You get the following options in the command palette.

您可以安装Git History扩展并从VS Code Command Palette启动它。 您可以在命令面板中获得以下选项。

• View Git history 查看Git历史
• View file history 查看文件历史
• View line history 查看线路历史

Let’s say we require information about a particular line from history.

假设我们需要历史记录中有关特定行的信息。

The highlighted line is for adding the additional script. Click on the file name, and you get additional options such as view file contents, compare files against workspace, compare against previous versions, or view file history.

突出显示的行用于添加其他脚本。 单击文件名，您将获得其他选项，例如查看文件内容，将文件与工作空间进行比较，与先前版本进行比较或查看文件历史记录。

If you click on compare the file against the previous version, it opens the current script and its comparison with the previous version.

如果单击将文件与先前版本进行比较，它将打开当前脚本并将其与先前版本进行比较。

结论 (Conclusion)

In this article, we explored the Git source control integration in the Visual Studio Code. It provides useful editor features for Git extension. We will continue exploring Git in the upcoming articles.

在本文中，我们探讨了Visual Studio Code中的Git源代码控件集成。 它为Git扩展提供了有用的编辑器功能。 我们将在接下来的文章中继续探索Git。

翻译自: https://www.sqlshack.com/visual-studio-code-vs-code-integration-with-git-source-control/