Git Graph插件可直观展示分支结构与提交关系:需先安装插件,再通过命令面板打开视图,配置仓库路径,自定义显示样式,并支持右键执行创建分支、比较提交、重置分支等操作。

如果您在使用 VSCode 进行版本控制时希望直观查看分支结构、提交关系与合并路径,但 Git 命令行输出难以快速把握整体拓扑,则可能是由于缺乏可视化工具支持。Git Graph 插件正是为此类需求设计的图形化扩展。以下是启用并高效使用该插件的具体步骤:
本文运行环境:MacBook Air,macOS Sequoia。
一、安装 Git Graph 插件
Git Graph 并非 VSCode 内置功能,需通过扩展市场手动安装,确保其核心绘图能力被正确加载到编辑器中。
1、打开 VSCode,点击左侧活动栏最下方的扩展图标(四个方块组成的图标)。
2、在扩展搜索框中输入 Git Graph,找到作者为 mhutchie 的官方插件。
3、点击“安装”按钮,等待状态变为“已安装”后,点击“重新加载”使插件生效。
二、打开 Git Graph 视图
插件安装完成后,需通过指定入口调用图形界面,而非依赖自动弹出,以保障用户对视图开启时机的完全控制。
1、按下 Cmd+Shift+P(macOS)或 Ctrl+Shift+P(Windows/Linux)打开命令面板。
2、输入 Git Graph: View Git Graph,回车执行。
3、右侧新标签页将显示带时间轴、颜色分支和节点连线的交互式 Git 历史图。
三、配置仓库路径识别
Git Graph 默认仅扫描当前工作区根目录下的 .git 文件夹;若项目含子模块或工作区未绑定主仓库,需显式指定路径以避免图谱为空。
1、点击右上角齿轮图标打开设置面板。
2、在“Git Graph: Repository Paths”选项中,点击“添加项”按钮。
3、输入完整绝对路径,例如 /Users/username/my-project/.git,确保路径末尾不含斜杠且指向真实 .git 目录。
四、自定义图形显示样式
默认视图可能因提交密度高而出现重叠或压缩,调整渲染参数可提升可读性,尤其适用于长期维护的多分支项目。
1、在 Git Graph 视图内右键空白区域,选择“Change View Configuration”。
2、勾选 Show Remote Branches 以同步显示 origin/main 等远端引用。
3、将 Commit Message Width 调整为 80 字符以上,防止长消息截断。
五、使用图形界面执行基础操作
Git Graph 不仅展示历史,还支持从图中直接触发常用 Git 动作,减少上下文切换,所有操作均在当前仓库上下文中即时生效。
1、右键某个提交节点,选择 Create New Branch,输入分支名后立即创建并检出。
2、按住 Cmd(macOS)或 Ctrl(Windows/Linux)点击两个提交节点,可高亮显示二者间差异文件列表。
3、右键某分支指针,选择 Reset Current Branch to Commit,在弹出的三种模式(soft/mixed/hard)中选择对应重置强度。










