记录使用WebStorm开发项目中的Git操作

4,430 阅读11分钟

简介

本文章 适用于 基于 webstorm 编辑器开发的 Git 基本操作; 是个人总结;

操作环境

操作系统: windows 10
webstorm: 2021.1.2
Git: 2.32.0

Git工作流程

一般工作流程:

  • 克隆 Git 资源作为工作目录。
  • 在克隆的资源上添加或修改文件。
  • 如果其他人修改了。你可以更新资源。
  • 在提交前查看修改。
  • 提交修改。
  • 在修改完成后,如果发现错误,可以撤回提交并再次修改并提交。

Git 工作流程:

image.png

拉取克隆项目

Open Recent为空 image.png image.png

在打开其他项目中,去拉取克隆其他项目

image.png image.png image.png

创建新分支

以 develop 分支为基础,创建分支并切换

image.png image.png image.png

工作区、暂存区和版本库

  • 工作区: 就是你在电脑里能看到的目录(电脑磁盘上的目录文件)。
  • 暂存区: 英文叫stage或者index。一般存放在.git目录下的index文件(.git/index)中,所以我们把暂存区有时也叫作索引(index)。
  • 版本库: 工作区有一个隐藏目录.git,这个不算工作区,而是Git的版本库。

下面这个图展示了工作区、版本库中的暂存区和版本库之间的关系:

image.png

image.png

webstorm编辑器--缓存失效;(File --> Invalidate Caches...):

一般用于无法实时刷新项目文件或者目录变化的情况;
初始化重置缓存,如果Optional:如果勾选了Clear file system cache and Local History;那么本地操作记录将会丢失(意味着Local History is empty 文件变动的记录将会丢失); image.png image.png image.png


webstorm 的 Local History 功能:

Local History 是webstorm编辑器记录着文件变动操作的相关日志;是编辑器提供的强大功能
和 Git操作可以配合起来,相辅相成,相得益彰,双剑合璧,天下无敌。

Local History(又称本地记录)中Show History作用:

  • 可以方便的观察记录 文件夹 或者 文件的变动记录; image.png
  • 能对文件变动进行查看对比,甚至可以把文件revert恢复还原到某个时间或者找回文件; 将文件还原恢复到某个时间: image.png 或: image.png

Local History 的 Put Label 作用:

用于给本地代码打标签实现代码保存及回滚功能。 image.png image.png 打完 Label后,一顿操作增加了很多代码, image.png 查看 文件的 Put Label Name: image.png

webstorm 的 Git 相关操作:

git add操作;(在 webstorm 中 Git --> Add...):

  • 未加入版本库(暂存区):

新增文件未加入版本库(暂存区):新增文件没有add到版本库 名颜色显示显示为红色 image.png

  • 新增文件加入版本库(暂存区):

创建文件完成时,webstorm会提示你是否需要加入版本库(暂存区),如果cancel取消的话,后面就需要手动加入版本库(暂存区) image.png 新增文件取消加入版本库后,手动加入: image.png

新增文件加入版本库(暂存区):add加入到版本库暂存区后文件没有commit显示为蓝色 image.png

新增文件未加入到版本库,如果删除了该如何找回?

若删除了没有加入版本库的文件,回收站中没有该文件 且编辑器没有缓存失效Local History 情况;
可以通过 Local History方式找回文件
例如:如果在css/main.css被删除了,右击css文件夹通过 Local History本地历史记录找回文件 image.png image.png image.png 或: image.png

加入了版本库的文件被删除了,如何找回?

如果知道在哪个文件下的文件被删除了就右击,如果不知道,就在项目上右击;
通过 Git --> Rollback 操作 image.png image.png 注意:如果本地其他文件中的代码有改动的同时,其他文件被删除了,Rollback的时候要选择变灰的文件(不存在工作区的文件),如果连其他代码变动的文件选择了,那么那个代码变动的文件将被还原成远程版本库中的代码(当然也可以通过Local History操作进行找回。) image.png

通过git add新加入暂存区的文件如何删除?

通过 Rollback 来恢复 已经add, 但是未commit的文件,并保留文件内容;

场景过程: image.png image.png image.png image.png image.png image.png

