《前端工具系列》最好用的git可视化工具——SourceTree

写在前面

今天来聊聊git可视化工具SourceTree的使用，主要是因为git操作是我们在项目中频繁用到了，频繁用到就注定会遇到各种棘手小问题，比如代码的合并，冲突，版本回退等。敲命令时无论老手新手都小心翼翼，稍有不慎就会出错，在大型项目里如果代码版本控制出错的话，代价是很大的，可能这个月的奖金就没了。

当然现在很多用编辑器都自带git管理工具，如VSCode，IDEA等都集成了自己的git管理工具，不过就我个人的使用习惯和经历来说，这些编辑器自带的git管理工具并不如专业的git可视化工具好用，毕竟术业有专攻嘛。

git可视化工具是什么

我们安装git之后，想要对代码版本进行操作，必须通过Git Bash敲击命令行的方式来实现。但是敲击命令行的时候，我们并不能实时的看到我们的代码版本改变前后的变化，如果遇到强迫症的程序员，还必须再去线上的git仓库瞅一眼才放心。

另外，敲击命令行看起来简单方便，其实是很容易出错的，可能会敲错，可能会记错。有时候一个命令的错误，可能就需要一两个小时去弥补。

我们都知道Linux系统安装需要敲命令行，而Windows系统鼠标点击就可以。Windows就可以理解为是可视化的，当然现在Linux系统也有很多优秀的界面可视化工具。git可视化工具就像Linux系统的界面可视化工具，我们不必再敲命令行，直接在工具界面就可以对代码版本进行操作。

目前在大冰块看来，SourceTree是最好用，稳定，易操作的可视化工具。所以来今天我们介绍一下SourceTree。我会从安装到使用，把基本操作都详细的写一遍，并且录制对应的gif动图。

SourceTree的安装

首先我们打开官网地址，选择Windows或者Mac版本，点击下载==>勾选同意协议==>下载。如下图所示：

默认你已经安装了git，如果没有安装git，请先安装git。下载完成之后安装如下图： 下一步==>下一步==>下一步==>输入用户名和用户邮箱==>下一步==>加载SSH密钥？选择否。

大功告成！

安装成功界面如下：

SourceTree的使用

以最常用的功能

克隆项目

我们可以打开本地的仓库，也可以从远程拉取一个新的仓库。

以远程克隆为例：

当前项目克隆完毕如下：

拉取并切换至远端新分支

新建本地分支

本地新建分支推送至远端

切换本地分支

提交代码

两种方式：

合并其他分支到当前分支

解决冲突

版本回退

贮藏代码

贮藏代码的作用主要是：

贮藏和应用贮藏：

其它注意点

相信通过上面的学习，你一定能在项目中熟练使用SourceTree了，这个可视化工具还是很简单易学的。

写在后面

这是大冰块《前端工具系列》的第1篇文章，《前端工具系列》旨在对一些前端开发过程中经常使用到的工具及使用进行讲解说明，希望能帮助对前端工具刚接触或者还不熟练的小伙伴。同时欢迎大家点击其他系列文章一起讨论学习：

• 《看完就懂系列》答应我，看完就开始用Symbol好吗？
• 《看完就懂系列》谈谈数据埋点的原理与实现
• 《看完就懂系列》Ajax是不是凭一己之力造就了整个前端的生态圈？
• 《看完就懂系列》项目中的权限管理复杂吗？
• 《看完就懂系列》天哪！搞懂节流与防抖竟简单如斯~
• 《看完就懂系列》15个方法教你玩转字符串
• 《看完就懂系列》字符串截取方法substr() 、 slice() 和 substring()之间的区别和用法
• 《JS玩算法系列》海王的鱼塘