WebStorm 是一款非常强大的代码编辑器,然而其中一些技巧有待我们深入发掘,在这里我先写一篇 git 操作相关的使用技巧,希望能够向大家介绍,如何在 WebStorm 中熟练地使用 git?

下面我们将以图形化界面的方式,教会大家:

  1. git init 初始化(这一步要在命令行操作)
  2. git remotes 管理(增删改查)
  3. git clone 检出(约等于以上两步的合成)
  4. git fetch 拉取远端仓库更新
  5. git merge 合并分支
  6. git merge 解决冲突
  7. git add 追踪文件
  8. git commit 提交文件
  9. git push 推送文件

前置准备:这里我们以 coding.net 这个代码托管网站中演示:

那么,如何将项目同步到本地呢?这里我们提供两种方式:

  • 第一种思路是,创建一个全新项目后,对其 git init 初始化为 git 项目,然后设置远端仓库地址
  • 第二种思路是,直接 check out 检出 github 仓库到本地目录

方式一

在 WebStorm 中,创建一个项目:
create a project

在项目根目录下,执行如下 git 命令:

1
git init

git init
如果此时看到 WebStorm 中出现 Version Control 工具条,并且项目目录下出现 .git 文件夹,说明我们的项目已经成功初始化为 git 项目
git init successful
git init successful 2
这时我们还需要设置远端仓库地址
set remote url
这里通过图形化界面,对 remotes 进行查询、新增、修改、删除,而且可以设置多个 remote,相当直观 ^_^
git remotes
成功添加远端仓库地址
define a remote url successful
其实,对应的 git 命令是

1
2
3
4
5
6
7
8
9
// 添加
git remote add origin https://git.coding.net/dear_lizhihua/repository-demo.git
// 删除
git remote remove origin
// 修改 = 删除 + 添加
git remote remove origin
git remote add origin https://git.coding.net/dear_lizhihua/repository-demo.git
// 查询
git remote -v

方式二

git check out
注意,在文件夹下检出时,不能有同名的文件目录存在
git check out
其实,对应的 git 命令是

1
git clone https://git.coding.net/dear_lizhihua/repository-demo.git

拉取远端仓库更新

这里,我们将大家熟悉的 git pull,拆分为大家不熟悉的 git fetchgit merge 两个命令的合成,其实拆分后的操作,是比较安全稳妥的做法,具体原因我会在下面详细解释(还可以参考 git 少用 pull 多用 fetch 和 merge(git: fetch and merge, don’t pull) 一文),建议大家尽量通过这种方式

更新远端仓库的所有分支

这里我们解释下为什么不使用 git pull 这种奇怪操作的原因:

  1. 使用 git pull,会在更新完直接 merge。而在两个分支之间有多个文件冲突的情况下,会导致产生一堆待 merge 文件。
  2. 只使用 git fetch 更新远端仓库的所有分支,等于将这种冲突放在 git merge 这一步。这样我就可以等到真正需要的时候,再去解决分支下文件的冲突

前置准备:这里我们的远端仓库还是一个空的仓库,为了演示我们需要先在网站页面进行文件操作,以进行更新操作

前置准备开始
勾选启用 README.md 文件初始化仓库,点击快速初始化仓库按钮
create a readme
成功创建 README.md
create a readme successful
前置准备结束

先记住右下角的工具条中的分支
git fetch

然后,我们进行更新
git fetch

奇怪?远端的分支已经出现了,但是文件并没有更新,版本控制里面也没有任何提交记录
git fetch fail

以下这些步骤,只在项目初始化时用到
在第一次更新时,我们还需要将 checkout 到 origin/master 上,然后创建从 origin/master 分支处创建 master 分支
git checkout
git checkout as a new branch
git checkout as a new branch
至此,更新就算成功了

将远端分支,合并到本地分支

前置准备:这里为了演示,我们需要先在网站页面中执行远端分支更新

前置准备开始
点击新建文件,创建一个 .gitignore 文件
create a .gitignore
前置准备结束

然后,我们执行上一步的 git fetch
git fetch
更新成功后,执行 merge 操作
git merge
merge 完成,成功获取到远端仓库的文件
git merge successful

其实,对应的 git 命令是

1
2
git fetch origin
git merge origin/master

解决冲突 & 冲突时的说明

前置准备:这里我们以 webpack.js.org 中文仓库为例,translation 分支是英文文档分支,cn 分支是中文文档分支,二者都是从 master 分支中创建。

冲突产生的说明:我们首先应当了解,git 是基于文件差异、逐行对比。我们一般会在 cn 分支下进行翻译,然而有时我们会遇到这样一种情况,当 translation 分支和 cn 分支都对同一文件的相同行做了修改(这种场景非常常见,因为 translation 分支,同一文件很可能会增删改某一句、符号,而我们对这一句也做了翻译),此时将两个分支合并,就会发生行的冲突,这时就需要我们解决冲突。我们用以下一系列图片说明:

将 Local Branches 中的 translation 分支 合并到 cn 分支
git merge origin/translation
冲突文件的列表
conflict files
打开第一个文件,找到冲突的行(红色背景)
重要说明:中间部分是 未冲突时 cn 分支下,此文件所在的 git 节点;左侧是 cn 分支下,从 未冲突的 git 节点此文件最新的 git 节点 的所有 commit 改动;右侧是 en 分支下,从 未冲突的 git 节点此文件最新的 git 节点 的所有 commit 改动。
conflict line
重新翻译,将这行的两侧合并(红色背景自动消除)
resolve conflict line
右侧绿色背景的是 translation 分支新增的行,左侧蓝色背景是 cn 分支修改的行,我们通过 accept 将这些行整体合并过来(绿色背景和蓝色背景自动消除)。
resolve conflict line add and update
所有的新增、修改、删除全部处理后,出现提示
resolve all conflicts
第一个文件从列表中消失,接下来我们逐个合并这些文件
conflict files first removed
也可以通过 accept yoursaccept theirs 批量处理合并
batch processing
出现一个新的 git 节点
a new git node created
试着 push 一下,会发现提交记录为 Merge branch 'translation' into cn 的最后一个 git 节点,就是我们合并处理过的那些文件,这里我们暂时不推送到远端仓库的分支,选择 Cancel
git push merge branch
如果 merge 过程出现问题,不要过分担心,因为我们并没有产生真正推送,远端仓库的分支下暂时还没有我们的提交记录,我们先 git reset 重置到 origin/cn 分支的最后一个 git 节点上
git reset merge branch
选择 Hard 模式
git reset merge branch hard
其实,对应的 git 命令是(其中 部分是你希望重置的 git 节点 hash)

1
git reset --hard {{git_node_hash}}

git reset merge branch successful
重置成功了,我们可以将上面的合并步骤再重复一次

追踪(add)本地目录中的文件

前置准备:这里我们为了便于演示,先创建一个新文件 LICENCE
create a license

这个文件未被追踪时,是红色文字,我们点击 add 追踪它
git add license
其实,对应的 git 命令是(其中 部分是你希望重置的 git 节点 hash)

1
git add LICENCE

将本地目录提交(commit)到远端仓库

追踪成功后,点击 commit 提交它
git commit

填写 message 提交信息 add LICENSE,然后点击 Commit 按钮
git commit add message

提交成功
git commit successful
其实,对应的 git 命令是

1
git commit -m 'add LICENSE'

将本地目录推送(push)到远端仓库

点击 Push
git push

选择分支 Current Branch
git push select branch

push 的信息详细,点击 Push 按钮
git push detail

pushing…
git push processing

push 成功
git push successful

其实,对应的 git 命令是

1
git push origin master