0. 前言

在上一篇文章中，讲述了使用 webstorm 去调试 node 程序，最近研究了一下如何使用 webstorm 去操作 git。

对于 git 的使用，大家的使用方式均有不同，最王道的方式非命令行莫属，基于 git 的 GUI 软件还是很多的，大家可自行研究使用。之前使用 eclipse svn 插件去操作版本管理，还是很便捷的一件事情。而今用惯了 webstorm，当然里面也集成了对 svn 的支持，只是最近一直在用 git，所以想试着用 webstorm 中的 git 集成工具进行版本管理。当然之前都是以敲命令行的方式去做，达到一个熟练度，速度还是很可观的。通过这篇文章，主要讲述如何使用 webstorm 中的 git 工具进行更加快速高效的版本管理。

1. 先说 git 理论

webstorm 提供了 git 不少试图，下面列举其一：

image

我们在上面看到了 git 面板的很多选项，想要弄清楚各个选项具体要做什么，常用且常规的 git 理论知识及操作经验不可少。

我们先看对 git 操作的简单分类，如下——

• 远程仓库类：git clone/remote/pull/push/rebase/fetch
• 分支类（包括 tag）：git branch/tag/checkout/stash
• 信息查阅：git status/log/diff
• 本地常规操作：git add/commit/rm/merge/reset

这里仅仅是我个人的分类方式，每个人都对它有不同的分类，欢迎补充。

需要强调的是，你需要对上述命令关键词都做了什么事儿、应用于何场景，需要有清晰的把握，如果你不知，不放看看文章末尾的参考文章。多说一句，一定要结合工作区、暂存区、版本库的三者关系去理解。

结合上面给出的图片，我们可以看到，webstorm 中的 git 工具无非是这些命令行的可视化抽象，我们来看看怎么玩儿好它。

2. 使用 webstorm 中的 git

2.1 右键菜单

先来最熟知的右键操作，分为两类：文件夹（或者工程）右键和文件右键，先看看文件夹右键的效果——

image

再看看文件右键——

image

会发现两者的差异仅仅在于文件右键的视图多了一些 diff 操作（或者可以联想到 git diff 命令）。我们看看各个选项的含义——

Commit File...　　提交至本地版本库

Add　　添加进缓存区

Show Current Revision　　显示当前文件的最新版本信息，如下图——

image

Compare with the Same Repository Version　　与当前版本（的文件）做比较，可以理解为与最新版本比较，也就是可以比较本地工作区和本地版本库的差异（也记住，比较视图中，右侧永远是最新的那个版本内容）——

image

Compare with Latest Repository Version　　与上一版本（的文件）做比较，可以理解为当前版本与本地工作区所做的更改共同来与上一版本比较

Compare with...　　与任意历史版本（的文件）做比较

image

Compare with Branch...　　与任意分支（的文件）做比较，包括本地分支及远程分支

image

Show History　　展示关联本文件（或者文件夹中的所有文件）提交信息历史，我们可以看到，历史提交信息面板出现于下方 Version Control 面板中——

image

Show History for Selection　　对指定的代码块，显示历史版本信息

image

(连接第二个图)-------->>>>>>

image

Revert...　　还原代码，要注意与 reset 的区分，这里仅仅是将本地工作区的代码还原为本地仓库中的最新版本的代码

image

Repository >　　仓库二级导航选项，即相关仓库类的操作

要注意，有些操作是针对某单个文件操作的，每当操作某个文件夹时（或者某个工程时），会以选中的文件的集合为单位展开操作文件，并进行操作。

我们继续看看 Respository 的二级导航——

image

Branches　　显示左右分支，包括本地分支和远程分支

image

进而对各个分支能够进行更多的操作，如下图所示——

image

image

• checkout　　检出至本地工作区，此时本地已经检出过
• checkout as new local branch　　检出至本地工作区，并创建新分支
• compare 　　两个分支进行比较，比如，我想拿当前的 test 分支与本地的 master 分支进行比较，会看到——

image

