Visual Studio Code中的Git集成

Visual Studio Code has easily become one of the most popular editors out there for Web Development. It has gained such popularity thanks to its many built in features, including source control integration, namely with Git. With Git being one of the most popular and powerful Source Control providers, harnessing its power from within VS Code is just icing on the cake.

Visual Studio Code已轻松成为Web开发中最受欢迎的编辑器之一。由于其许多内置功能（包括与Git的源代码控制集成），它获得了如此广泛的欢迎。随着Git成为最受欢迎和功能最强大的Source Control提供程序之一，从VS Code中利用其功能只是锦上添花。

With Git being one of the most popular and powerful Source Control providers, harnessing its power from within VS Code is just icing on the cake.

随着Git成为最受欢迎和功能最强大的Source Control提供程序之一，从VS Code中利用其功能只是锦上添花。

We've talked about Best Plugins of VS Code and have our video course: Make Visual Studio Code Your Editor, let's focus on a specific (and very important) feature this time around.

我们已经讨论了VS Code的最佳插件，并提供了视频课程：将Visual Studio Code设为您的编辑器，让我们这次重点关注特定（且非常重要）的功能。

Check out Learn Visual Studio Code to learn everything you need to know about about the hottest editor in Web Development for only $10!

查看“ 学习Visual Studio Code” ，仅需10美元，即可了解有关Web开发中最热的编辑器所需的所有知识！

源代码管理选项卡 ( Source Control Tab )

The first thing we need to do to take advantage of Source Control integration is initialize a project as a Git repository. Typically, I would open up the built in terminal in VS Code and type git init like so.

要利用Source Control集成，我们要做的第一件事是将项目初始化为Git存储库。通常，我会在VS Code中打开内置终端，然后像这样输入git init 。

Although that is not particularly difficult, there's an even easier way. Start by opening up the Source Control tab (the icon looks like a split in the road) in the left-side panel. Then click the icon in the top right of the panel as shown below.

尽管这并不是特别困难，但是有一种更简单的方法。首先打开左侧面板中的“源代码控制”选项卡（图标看起来像是道路上的裂缝）。然后单击面板右上方的图标，如下所示。

This should open up your finder to the current directory. Select 'Initialize Repository'.

这将打开您的查找器到当前目录。选择“初始化存储库”。

Now, if you check your file system (make sure you can see hidden files) it now includes a .git directory. Notice also that my terminal specifically recognizes this directory as a Git repository by turning green. This is a feature of my terminal, not VS Code itself.

现在，如果您检查文件系统（确保可以看到隐藏的文件）， 它现在包括.git目录 。还要注意，我的终端通过变为绿色将该目录特别识别为Git存储库。这是我终端的功能，而不是VS Code本身。

Let's add a file called index.html. After doing so, notice in the Source Control panel that our new file shows up with the letter 'U' beside it. 'U' stands for untracked file, meaning a file that is new or changed but has not yet been added to the repository.

让我们添加一个名为index.html的文件。完成此操作后，请注意在“源代码控制”面板中，将显示新文件，并在其旁边显示字母“ U”。 “ U”代表未跟踪的文件，表示新文件或已更改但尚未添加到存储库的文件。

'U' stands for untracked file, meaning a file that is new or changed but has not yet been added to the repository.

“ U”代表未跟踪的文件，表示新文件或已更改但尚未添加到存储库的文件。

You can now click the plus icon by the index.html file listing to add the file to be tracked by the repository. Notice now that the letter next to the file has changed to an 'A'. 'A' stands for a new file that has been added to the repository.

现在，您可以单击index.html文件列表旁的加号图标以添加要由存储库跟踪的文件。现在注意，文件旁边的字母已更改为'A'。 “ A”代表已添加到存储库中的新文件。

'A' represents a new file that has been added to the repository.

“ A”表示已添加到资源库的新文件。

To commit our changes, type a commit message into the input box at the top of the Source Control panel. Then, click the check icon to perform the commit.

要提交更改，请在“源代码管理”面板顶部的输入框中键入提交消息。然后，单击复选图标以执行提交。

After doing so, you should notice that are no pending changes as shown here.

这样做之后，您应该注意到这里没有待定的更改。

Let's add a bit of content to our index.html file. We can use an Emmet shortcut to generate an HTML5 skeleton by pressing the '!' character followed by Tab. Go ahead and add something in the body like a Header and save it.

让我们在index.html文件中添加一些内容。我们可以使用Emmet快捷方式通过按“！”来生成HTML5框架。字符，然后按Tab。继续，在标题中添加一些内容（如Header）并保存。

As you would expect, in the Source Control panel, you should see that your file has been changed. It should show the letter 'M', which stands for a file that has been modified.

如您所料，在“源代码控制”面板中，您应该看到文件已更改。它应该显示字母“ M”，代表已被修改的文件。

'M' represents a file that has been modified.

“ M”表示已被修改的文件。

For practice, go ahead and commit this change as well.

作为练习，请继续并进行此更改。

天沟指示器 ( Gutter Indicators )

