VSCode 中的 Git Graph扩展使用详解

VSCode 中的 Git Graph 详解

1. 什么是 Git Graph?

Git Graph 是 VSCode 中的一款 Git 可视化扩展,它提供了一种 图形化方式 来查看 Git 提交历史、分支、合并记录等信息,使得 Git 版本管理更加直观和高效。

通过 Git Graph,你可以:

  • 可视化查看 Git 提交历史及分支结构
  • 轻松切换、创建、删除分支
  • 直接提交代码、推送到远程仓库
  • 解决合并冲突
  • 进行 cherry-pickrebase 等高级操作

2. 如何安装 Git Graph?

方法 1:通过 VSCode 扩展市场安装

  1. 打开 VSCode,按下 Ctrl + Shift + X 进入扩展市场。
  2. 在搜索框输入 Git Graph
  3. 选择 Git Graph 扩展(作者:mhutchie)。
  4. 点击 安装(Install)

方法 2:使用 VSCode 命令面板安装

  1. 按下 Ctrl + Shift + P 打开 命令面板
  2. 输入 Extensions: Install Extensions 并选择。
  3. 在搜索框输入 Git Graph 并安装。

3. Git Graph 的基本使用

3.1 打开 Git Graph

打开 Git Graph 方式有多种:

  • 在 VSCode 左侧 Git 图标 处,点击 Git Graph 按钮。
  • 使用命令面板 Ctrl + Shift + P,输入 Git Graph: View Git Graph 并选择。

Git Graph 打开后,会显示如下内容:

  • 分支结构 :直观展示 master/mainfeaturedevelop 等分支。
  • 提交历史:每次提交(commit)都会显示提交信息、提交哈希、作者、时间等。
  • 远程分支状态:标记哪些分支已推送到远程,哪些还未同步。

3.2 Git Graph 界面介绍

Git Graph 的界面包含以下部分:

部分 作用
提交历史 显示提交的时间、作者、commit ID、提交信息
分支结构 展示 Git 分支关系,如 masterfeature-x
提交操作 右键提交可执行 checkoutrevertcherry-pick
远程仓库状态 远程分支会显示 origin/main,本地未推送的提交会有标记

4. Git Graph 的常用操作

4.1 切换分支

  1. 在 Git Graph 界面中,找到你要切换的分支(例如 feature-x)。
  2. 右键点击分支 ,选择 "Checkout Branch"(签出分支)。

4.2 创建新分支

  1. 在 Git Graph 界面中,点击 "New Branch" 按钮。
  2. 输入新分支名称,例如 feature-new

4.3 合并分支

  1. 找到要合并的分支(例如 feature-x)。
  2. 右键该分支,选择 "Merge Into Current Branch"

4.4 解决冲突

如果合并时有冲突,Git Graph 会显示冲突标记:

  1. 打开冲突文件,VSCode 提供多种选项,如 Accept Current ChangeAccept Incoming Change 等。
  2. 解决冲突后提交。

4.5 回滚提交(Revert Commit)

  1. 在 Git Graph 里找到需要回滚的提交。
  2. 右键选择 "Revert Commit"

4.6 拾取提交(Cherry Pick)

  1. 在 Git Graph 里找到 feature-x 分支的提交。
  2. 右键选择 "Cherry Pick Commit"

4.7 推送 & 拉取

  • 推送本地分支到远程 :右键 feature-x,选择 "Push Branch"
  • 拉取远程更新 :右键 main,选择 "Pull"

4.8 删除分支

  • 删除本地分支 :右键 feature-x,选择 "Delete Branch"
  • 删除远程分支 :右键 feature-x,选择 "Delete Remote Branch"

5. Git Graph 进阶功能

5.1 Rebase(变基)

  1. 右键 feature-x,选择 "Rebase Onto..."
  2. 选择 main,然后进行变基。

5.2 查看 Tag(标签)

Git Graph 允许查看标签:

  1. 选择 "Show Tags" ,可以看到 v1.0.0v2.0.0 等标签。
  2. 右键标签可执行 Checkout Tag

6. 总结

Git Graph 功能 操作方式
查看提交历史 打开 Git Graph
切换分支 右键分支 → Checkout
创建分支 New Branch
合并分支 右键分支 → Merge
解决冲突 选 Accept Change
回滚提交 右键提交 → Revert
Cherry Pick 右键提交 → Cherry Pick
变基(Rebase) 右键 → Rebase Onto
推送远程分支 右键 → Push

7. 结语

Git Graph 让 Git 版本控制更加直观,可视化分支、提交历史、合并等操作,使 Git 更易用!🚀

相关推荐
还是鼠鼠7 分钟前
图书管理系统 Axios 源码__新增图书
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
还是鼠鼠3 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
花花鱼3 小时前
vscode script 中间的function import等关键字 先高亮,然后又灰了,并且按ctrl+/ 注释以html的形式,导致报错处理
ide·vscode·编辑器
恋猫de小郭5 小时前
Android Studio 正式版 10 周年回顾,承载 Androider 的峥嵘十年
android·ide·android studio
还是鼠鼠5 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
行十万里人生7 小时前
Qt事件处理:理解处理器、过滤器与事件系统
开发语言·git·qt·华为od·华为·华为云·harmonyos
浅陌sss9 小时前
PhotoShop中JSX编辑器安装
编辑器
夏尔Gaesar9 小时前
Vim安装与配置教程(解决软件包Vim没有安装可候选)
linux·编辑器·vim
会敲代码的Steve10 小时前
git笔记-简单入门
笔记·git