Web Git Graph
VS Code 里的只读 Git 历史图:确定性泳道、提交详情、stash、未提交改动行,
以及用原生 diff 编辑器打开的版本差异。
A read-only Git history graph for VS Code: deterministic swimlanes, commit
details, stashes, an uncommitted-changes row and native revision diffs.
中文
功能
- 提交图 —— 子提交在前、父提交在后的 DAG 布局,泳道稳定且确定,由
@web-git-graph/web
组件配合虚拟滚动渲染。展开某一行的提交详情时,泳道会从详情面板上方跨过去,
不会被截断。
- 提交详情 —— 提交信息、ref、文件树,并显示每个文件的增删行数。
- 原生 diff —— 点击变更文件会打开 VS Code 的 diff 编辑器,左右分别是该提交
父版本与该提交的文件内容。
- 搜索 —— 对提交信息、作者与哈希做高亮跳转匹配,不会破坏图的拓扑结构。
- 分支过滤 —— 可同时勾选任意多个分支、远程分支与标签,图会从这些 tip 的
并集开始遍历。
- 右键菜单 —— 右键提交可复制哈希、复制标题,或与已选中的提交进行比较。
- Stash 与工作区 —— stash 作为嫁接的 tip 出现;未提交的改动显示为一行
伪提交。
- 自动刷新 ——
HEAD、ref 或索引发生变化时自动重新加载,同时始终提供
手动刷新按钮。后台刷新会保留滚动位置和已展开的提交。
- 仓库发现 —— 列出每个工作区文件夹,以及其下嵌套的仓库。
- 柔和的加载过程 —— 面板启动时显示呼吸式渐变,展开提交时先显示骨架占位,
不会短暂闪出「无文件改动」。
使用方式
可以从以下任一入口打开:
- 状态栏的 Web Git Graph 项(工作区包含 Git 仓库时出现,可用
webGitGraph.showStatusBarItem 关闭);
- 源代码管理视图标题栏中的图标按钮;
- 命令面板中的 Web Git Graph: Open Graph 命令。
当工作区包含多个仓库时,图的上方会出现仓库选择器;只有一个仓库时它保持隐藏。
设置项
| 设置 |
默认值 |
作用 |
webGitGraph.maxDepthOfRepoSearch |
2 |
在每个工作区文件夹下向下搜索的目录层数 |
webGitGraph.columns |
date, author, commit |
图右侧显示哪些列 |
webGitGraph.date.format |
datetime |
datetime、date 或 relative |
webGitGraph.date.type |
committed |
显示提交日期还是创作日期 |
webGitGraph.fetchAvatars |
false |
从 Gravatar 加载作者头像 |
webGitGraph.showStatusBarItem |
true |
是否显示状态栏入口 |
只读设计
插件只在受信任的工作区文件夹内执行只读 Git 命令(rev-list、cat-file、
diff、show 等),不会修改仓库:没有 checkout、merge、rebase、reset、push
或 fetch。
运行要求
PATH 中可用的 git
- 受信任的本地(非虚拟)工作区
相关链接
English
Features
- Commit graph — child-before-parent DAG layout with stable, deterministic
lanes, rendered by the
@web-git-graph/web
component with virtual scrolling. Lanes run across an expanded commit's
details panel instead of stopping at it.
- Commit details — message, refs, file tree with per-file additions and
deletions.
- Native diffs — clicking a changed file opens VS Code's diff editor with
the file contents at the commit's parent and at the commit itself.
- Search — highlight-and-jump matching on message, author and hash without
collapsing the graph topology.
- Branch filtering — tick any number of branches, remotes and tags; the
graph is walked from the union of those tips.
- Context menu — right-click a commit to copy its hash or subject, or to
compare it with the selected commit.
- Stashes and working tree — stashes appear as grafted tips; uncommitted
changes appear as a pseudo commit.
- Auto refresh — the graph reloads when
HEAD, refs or the index change,
and a refresh button is always available. A background refresh keeps the
scroll position and the open commit.
- Repository discovery — every workspace folder plus repositories nested
below it are listed.
- Soft loading — the panel paints a breathing gradient while it starts, and
shows a placeholder where the file list will be instead of briefly claiming
"No file changes".
Usage
Open the graph from any of:
- the Web Git Graph status bar item (shown when the workspace contains a
Git repository; disable with
webGitGraph.showStatusBarItem),
- the graph button in the Source Control view title bar,
- the Web Git Graph: Open Graph command in the command palette.
When the workspace contains more than one repository, a repository picker
appears above the graph; with a single repository it stays hidden.
Settings
| Setting |
Default |
Purpose |
webGitGraph.maxDepthOfRepoSearch |
2 |
Directory levels searched below each workspace folder |
webGitGraph.columns |
date, author, commit |
Columns shown beside the graph |
webGitGraph.date.format |
datetime |
datetime, date or relative |
webGitGraph.date.type |
committed |
Show the committed or authored date |
webGitGraph.fetchAvatars |
false |
Load author avatars from Gravatar |
webGitGraph.showStatusBarItem |
true |
Show the status bar entry point |
Read-only by design
The extension executes only read-only Git commands (rev-list, cat-file,
diff, show, …) inside the trusted workspace folders. It never mutates a
repository: there is no checkout, merge, rebase, reset, push or fetch.
Requirements
git available on PATH
- A trusted, local (non-virtual) workspace
Links