Let's move past the Source Control panel and take a look at what's called the 'Gutter' in VS Code. The 'Gutter' is the skinny area to the right of the line number. If you've used code folding before, the maximize and minimize icons are located in the gutter.

让我们越过“源代码控制”面板，看看VS Code中所谓的“装订线”。 “装订线”是行号右侧的皮包骨头区域。如果您以前使用过代码折叠，则最大化和最小化图标位于装订线中。

The 'Gutter' is the skinny area to the right of the line number.

“装订线”是行号右侧的皮包骨头区域。

Let's start by making a small change to our index.html file such as the content within the header tag. After doing so, you should notice a blue vertical mark in the gutter of the line that you changed. The vertical blue mark signifies that the corresponding line of code has been changed.

首先，对index.html文件进行一些小的更改，例如header标记中的内容。这样做之后，您应该在更改的行的装订线中注意到一个蓝色的垂直标记。垂直的蓝色标记表示相应的代码行已更改。

The vertical blue mark signifies that the corresponding line of code has been changed.

垂直的蓝色标记表示相应的代码行已更改。

Now, try deleting a line of code. For demo purposes, I'm going to delete one of the lines in the head section of my page. Notice now in the gutter that there is a vertical red line. The vertical red mark signifies a line or group of lines that has been deleted.

现在，尝试删除一行代码。出于演示目的，我将删除页面头部的其中一行。现在，请注意在装订线中有一条垂直的红线。垂直的红色标记表示已删除的一行或一组行。

The vertical red mark signifies a line or group of lines that has been deleted.

垂直的红色标记表示已删除的一行或一组行。

Lastly, at the bottom of your body section, add a new line of code and notice the green bar. The vertical green bar signifies a line of code that has been added.

最后，在正文部分的底部，添加一行新代码，并注意绿色栏。垂直的绿色条表示已添加的一行代码。

The vertical green bar signifies a line of code that has been added.

垂直的绿色条表示已添加的一行代码。

差异文件 ( Diffing Files )

VS Code also has the ability to perform a diff on a file. Typically, I would have to download a separate diff tool to do this, so it's great that VS Code has this feature built in.

VS Code还具有对文件执行差异的能力。通常，我必须下载一个单独的差异工具来执行此操作，因此VS Code内置了此功能非常好。

To view a diff, open up the Source Control panel and double-click a changed file. In this case, double-click the index.html file. You will be brought to a typical diff view with the current version of the file on the left and the previously commited version of the file on the right. Notice that I've added a line in the current version of mine.

要查看差异，请打开“源代码控制”面板，然后双击更改的文件。在这种情况下，双击index.html文件。您将进入典型的差异视图，左侧为文件的当前版本，右侧为文件的先前提交版本。请注意，我已经在我的当前版本中添加了一行。

与分支合作 ( Working with Branches )

Moving to the bottom bar, we have the ability to create and switch branches. If you take a look at the very bottom left of the editor, you should see the source control icon (remember it looks like a split in the road) followed most likely by 'master' or the name of the current working branch. To create a branch, click on that branch name. A menu should popup giving you the ability to create a new branch. Go ahead and create a new branch called 'test'

移至底部，我们可以创建和切换分支。如果您在编辑器的左下角查看，应该会看到源代码管理图标（请记住它看起来像是路途中的裂痕），其后很可能是'master'或当前工作分支的名称。要创建分支，请单击该分支名称。应该弹出一个菜单，使您能够创建新分支。继续创建一个名为“ test”的新分支

Now, make a change to your file, something that signifies you are in the new test branch.

现在，更改您的文件，这表明您在新的测试分支中。

Go ahead and commit those changes to the test branch. Then, click the branch name in the bottom left again to switch back to the master branch.

继续并将这些更改提交到测试分支。然后，再次单击左下方的分支名称，以切换回主分支。

After switching back to the master branch, you should notice that the change commited to the test branch is no longer present.

切换回master分支后，您应该注意到不再存在提交到test分支的更改。

使用远程存储库 ( Working with Remote Repositories )

We won't touch on it in depth here, but through the Source Control panel, you do have access to work with remote repositories. If you've worked with a remote repository before you'll notice familiar commands like pull, sync, publish, stash, etc.

我们不会在这里深入探讨它，但是通过“源代码控制”面板，您确实可以使用远程存储库。如果您使用过远程存储库，那么您会注意到熟悉的命令，例如pull，sync，publish，stash等。

I'll plan on following this up with a more in depth view of these features, but for now, I'll leave it up to you to explore them.

我计划对这些功能进行更深入的了解，但是现在，我将由您自己进行探索。

有用的插件 ( Useful Plugins )

Not only does VS Code come with lots of built in functionality for Git, there are also several very popular plugins to add additional functionality.

VS Code不仅为Git提供了许多内置功能，还提供了一些非常流行的插件来添加其他功能。

吉特·布拉姆 (Git Blame)

See Git Blame information in the status bar for the currently selected line.

请参阅状态栏中有关当前选定行的Git Blame信息。