git stash 操作;(在 webstorm 中 Git --> Stash Changes...):

  • Stash操作的前提:文件必须加入(git add)到版本库中控制才行;
  • Stash的意思:隐藏或藏匿;隐藏当前的工作现场;
  • 作用:主要用于保存当前工作中未提交的修改;就是将还不想提交但是已经修改的内容进行保存至堆栈中,后续可以在某个分支上恢复堆栈中的内容;
  • 这就意味着:stash中的内容不仅仅可以恢复到原先开发的分支,也可以恢复到其他任意指定的分支上;
  • git stash作用的范围包括工作区和暂存区中的内容,也就是说没有提交的内容都会保存到堆栈中;

image.png

git unstash 操作;(在 webstorm 中 Git --> Unstash Changes...):

Unstash Changes...: 恢复被 stash(隐藏)的文件; image.png image.png

git stash 和 unstash 结合的使用场景:

场景:在实际项目开发中,我在 develop 分支开发功能,突然来了个紧急的bug或功能需要切换到 release分支进行修改;但是我的develop分支的功能没写完,没法 commit;怎么办?怎么办?怎么办?
如果不处理,直接切换分支,有以下可能:
1.如果和即将要切换的分支没有冲突,那么没有提交的代码会被带入 release分支,没有写完的代码 和 远程中代码 会混合在一起,
2.如果和即将要切换的分支有冲突:会跳出选择,强制切换 和 智能切换 以及 不切换; image.png 怎么办?怎么办?怎么办?

模拟过程以及解决方式:
假如:在develop分支中新增了这段代码(develop中未完成的功能开发): image.png 把这个文件 stash(隐匿)起来 image.png 或:在项目根目录上右击 image.png image.png image.png image.png 切换分支到 release 分支 image.png image.png 修改好bug后,在release分支,git commit and push后:
切回 develop 分支; image.png 取回 stash(隐藏) 的代码;在项目目录上右键 --> Git --> Unstash changes... image.png image.png image.png

(Stash Changes...) 和 (Unstash Changes...) 使用注意:

  • Stash Changes...: Stash Changes后,在编辑器 Local Changes 中,该文件的变化将会被隐藏了; image.png image.png image.png

  • 如果在 stash 的(被隐藏的文件)中修改,然后再 Unstash(取回文件),就会 failed(失败冲突);
    解决方法:先把冲突的文件revert恢复。然后 Unstash,然后通过 Local History 查看文件变动。 image.png image.png image.png image.png

  • 在 develop 分支 Stash Changes... 后,切换到 release 分支 Unstash Changes... 理论上stash的内容和别的分支内容不冲突,可以切换到任何其他分支进行取回。

git commit, git push 相关操作:

git commit后, 但是未 push 的,其他开发人员是看不到Git log记录的;
commit之后分支会有个绿色的点代表改动被commit已提交,但是未push, 查看该次commit可以看到相关信息; image.png image.png image.png image.png image.png 在 macky (麦基)的电脑上看的记录: image.png

webstorm 中commit描述信息规范:

统一提交信息规范,能极大的方便版本管理,项目管理和定位追踪问题; 配合 Git Husky 使用进一步规范提交;

推荐使用 Git Commit Template 插件 来规范提交描述信息: image.png 提交时: image.png image.png image.png image.png

Edit Commit Message...(修改commit的描述信息):

image.png image.png

git commit 合并多个commit

为了避免零散的commit生成的push记录,造成记录混乱后续难以查找挑选等问题;规范或者现在push记录;

把多次commit合并为一个push记录: image.png 按住 ctrl + 鼠标左键,连续选择两条 commit 记录; image.png image.png image.png

取消,撤回 Commit操作:

Undo Commit, Revert Commit, Drop Commit区别?适用情况?
对 某次 commit 进行 取消 撤回:

image.png

  • Undo Commit(撤销撤回 commit 操作):
    Undo Commit 撤销 commit记录后, Log中的Commit记录消失,文件变动在 Local Changes中查看:

适用情况:代码修改完了,已经commit了。但是还未 push, 然后发现还有其他地方需要修改,但是又不想增加一个新的commit记录。这时可以进行 Undo Commit,然后重新 Commit.

对已commit,但是未push,使用 Undo Commit 操作: image.png

注意:ChangeList的选择: image.png ChangeList的Name的选择建议:
1.如果你撤回后还是在当前的被撤回的文件中修改的话,Default ChangeList和 new的Name都可以。
2.如果你撤回后,需要修改其他文件,建议 Name 设置为 Default ChangeList。
以上都是废话,建议都放在 Default ChangeList 或者在 Commit的之前删除其他的 ChangeList。
情景:撤回了commit,其他文件也要修改,你选择了new一个Name,那么在Commit的时候默认是Default ChangeList:

