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

这是大冰块2021年第9篇原创文章，和大冰块一起在前端领域努力吧！！！

---

写在前面

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

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

git可视化工具是什么

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

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

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

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

SourceTree的安装

SourceTree是由Atlassian开发的免费的Git可视化工具，它稳定易操作，可以连接任何Git库。

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

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

大功告成！

安装成功界面如下：

SourceTree的使用

以最常用的功能

克隆项目

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

以远程克隆为例：

当前项目克隆完毕如下：

拉取并切换至远端新分支

展开“远程”，右键“origin”，点击“从origin获取”，展开“origin”，双击对应分支，“检出新分支”确定即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Skom4BuI-1610855372211)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a453bf5224ea4ad5bbcce78637f45625~tplv-k3u1fbpfcp-watermark.image)]

新建本地分支

点击分支==>输入新分支名字==>创建分支，创建完成后会自动切换至这个新分支。

本地新建分支推送至远端

新建本地分支之后==>右键当前新建分支==>推送到==>origin==>推送

切换本地分支

双击要切换的分支，即可切换至对应分支。

提交代码

两种方式：

1，暂存所有或暂存所选==>填写提交说明==>提交==>推送至指定分支

2，暂存所有或暂存所选==>填写提交说明==>勾选“立即推送变更到XXXX”==>提交

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ju5NLxQb-1610855372217)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71354595e71d42fbaf3cf71e7d2411ff~tplv-k3u1fbpfcp-watermark.image)]

合并其他分支到当前分支

比如要合并xiaoMing分支到bigIce分支，首先切换到bigIce分支==>右键xiaoMing分支==>选择“合并xiaoMing至当前分支”==>确定

解决冲突

对有冲突的文件，SourceTree可以在文件状态里右键对应的文件，可选择以当前版本解决冲突，或者以传入版本解决冲突。

但是我们一般是在编辑器里解决，这样解决完冲突比较方便验证一下代码是否有错误。如果解决完毕没有错误，在产生冲突的对应文件右键==>标记为已解决即可。

版本回退

在History右键某次提交记录==>重置当前分支至此次提交==>确定。

贮藏代码

贮藏代码的作用主要是：

1，拉取代码前避免因冲突不能拉取。

2，当前代码暂时不需要，但是以后可能会用到。

如果同事小明在文件A新增了一段代码并上传，那么此时我们获取并拉取代码后，就会显示当前代码与拉取的代码有冲突，从而不能拉取。此时需要先将代码贮藏。

贮藏完毕后再拉取代码，拉取完代码右键对应的贮藏，应用当前贮藏，然后解决冲突即可。

贮藏只会贮藏在git管理中存在的文件，新增的文件不会被贮藏。

贮藏和应用贮藏：

贮藏 菜单栏贮藏==>输入贮藏描述==>确定
应用贮藏 侧边栏贮藏==>应用贮藏区XXXX==>确定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fUOXm4TB-1610855372222)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2512d1815395491aa556d5da3f0f7789~tplv-k3u1fbpfcp-watermark.image)]

其它注意点

要按照获取==>拉取==>提交==>推送的步骤来操作，如果没有获取拉取，直接提交推送很可能会由于同事在你之前推送了同文件的代码，产生报错，从而推送失败。

如果并没有冲突，我们需要重新走一遍获取==>拉取==>提交==>推送的步骤即可。

如果有冲突，解决完冲突再走一遍获取==>拉取==>提交==>推送的步骤即可。

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

写在后面

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

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

原创不易，如有错误，欢迎指正。

如果有帮助到你，请给大冰块悄悄点赞关注，你的点赞关注就是我写下去的动力。

让我们一起在前端的路上进步吧~