This may sound intimidating, but not to worry, the Git Blame plugin is much more about practicality than it is about making someone feel bad. The idea of "blaming" someone for a code change is less about shaming them, and more about figuring out the right person to ask questions to for certain pieces of code. Sure, you can start the finger pointing if something breaks, but that's not the intended use here.

这听起来可能令人生畏，但不必担心， Git Blame插件更多的是实用性，而不是使人感到难过。 “责怪”某人进行代码更改的想法不是要羞辱他们，而是要找出合适的人向某些代码部分提问。当然，如果出现问题，您可以开始指责，但这不是此处的预期用途。

As you can see in the screenshot, this plugin provides a subtle message related to the current line of code you are working on in the bottom toolbar explaining who made the change and when they made it.

如您在屏幕快照中所见，此插件在底部工具栏中提供了与您当前正在处理的代码行相关的微妙信息，说明了谁进行了更改以及何时进行了更改。

git历史 (Git History)

Although you can view current changes, perform diffs, and manage branches with the built in features in VS Code, it does not provide an in-depth view into your Git history. The Git History plugin solves that issue. As you can see in the image below, this plugin allows you to thoroughly explore the histoy of a file, a given author, a branch, etc. To activate the Git History window below, right-click on a file and choose "Git: View File History"

尽管您可以使用VS Code中的内置功能查看当前更改，执行差异和管理分支，但它无法提供有关Git历史记录的深入视图。 Git History插件解决了该问题。如下图所示，您可以使用此插件彻底浏览文件，给定作者，分支等的组织结构。要**下面的Git历史记录窗口，请右键单击文件，然后选择“ Git：查看文件历史记录”

To activate the Git History window below, right-click on a file and choose "Git: View File History"

要**下面的Git历史记录窗口，请右键单击文件，然后选择“ Git：查看文件历史记录”

Additionally, you can compare branches and commits, create branches from commits, and more. Definitely worth a look!

此外，您可以比较分支和提交，从提交创建分支等等。绝对值得一看！

吉特·伦斯 (Git Lens)

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

GitLens增强了Visual Studio Code中内置的Git功能。它可以帮助您通过Git责任注释和代码镜头一目了然地看到代码作者的身份，无缝地导航和浏览Git存储库，通过功能强大的比较命令获得有价值的见解，等等。

I've left the Git Lens plugin for last because it is the one I've heard most about in the community and the most powerful. Honestly, in most ways, it can replace each of the previous two plugins with its functionality.

我将Git Lens插件留在了最后，因为它是我在社区中听说得最多，功能最强大的插件。老实说，在大多数情况下，它都可以用其功能替换前两个插件中的每个插件。

For "blame" information, a subtle message appears to the right of the line you are currently working on to inform you of who made the change, when they made it, and the associated commit message. There are some additional pieces of information that pop up when hovering over this message like the code change itself, the timestamp, and more. However, when I tried to grab a screenshot using my shortcuts the message disappeared. Guess you'll just have to try it out yourself!

对于“非常规”信息，您当前正在处理的行的右侧会显示一条微妙的消息，通知您进行更改的人员，更改的时间以及相关的提交消息。将鼠标悬停在此消息上时，还会弹出一些其他信息，例如代码更改本身，时间戳等。但是，当我尝试使用快捷方式获取屏幕截图时，该消息消失了。猜猜您只需要自己尝试一下即可！

For "blame" information, a subtle message appears to the right of the line you are currently working on to inform you of who made the change, when they made it, and the associated commit message.

对于“非常规”信息，您当前正在处理的行的右侧会显示一条微妙的消息，通知您进行更改的人员，更改的时间以及相关的提交消息。

For Git history information, this plugins provides tons of functionality. You have easy access to tons of options including, showing file history, performing diffs with previous versions, open a specific revision, and more. To open up these options you can click the text in the bottom status bar that contains the author who edited the line of code and how long ago it was edited. This will open up the following window.

有关Git历史记录信息，此插件提供了大量功能。您可以轻松访问大量选项，包括显示文件历史记录，与以前的版本执行差异，打开特定修订版等等。要打开这些选项，您可以单击底部状态栏中的文本，其中包含编辑该代码行的作者以及该代码的编辑时间。这将打开以下窗口。

Honestly, this plugin is jam packed with functionality, and it will take a while to take in all that it has to offer. However, after spending some time with it, I really think you'll start to appreciate all of its power!

老实说，这个插件挤满了功能，要花一些时间才能提供所有功能。但是，花了一些时间后，我真的认为您会开始欣赏它的所有功能！

回顾 ( Recap )

Hopefully, you are starting to get a feel for the true power of VS Code. While focusing on its Source Control integration, it's obvious that VS Code can handle many features that previously would have required the download of a separate tool.

希望您开始对VS Code的真正功能有所了解。在专注于其Source Control集成的同时，很明显VS Code可以处理许多以前需要下载单独工具的功能。

If you have been using this feature for a while or trying it out for the very fist time, let me know what you think.

如果您使用此功能已有一段时间，或者已经试用了很长时间，请告诉我您的想法。