image.png image.png image.png image.png

拓展知识:设置其他的 Set active Changelistimage.png image.png image.png

对已commit,已push的记录,使用Undo Commit操作:
结果:commit记录不会被删除,本地中文件内容还在 image.png image.png 通过Local Changes --> Default ChangesList 查看文件变动 进行 Revert后,将分支 push 到远程进行 Merge; image.png push下: image.png image.png push或者Merge的时候有时候会报错: fatal: unable to access 'https://gitee.com/xxx/xxx-xxx.git/': Could not resolve host: gitee.com 重新设置 user.name, 或者 remote 或者权限问题;

  • Revert Commit(恢复还原 commit 操作):
    结果:
    1. 之前的commit记录不会被清除,
    2. 同时会产生一条新的 Revert Commit记录,
    3. 同时本地中xxx Commit 中代码修改全部恢复还原;
    image.png image.png image.png Revert Commit 代码被恢复,但是会产生一条commit记录,需要 push 下: image.png Revert Commit 后, 需要 push 下: image.png 中止 Abort Revert 后,就能恢复成 commit 后的未 push 样子image.png commit 后未 push,继续修改,然后再 Revert Commit 会报错: image.png

对已commit,已push的记录,使用 Revert Commit 操作:
结果:
1. 之前的commit记录不会被清除,
2. 同时会产生一条新的 Revert Commit记录,
3. 同时本地中和commit相关的代码会被清除掉;
image.png image.png image.png 代码push到远程origin 即可修改;

  • Drop Commit(剔除放弃 commit 操作):
    ** 慎用!!!慎用!!!慎用!!! **
    对已commit,但是未push,使用 Drop Commit 操作:
    会删除 commit 记录,同时 xxx commit中的代码进行修改的也会被全部清除; image.png Drop Commit 后,本地文件内容被剔除了,同时commit记录也会被剔除; image.png

对已commit,已push,使用 Drop Commit 操作:
结果:commit记录不会被删除;但是本地代码中和该commit相关的代码会被剔除; image.png image.png image.png image.png image.png image.png 当前分支xx的推送被拒绝。在推送之前需要合并远程更改?将当前分支push到远程 强制更新远程

Cherry-Pick使用:

选择指定的提交记录合并到当前分支;

场景1:开发人员macky 在 develop(月度开发分支) 上改了个 bug; 开发人员evan 想同步一下这个修改,可以使用 Cherry-Pick功能; image.png image.png 然后push下代码即可;

分支切换(合并,还原,回滚)等问题:

场景1: 开发人员A 把 未提测的代码合并到 release(预生产) 分支了?现在要在release分支剔除开发人员A的合并内容?

把代码合并到了 release(预生产) 分支? image.png 通过 Revert Selected Changes... 把变更 Revert: image.png image.pngLocal Chaneges中可以看到我们 Revert 了哪些代码!! image.png 然后重新 commit and push: image.png

重置指定分支到某个commit记录时刻( Reset Current Branch to Here 操作):

( Reset Current Branch to Here 操作):

image.png 注意:模式的区别和选择: image.png 选择的简单介绍:
Soft: 又称 软合并, 文件不会更改,差异将被暂存(在Local Changes中)以待提交
结果表现为:恢复到指定记录,但是代码不会变化,但是在 Local Changes中记录(保存)了差异image.png 查看Local Changes 中文件的 Revert,可以恢复成 指定记录时候的样子;

Mixed: 混合模式,文件不会改变,差异不会被分级暂存。 image.png 在 upate代码的时候可能会发生代码重复问题;

Hard: 又称 硬合并文件将被恢复到所选提交的状态。任何本地更改将丢失。 结果表现为:文件被强制恢复到所选提交时候的状态,而且本地更改都丢失; image.png

Keep: 保持;文件将恢复到所选提交的状态,但本地更改将保持不变。; image.png 如果使用 kepp 模式失败后,只能 Hard Reset了。
注意: Reset 之后要使用 Fore Push 进行强推分支到远程。不然update project的时候又恢复了。

checkout分支到指定版本:

使用命令 可以切换到指定版本;

    git checkout xxx(版本号)

你必须非常努力,才能看起来毫不费力!