VSCode 中的 Git Graph扩展使用详解

VSCode 中的 Git Graph 详解

1. 什么是 Git Graph?

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

通过 Git Graph,你可以:

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

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/main、feature、develop 等分支。
  • 提交历史:每次提交(commit)都会显示提交信息、提交哈希、作者、时间等。
  • 远程分支状态:标记哪些分支已推送到远程,哪些还未同步。

3.2 Git Graph 界面介绍

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

部分 作用
提交历史 显示提交的时间、作者、commit ID、提交信息
分支结构 展示 Git 分支关系,如 master、feature-x
提交操作 右键提交可执行 checkout、revert、cherry-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 Change、Accept 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.0、v2.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 更易用!🚀

相关推荐
usdoc文档预览1 天前
USDOC系列之PPT文件在线编辑-VUE前端实现在线浏览器在线编辑PPT文档
前端·vue.js·编辑器·office365·ppt在线编辑·office文件在线编辑·文件在线编辑
寂寞的船1 天前
【Unity知识速递】第4期 MCP for Unity:用 AI 自然语言控制编辑器
人工智能·unity·编辑器
寂寞的船1 天前
【Unity知识速递】第6期 URP性能优化完全指南:从内存到GPU的三维调优
unity·性能优化·编辑器
高调的涵涵1 天前
删了1.2GB,.git仍是1.2GB
git
程序员沉梦听雨1 天前
【Git】git-submodule子模块管理
git
浮尘笔记2 天前
JetBrains差异设置被自动勾选的排查与根治实录
经验分享·程序人生·编辑器·intellij idea·phpstorm·webstorm
Dream-Y.ocean2 天前
鸿蒙PC平台逻控 PLC 编辑器适配实战:基于 Electron 壳方案的纯 JavaScript 梯形图编程与仿真引擎开发
javascript·编辑器·harmonyos
全栈陈序员2 天前
Git】从入门到精通(八)—— git log:查看提交历史
大数据·git·elasticsearch
独隅2 天前
WebStorm macOS 安装部署与高效调优实战指南
ide·macos·webstorm
golang学习记2 天前
IDEA 2026.3 远程开发迎来重磅升级
java·ide·intellij-idea·远程开发