合理使用WebStorm-好用的Git工具(上)

简介: 合理使用WebStorm-好用的Git工具(上)

前言


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


Git管理面板


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


640.png

                              image-20210724172051880


打开后的界面如下所示:


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


640.png

                             image-20210724172729171


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

640.png

                                image-20210724180744707


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


常用的操作


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


创建分支


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


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


640.png

                              image-20210724201805387


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


640.png

                           image-20210724202217151


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


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


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


640.png

                                   image-20210724210234782


拉取分支


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

例如,我们想选中github_page分支:


640.png

                              image-20210724203856360


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


640.png

                                  image-20210724204040261


合并分支


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


640.png

                            image-20210724234453128


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


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


640.png

                                image-20210724234718134


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


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


640.png

                                          image-20210724235117407

相关文章
|
7月前
|
数据可视化 开发工具 C#
.NET开源、免费、跨平台的Git可视化管理工具
俗话说得好“工欲善其事,必先利其器”,合理的选择和使用可视化的管理工具可以降低技术入门和使用的门槛。今天大姚给大家分享一款.NET Avalonia开源、免费、跨平台、快速的Git可视化管理工具:SourceGit。
|
4月前
|
开发工具 数据安全/隐私保护 git
记录一次使用git工具拉取coding上代码密码账号错误的经历
这篇文章记录了作者在使用Git工具从Coding平台克隆项目时遇到的账号密码错误问题,并分享了通过清除电脑凭证中错误记录的账号密码来解决这个问题的方法。
记录一次使用git工具拉取coding上代码密码账号错误的经历
|
1月前
|
存储 开发工具 git
git工具使用教程全讲解
本文介绍了版本控制的概念及其重要性,详细对比了多种版本控制工具,如VSS、CVS、SVN和Git,重点讲解了Git的基本使用方法、工作原理及与SVN的区别。此外,文章还介绍了GitHub、GitLab和Gitee等流行的代码托管平台,以及如何在这些平台上注册账号、创建和管理仓库。最后,文章还提供了如何在IntelliJ IDEA中配置和使用Git的具体步骤。
61 1
|
2月前
|
开发工具 git
git显示开发日志+WinSW——将.exe文件注册为服务的一个工具+图床PicGo+kubeconfig 多个集群配置 如何切换
git显示开发日志+WinSW——将.exe文件注册为服务的一个工具+图床PicGo+kubeconfig 多个集群配置 如何切换
42 1
|
2月前
|
存储 开发工具 C#
Git Extensions:一个.NET开源的 Git 图形用户界面(GUI)工具
Git Extensions:一个.NET开源的 Git 图形用户界面(GUI)工具
145 0
|
3月前
|
SQL 缓存 测试技术
代码管理工具之GIT:重新温习一下
代码管理工具之GIT:重新温习一下
|
4月前
|
JavaScript IDE 前端开发
前端开发工具配置 nodejs & git & IDE
前端开发工具配置 nodejs & git & IDE
|
4月前
|
开发工具 git
成功解决:fatal: detected dubious ownership in repository at ‘E:/workspace/CSMarket‘。如何使用git工具通过命令行的形式
这篇文章分享了作者在使用Git工具初始化本地仓库时遇到的权限问题,提供了通过命令行解决Git仓库权限问题的方案,并介绍了如何使用Git命令行初始化项目、添加文件、提交以及关联远程仓库的步骤。
成功解决:fatal: detected dubious ownership in repository at ‘E:/workspace/CSMarket‘。如何使用git工具通过命令行的形式
|
5月前
|
开发工具 数据安全/隐私保护 git
为了方便项目打包,我用Node写了个git-tag工具
为了方便项目打包,我用Node写了个git-tag工具
99 0
|
7月前
|
前端开发 持续交付 开发工具
【专栏:工具与技巧篇】版本控制与Git在前端开发中的应用
【4月更文挑战第30天】Git是前端开发中的必备工具,它通过分布式版本控制管理代码历史,支持分支、合并、回滚等操作,促进团队协作和冲突解决。在前端项目中,Git用于代码追踪、代码审查、持续集成与部署,提升效率和质量。优化协作包括制定分支策略、编写清晰提交信息、定期合并清理分支及使用Git钩子和自动化工具。掌握Git能有效提升开发效率和代码质量。
109 2