集成的Git支持是Microsoft新的源代码编辑器 Visual Studio Code的最大功能之一。 Git是一个分布式的版本控制系统 ,它使您可以跟踪工作,在版本之间来回移动以及同时在不同分支上工作。 流行的Git存储库托管服务Github也使用它。
默认情况下 ,Visual Studio Code 支持Git ,这意味着您无需安装任何软件包或扩展程序即可使用它。 侧边栏包含一个单独的Git视图,您可以通过单击视图栏中的Git图标( 请参见VS Code的各部分 ),或单击Ctrl + Shift + G键绑定来快速打开。
安装Git
由于Visual Studio Code 使用计算机的Git安装 ,因此首先需要安装Git。 您可以从Git的官方网站上快速下载它。 您需要至少安装version 2.0.0
才能使VS Code的Git功能正常工作。
![安装Git](https://i-blog.csdnimg.cn/blog_migrate/8a24de108dacbf47a1e4d9ada672334e.png)
尽管Visual Studio Code允许您直观地管理Git ,但是如果您还想从命令行学习如何使用Git,则这里有一些有用的资源:
- Github的交互式Git教程
- Atlassian的Git教程 — Atlassian是Bitbucket源代码托管平台(类似于Github)背后的公司
- Atlassian的Git备忘单(PDF) -如果您已经使用过Git,但不记得一两个命令,这是最快的方法
- 完整的Pro Git手册
初始化您的存储库
如果Git尚未跟踪您的工作区,则首先需要初始化一个新的存储库 。 为此,请在Git视图中单击Initialize git仓库按钮。
![初始化Git](https://i-blog.csdnimg.cn/blog_migrate/8a0c474dd6aeb60678d9d71ce3fc33ef.png)
VS Code将在工作区中创建一个.git
文件夹 (您无法从VS Code中看到它,因为它是一个隐藏目录,但是您可以在项目的根文件夹中的文件管理器中找到它),并且将未跟踪的文件添加到侧边栏 。
![Git未跟踪文件](https://i-blog.csdnimg.cn/blog_migrate/e8fe8fee161547864a5f3dc779dc37f6.png)
阶段变更
设置完Git存储库之后,就该创建您的初始提交了 (提交是整个存储库的记录状态,您可以稍后再移至该状态)。 提交之前,您需要将要使用Git跟踪的文件添加到暂存区域 ,换句话说,您需要暂存 更改 。 单击悬停在每个文件旁边的+按钮以暂存它们。
单击要暂存的文件后,Visual Studio Code从“ Changes
文件夹移至“暂存的 Staged Changes
文件夹,这意味着它们现在位于暂存区域中 。 如果要一次暂存所有文件 ,则“ Changes
字幕旁边也会有一个+按钮(它出现在悬停时),然后单击它。
![Git分阶段变更](https://i-blog.csdnimg.cn/blog_migrate/8fe3d4c7d6d774c26453ed3c4d9003e2.png)
提交变更
分阶段的更改尚未记录,您还需要提交它们 ,以便稍后可以查看或移回存储库的当前状态 。 为了提交分阶段的更改,您需要添加一条提交消息 ,以描述自上一次提交以来所做的更改。
在我们的示例中,这将是初始提交,让我们使用引人注目的“初始提交”消息。 在侧边栏顶部的输入栏中输入提交消息,然后单击小勾图标 。 现在您已准备好第一次提交,就记录了存储库的初始状态。
![Git提交更改](https://i-blog.csdnimg.cn/blog_migrate/c9ed9cbb64cbeffb8d93105223b8086b.png)
您的Git工作目录是干净的,到目前为止您所做的所有更改都会被跟踪,并且您的Git视图显示有0个更改(它总是与您的上一次提交进行比较)。 如果您在工作区中进行了新更改,新更改将再次出现在侧边栏中,并且一旦它们达到了值得提交的数量,就需要再次提交它们 。
在下面的屏幕截图中,您可以看到提交后代码编辑器的外观如何。
![提交后的VS代码](https://i-blog.csdnimg.cn/blog_migrate/b1e19cc327a02678f96d444f53ea1f5d.png)
跟随变化
在继续进行工作时,如果不确定当前版本与上一次提交的比较情况,可以快速检查差异。 在Git视图中,只需双击要分析的文件 ,VS Code就会并排显示当前版本和先前版本,因此您可以快速进行比较 。
![吉特·迪夫](https://i-blog.csdnimg.cn/blog_migrate/6dacdad72956c9382ffb74291b4b20d8.png)
在谈论后续更改时,了解Visual Studio Code的装订线指示器也很重要,该指示器会注释与以前提交相比的更改,即使未打开并排视图。 VS Code使用3种装订线指示器 :
- 删除每行一个红色三角形
- 每行添加一个绿色条
- 每行修改都有一个蓝色条
![天沟指示器](https://i-blog.csdnimg.cn/blog_migrate/1905b18afb3123a887befd61eb7b0113.png)
创建分支
Git允许您同时在不同的分支上工作 。 这不仅有利于尝试新的解决方案,而且还可以极大地促进团队合作,使开发人员可以在不同的分支上工作(但是这不是必须的,因为他们也可以留在同一分支上)。
在Visual Studio Code中,您可以通过以下方法来创建新的分支:单击Ctrl + P (在Mac上为Cmd + P ),然后在输入栏中键入git branch
命令,以打开“快速打开”面板。 您还需要在命令末尾添加新分支的名称。
因为在我们的示例中,新分支的名称为test-branch
,所以我将使用git branch test-branch
命令,但是您可以使用任何其他名称。 在状态栏的左侧(屏幕底部的蓝色栏),您始终可以快速查看当前正在处理的分支。 在下面的屏幕截图中,您可以看到我当前在master
分支上。
![创建新分支](https://i-blog.csdnimg.cn/blog_migrate/a5096d29f412bc58f5a37bd623d07517.png)
结帐分支
要在分支之间切换,请在 “快速打开”面板中输入git checkout
( Ctrl + P / Cmd + P ),然后可以从可用的分支中进行选择。 在下面的屏幕截图中,您可以从状态栏中看到我当前在名为test
的分支上(我在test-branch
之后创建了它),如果我想移至其他分支,现在可以从master
菜单中进行选择。和test-branch
分支机构。
![Git结帐](https://i-blog.csdnimg.cn/blog_migrate/f452314cce22e4605c7228cf42667630.png)
从命令面板使用Git命令
您也可以从命令面板(在Windows和Linux上为F1 ,在Mac上为Shift + Cmd + P )访问Git命令。 您无需执行其他任何操作,只需在“命令面板”中键入命令Git
,您就会获得一个可用命令的下拉列表,您可以从中快速选择。
![Git命令面板](https://i-blog.csdnimg.cn/blog_migrate/2c5f89fab7a5344dfb25e75b8c5e7bc3.png)
高级Git操作
到目前为止,我们已经研究了如何在Visual Studio Code中使用基本的Git操作来跟踪我们的工作。 VS Studio Code也具有高级Git功能,例如管理远程存储库 , 合并冲突 ,甚至可以将VS Code配置为外部Git编辑器 。
![Git扩展](https://i-blog.csdnimg.cn/blog_migrate/11ff4ac6c07fed83395916274a216cbb.png)
我本人发现扩展Git History非常有用,因为它使得快速查看每个提交的细节以及并排比较任何两个先前的提交成为可能。 您也可以在我以前的文章中阅读Git History扩展,有关面向前端开发人员的VS Code扩展。
翻译自: https://www.hongkiat.com/blog/version-control-git-vs-code/