介绍 (Introduction)
Visual Studio Code (VS Code) has become one of the most popular editors out there for web development. It has gained such popularity thanks to its many built-in features such as source control integration, namely with Git. Harnessing the power of Git from within VS Code can make your workflow more efficient and robust.
Visual Studio Code(VS Code)已经成为Web开发中最受欢迎的编辑器之一。 由于其许多内置功能(例如与Git的源代码控制集成)，它已经获得了如此的普及。 在VS Code中利用Git的功能可以使您的工作流更加高效和强大。
In this tutorial, you will explore using Source Control Integration in VS Code with Git.
在本教程中，您将探索在VS Code和Git中使用Source Control Integration。
先决条件 (Prerequisites)
To complete this tutorial, you will need the following:
要完成本教程，您将需要以下内容：
Git installed on your machine. For more details on accomplishing this, review the Getting Started with Git tutorial.
安装在您机器上的Git。 有关完成此操作的更多详细信息，请查看Git入门教程。
The latest version of Visual Studio Code installed on your machine.
您的计算机上安装了最新版本的Visual Studio Code 。
第1步-熟悉“源代码管理”选项卡 (Step 1 — Familiarizing with the Source Control Tab)
The first thing you need to do to take advantage of source control integration is initialize a project as a Git repository.
要利用源代码控制集成，要做的第一件事是将项目初始化为Git存储库。
Open Visual Studio Code and access the built-in terminal. You can open this by using the keyboard shortcut CTRL + ` on Linux, macOS, or Windows.
打开Visual Studio代码并访问内置终端 。 您可以在Linux，macOS或Windows上使用键盘快捷键CTRL + `来打开它。
In your terminal, make a directory for a new project and change into that directory:
在终端中，为新项目创建一个目录，然后切换到该目录：
mkdir git_test
mkdir git_test
cd git_test
cd git_test
Then, create a Git repository:
然后，创建一个Git存储库：
- git init git init
Another way to accomplish this with Visual Studio Code is by opening up the Source Control tab (the icon looks like a split in the road) in the left-side panel:
使用Visual Studio Code完成此操作的另一种方法是，在左侧面板中打开“源代码控制”选项卡(图标看起来像是道路上的裂缝 )：
Next, select Open Folder:
接下来，选择打开文件夹 ：
This will open up your file explorer to the current directory. Select the preferred project directory and click Open.
这会将您的文件浏览器打开到当前目录。 选择首选项目目录，然后单击“ 打开” 。
Then, select Initialize Repository:
然后，选择初始化存储库 ：
If you now check your file system, you will see that it includes a .git directory. To do this, use the terminal to navigate to your project directory and list all of the contents:
如果现在检查文件系统，将看到它包含一个.git目录。 为此，请使用终端导航到您的项目目录并列出所有内容：
- ls -la ls -la
You will see the .git directory that was created:
您将看到已创建的.git目录：
- . 。
- .. ..
.git
.git
Now that the repo has been initialized, add a file called index.html.
现在，仓库已经初始化，添加一个名为index.html的文件。
After doing so, you’ll see in the Source Control panel that your 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:
完成此操作后，您将在“ 源代码控制”面板中看到新文件显示，旁边带有字母U。 U代表未跟踪的文件 ，表示一个新文件或已更改但尚未添加到存储库的文件：
You can now click the plus icon (+) by the index.html file listing to track the file by the repository.
现在，您可以单击index.html文件列表旁边的加号 ( + )，以按存储库跟踪文件。
Once added, the letter next to the file will change to an A. A represents a new file that has been added to the repository.
添加后，文件旁边的字母将变为A。 A代表已添加到资源库的新文件。
To commit your 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 will notice that are no pending changes.
这样做之后，您会注意到没有任何未决的更改。
Next, add a bit of content to your index.html file.
接下来，向您的index.html文件中添加一些内容。
You can use an Emmet shortcut to generate an HTML5 skeleton in VS Code by pressing the ! key followed by Tab key. Go ahead and add something in the <body> like a <h1> heading and save it.
您可以使用Emmet快捷方式通过按!代码在VS Code中生成HTML5框架! 键，然后按Tab键。 继续，在<body>添加一些内容，例如<h1>标题并保存。
In the source control panel, you will see that your file has been changed. It will show the letter M next to it, which stands for a file that has been modified:
在源代码控制面板中，您将看到文件已更改。 它将在其旁边显示字母M ，代表已修改的文件：
For practice, go ahead and commit this change as well.
作为练习，请继续并进行此更改。
Now that you’re familiar interacting with the source control panel, you will move on to interpreting gutter indicators.
现在您已经熟悉了与源代码控制面板的交互，接下来将继续解释装订线指示器。
第2步-解释天沟指示器 (Step 2 — Intepreting Gutter Indicators)
In this step you will 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.
在这一步中，您将了解VS Code中所谓的“ 装订线 ”。 装订线是行号右边的皮包骨头区域。
If you’ve used code folding before, the maximize and minimize icons are located in the gutter.
如果您以前使用过代码折叠 ，则最大化和最小化图标位于装订线中。
Let’s start by making a small change to your index.html file, such as a change to the content within the <h1> tag. After doing so, you will 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文件进行一些更改，例如对<h1>标记中的内容进行更改。 这样做之后，您会在更改的行的装订线中看到一个蓝色的垂直标记。 垂直的蓝色标记表示相应的代码行已更改。
Now, try deleting a line of code. You can delete one of the lines in the <body> section of your index.html file. Notice now in the gutter that there is a red triangle. The red triangle signifies a line or group of lines that has been deleted.
现在，尝试删除一行代码。 您可以删除index.html文件的<body>部分中的其中一行。 现在在排水沟中注意到有一个红色三角形。 红色三角形表示已删除的一条线或一组线。
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.
最后，在<body>部分的底部，添加一行新代码，并注意绿色栏。 垂直的绿色条表示已添加的一行代码。
This example depicts gutter indicators for a modified line, a removed line, and a new line:
本示例描述了修改的线，删除的线和新线的装订线指示器：
第3步-差异文件 (Step 3 — Diffing Files)
VS Code also has the ability to perform a diff on a file. Typically, you would have to download a separate diff tool to do this, so this built-in feature can help you work more efficiently.
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 committed version of the file on the right.
要查看差异，请打开源代码控制面板，然后双击更改的文件。 在这种情况下，双击index.html文件。 您将进入典型的差异视图，左侧为文件的当前版本，右侧为文件的先前提交版本。
This example shows that a line has been added in the current version:
此示例显示在当前版本中添加了一行：
第4步-使用分支 (Step 4 — Working with Branches)
Moving to the bottom bar, you 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 (the one that looks like a split in the road) followed most likely by master or the name of the current working branch.
移动到底部的栏中，您可以创建和切换分支。 如果您在编辑器的最左端看一眼，应该会看到源代码管理图标(看起来像是一条路的分支)，其后很可能是master或当前工作分支的名称。
To create a branch, click on that branch name. A menu should pop up giving you the ability to create a new branch:
要创建分支，请单击该分支名称。 应该弹出一个菜单，使您能够创建新分支：
Go ahead and create a new branch called test.
继续创建一个名为test的新分支。
Now, make a change to your index.html file that signifies you are in the new test branch, such as adding the text this is the new test branch.
现在，对index.html文件进行更改，以表明您位于新的test分支中，例如添加文本， this is the new test branch 。
Commit those changes to the test branch. Then, click the branch name in the bottom left again to switch back to the master branch.
将这些更改提交到test分支。 然后，再次单击左下方的分支名称，以切换回master分支。
After switching back to the master branch, you’ll notice that the this is the new test branch text committed to the test branch is no longer present.
切换回master分支后，您会注意到， this is the new test branch不再存在于test分支this is the new test branch文本。
第5步-使用远程存储库 (Step 5 — Working with Remote Repositories)
This tutorial won’t touch on it in-depth, 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等。
第6步-安装有用的扩展 (Step 6 — Installing Useful Extensions)
Not only does VS Code come with lots of built-in functionality for Git, there are also several very popular extensions to add additional functionality.
VS Code不仅为Git提供了许多内置功能，还提供了一些非常流行的扩展来添加其他功能。
吉特·布拉姆 (Git Blame)
This extension provides the ability to view 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 extension 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.
这听起来可能令人生畏，但不必担心， Git Blame扩展所涉及的不仅仅是实用性，还不在于使人感到难过。 “责备”某人进行代码更改的想法不是要羞辱他们，而是要找出合适的人向某些代码部分提问。
As you can see in the screenshot, this extension 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 extension solves that issue.
尽管您可以使用VS Code的内置功能查看当前更改，执行差异和管理分支，但它无法提供有关Git历史记录的深入视图。 Git History扩展解决了该问题。
As you can see in the image below, this extension allows you to thoroughly explore the history 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:
如下图所示，该扩展名使您可以彻底浏览文件，给定作者，分支等的历史记录。要激活下面的Git History窗口，请右键单击文件并选择Git：View文件历史记录 ：
Additionally, you can compare branches and commits, create branches from commits, and more.
此外，您可以比较分支和提交，从提交创建分支等等。
吉特·伦斯 (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存储库，通过强大的比较命令获得有价值的见解，等等。
The Git Lens extension is one of the most popular in the community and is also the most powerful. In most ways, it can replace each of the previous two extension 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.
对于“非常规”信息，您当前正在处理的行的右侧会显示一条微妙的消息，通知您进行更改的人员，更改的时间以及相关的提交消息。 将鼠标悬停在此消息上时，还会弹出一些其他信息，例如代码更改本身，时间戳等。
For Git history information, this extension provides a lot of functionality. You have easy access to tons of options including showing file history, performing diffs with previous versions, opening 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.
对于Git历史记录信息，此扩展提供了许多功能。 您可以轻松访问大量选项，包括显示文件历史记录，与以前的版本执行差异，打开特定修订版等等。 要打开这些选项，您可以单击底部状态栏中的文本，该文本包含编辑该代码行的作者以及该代码的编辑时间。
This will open up the following window:
这将打开以下窗口：
This extension is packed with functionality, and it will take a while to take in all that it has to offer.
该扩展程序包含功能，需要花费一些时间才能提供所有功能。
结论 (Conclusion)
In this tutorial, you explored how to use source control integration with VS Code. VS Code can handle many features that previously would have required the download of a separate tool.
在本教程中，您探索了如何将源代码控制与VS Code结合使用。 VS Code可以处理许多以前需要下载单独工具的功能。
翻译自: https://www.digitalocean.com/community/tutorials/how-to-use-git-integration-in-visual-studio-code
6252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
