合理使用WebStorm-好用的Git工具

前言

webstorm中集成了世界上最好用的git管理工具，它可以大大提升我们的工作效率，本文就跟大家分享下工作中几个常用操作，欢迎各位感兴趣的开发者阅读本文。

Git管理面板

我们通过webstorm左下角的Git来打开这套集成工具。

image-20210724172051880

打开后的界面如下所示：

• Local Changes 展示你当前已修改但未提交的文件
• Log: master 你当前所在的分支
  • 选中一个提交记录，最右侧会展示当前提交记录所修改的文件
  • Local 本地的分支列表
  • Remote 远程仓库的分支列表
  • 左侧区域展示的是所有分支列表
  • 右侧区域展示的是当前选中分支的提交记录

image-20210724172729171

如果你看不到左下角的Git，可能是因为你隐藏了Tool Window Bars，在菜单栏View -Appearance - Tool Window Bars将其勾选即可。

image-20210724180744707

如果你对webstorm不是很熟悉，请移步我的另一篇文章：合理使用WebStorm-环境配置篇。

常用的操作

接下来跟大家分享下，工作中一些常用的git操作，如何在这套内置工具上实现。

创建分支

当项目需求明确后，我们要做的第一件事就是创建一个新分支来做这个需求，在这套内置git工具中，我们只需在我们需要基于的分支上右键选择New Branch from Selected...即可。

例如：我们想基于master分支创建一个新的分支

image-20210724201805387

在弹出框中输入新的分支名，点CREATE即可，如下图所示，我们给新分支起名为AddMenu

image-20210724202217151

按照上述步骤操作即可完成一个新分支的创建。

注意：在弹出框中默认是创建并选中当前创建的分支的，如果你只想创建不想选中，取消弹出框里面的Checkout branch选中即可。

创建完车后，我们可能还需要将这个分支推到远程仓库，我们在创建好的分支上右键选择Push...即可。

image-20210724210234782

拉取分支

当我们想选中同事的分支，帮同事改bug时，则需要将这个分支拉到本地，在这套内置git工具中我们只需在Remote中找到这个分支，右键选择Checkout即可。

例如，我们想选中github_page分支：

image-20210724203856360

选择后，你会看到如下图所示的提示。

image-20210724204040261

合并分支

当我们将需求开发完成，测试通过后，就需要将分支合并到dev去了，在这套内置工具中，我们只需要切换分支到dev，然后再需要合并的分支上右键选择Merge into Current即可。

image-20210724234453128

如果有冲突的文件，则需要解决下冲突，如下所示：

• 选中一个冲突的文件
  • 序号1标注 使用当前所在分支(dev)的文件
  • 序号2标注 使用合并分支的文件
  • 序号3标注 比对两个版本的文件差异，解决冲突

image-20210724234718134

如果你选择了序号3标注的按钮，将看到如下所示的界面：

• 左侧为dev分支的代码，中间为最终结果区域，右侧为合并分支的代码
• 序号1、2、3标注的地方为应用此处更改到最终结果区域
• X的意思是舍弃此处的更改

image-20210724235117407

删除分支

当我们将某个分支合并到dev后，此时这个分支就不需要了，需要将其删除。

在webstorm中，我们只需在远程分支列表中找到这个分支，右键选择Delete即可

image-20210725003634683

提交代码

当我们修复了一个bug，或者完成了一个模块的开发时，需要将代码提交到本地，然后再推送远程仓库，在webstorm中只需要点击Toolbar中的commit图标和push图标即可。

如下所示：

image-20210725000121578

在弹出的窗口中，填写提交信息即可。

image-20210725000233787

提交完成后，点击推送按钮即可将本次提交推送到远程仓库。

image-20210725000436434

在弹出的窗口中点push即可。

image-20210725000529092

注意：如果你看不到Toolbar，则需要在菜单栏: view - Appearance - ToolBar将其开启。 除此之外，你还可以在菜单栏的Git子菜单中去提交/推送，或者按快捷键command K / command shift K。

拉取代码

当需要获取某个分支上同事修改的最新代码时，此时就需要进行pull操作，我们只需在webstorm菜单栏的git子菜单下选择pull即可。

image-20210725001609640

暂存与取出

当我们在某个分支上开发需求时，突然来一个加急需求需要你在别的分支改，此时你的更改又不适宜提交，那么就需要将当前更改暂存起来。

我们只需在项目树上右键，选择Git - Stash Changes...即可将更改暂存，如下图所示：

image-20210725002140382

在弹出的窗口中填写保存信息。

image-20210725002254573

紧急任务开发完成后，我们切回分支，在项目根目录右键，选择Git - Unstash Change...即可。

image-20210725002450616

版本回退

当我们提交了代码后，测试那边测出了很多问题，此时我们就会觉得本次提交无意义，需要将其撤销。

我们只需在Git面板中，选中要回退的git版本，右键选择Reset Current Branch to Here...即可

image-20210725002931454

在弹出的菜单中选择Mixed选项即可。

image-20210725003002381

注意：如果你的提交已经推到了远程仓库，你想删除远程仓库的记录，在本地回退后还需要在终端执行git push --force命令进行强推。 强推是危险命令，如果你回退的版本之后还有别的同事提交的代码，那么此命令将会删除别的同事提交的代码。

合并部分提交记录

当我们需要将某个分支的部分提交合并到dev分支时，我们需要用到git cherry-pick命令。

在webstorm中，我们只需切换分支到dev，然后在Git面板中选中需要合并提交的分支，选择需要合并的记录，点击樱桃图标即可完成合并。

如下所示，我们需要将AddMenu分支的两个提交合并到dev分支：

image-20210725004742222

最后，我们切换到dev分支即可看到合并过来的两个提交，如下所示：

image-20210725004916220