会看到，会把各自提交的变更内容一一列表出来。要注意，这里不包含本地所进行的更改尚未提交到本地仓库的部分，即没有 commit 的部分。

• merge 　　进行合并操作，以比较版本合入当前版本中，merge 的过程当中，可能会有冲突（要记住，多人修改同一处代码时，才可出现冲突），稍候介绍怎么处理冲突
• delete 　　删除当前分支

OK，branches 面板介绍完毕，当然还可以在最右下角同样有 branches 面板操作入口，如下——

image

继续介绍，仓库二级导航——

image

Tag　　打tag

Merge Changes　　合并操作

Stash Changes　　stash操作，具体用法，你若不知，可以参考一下下面的文章

... ...

这里省略剩下的那些操作，关于 merge、stash、reset 的一些操作细节，需要先懂得这三个命令的相关参数的具体含义，再去操作就很好理解了。

OK，关于右键菜单就介绍到这儿了，可以看到它能做的事儿——

1. 非常方便的对对比文件或者文件夹的差异，试图直观明了
2. 方便做常规的add/commit/revert操作等
3. 方便操作版本库的相关管理，如fetch/merge/push/rebase等等

2.1 Version Control 面板

OK，接下来，介绍一下 Version Control 面板——

首先，来介绍对应 Local Changes

image

这里也就是工作区的更改与当前版本差异的 diff 文件列表，Unversioned Files 也就是代表没有加入到版本管理的文件列表，需要进行 add 操作，添加进缓存区中；Default 中的文件是代表版本管理中经过本地更改的文件，需要进行 add 和 commit 操作，将更改的文件添加入缓存区中并提交到本地版本库中。要知晓 git add 和 git commit 做了什么事儿

git add：暂存区的目录树被更新，同时工作区修改（或新增）的文件内容被写入到对象库中的一个新的对象中，而该对象的ID 被记录在暂存区的文件索引中。
git commit：暂存区的目录树写到版本库（对象库）中，对应的分支会做相应的更新。即HEAD指向的目录树就是提交时暂存区的目录树

可以对新增的文件进行 add 操作，如下——

image

Revert：同上述讲述，即还原本地变更

Move to Another Changelist：转入其他变更标记，分门别类，好管理

Show Diff：同上述讲述

Jump to Source：直接打开变更源文件

Ignore：加入.gitnore文件中

Create Patch：打变更补丁

Shelve Changes：与stash功能略相近，请参看后边文章

紧接着，我们最常用的操作就是 Commit Changes 了——

image

可以单独去 commit，当然也可以 commit 和 push 一起进行。

可以看出来，这里的 Local Changes 也就起到了 "git status" 命令的作用。

OK，继续介绍 log 面板——

image

选中相应分支，右键，我们看到——

image

我们看到，常规的选项，在上述中已提及过，在此就不在啰嗦，这里的 Cherry-Pick，指的是将选中版本变更的文件内容 merge 进当前工作区中，我们会看到，同样会出现冲突的情况——

image

当我们选中 merge 操作时，看到如下图——

image

虽然机器解决的冲突不是令人很满意，不过你可以再 merge result 面板中，直接去解决冲突，直接看到历史版本，比较直观。

解决冲突后，也就让需要再去做 add 和 commit 操作，至于怎么使用，在上述已提及。

image

接下来是 console 面板，它用于记录所有你通过 webstorm 中 git 操作的命令，如下——

image

看一看到，这里的命令行，也就是常规的我们熟知的命令行。

Version Control 面板介绍到这儿。可以看到，我们使用 Version Control 面板，我们可以做的事儿——

1. 可以随时看到本地变更的文件列表和内容，方便提交及还原 
2. 看到所有分支（自己与小伙伴儿的）动态，及对应的变更内容，方便对比文件，方便追查问题
3. 可以reset或者merge任意版本
4. 同样可以看到任意操作的命令行，利于学习git命令行

【转载链接】：https://www.cnblogs.com/jinguangguo/p/4868152.html

！！仅供学习，若有侵权，立刻删除