GitBoard — Git 可视化提交图以 SourceTree 风格的图形化提交历史浏览与操作 Git 仓库 Installation Launch VS Code Quick Open ( Ctrl+P), paste the following command, and press enter.Copied to clipboard |
GitBoard — Git 可视化提交图 / Git Commit Graph for VS Code简体中文 | English GitBoard 是一个 VS Code 桌面版插件，以 SourceTree 风格的图形化提交历史为核心，浏览与操作 Git 仓库：彩色拓扑提交图、提交详情与差异对比、以及 Fetch / Pull / Push / 重置 / 切换分支等日常 GUI 操作。针对大仓库做了分页加载、虚拟滚动与分层渲染优化。 GitBoard is a VS Code extension (desktop) that visualizes and operates Git repositories with a SourceTree-style commit graph: colored topology, commit details & diffs, plus everyday GUI operations (Fetch / Pull / Push / Reset / Checkout). Built for large repos with paging, virtualized scrolling and layered rendering.
中文文档功能特性
安装方式〇：扩展市场（发布后可用） 扩展面板（Ctrl+Shift+X）搜索 GitBoard 安装（ID： 方式一：命令行安装 vsix（推荐） 安装后执行 Ctrl+Shift+P → “开发者：重新加载窗口”（每次覆盖安装新版本后都需要）。 方式二：VS Code 界面安装 扩展面板（Ctrl+Shift+X）→ 右上角 方式三：从源码构建 快速上手
功能使用详解1. 界面布局对照上方总览图的编号：① 工具栏（Fetch/Pull/Push/刷新/设置/版本号 + 筛选控件）；② 左侧栏（仓库、本地分支含 2. 浏览提交图
3. 查看提交详情与差异
4. Git 操作
5. 筛选
工具栏提供三组可叠加的筛选：分支下拉（或单击侧栏分支/远程/标签节点）、作者输入框（支持 git 正则语法，输入后自动应用）、起止日期选择器（截止日期含当天全天）。有筛选时显示 × 一键清除；筛选无结果时空态会明确提示。条件按仓库分别记忆。 6. 个性化
快捷键
常用设置（
|
| 设置 | 默认 | 说明 |
|---|---|---|
gitboard.gitPath |
自动检测 | git 可执行文件路径 |
gitboard.commitPageSize |
500 | 每页加载提交数（100–5000） |
gitboard.maxAutoLoad |
20000 | 自动加载上限 |
gitboard.defaultPullStrategy |
merge | pull 策略：merge / rebase / ff-only |
gitboard.dateFormat |
datetime | 时间格式：YYYY-MM-DD HH:mm:ss / 相对时间 / ISO |
gitboard.rowHeight |
default | 行高：紧凑 20 / 标准 24 / 舒适 28 |
gitboard.graphStyle |
curved | 走线风格：短半径圆角 / 直角折线 |
gitboard.detailPanelPosition |
bottom | 详情面板位置：底部 / 右侧 |
gitboard.language |
auto | 界面语言 |
gitboard.fetchOnOpen |
true | 打开视图时自动 fetch |
从源码开发
npm install
npm run watch # F5 调试（“运行 GitBoard 扩展”）
npm run typecheck # 双工程类型检查
npm test # 单元测试 + 真实 git 冒烟（GITBOARD_SMOKE=1 启用）
npm run build && npm run package
常见问题
- 安装新版本后行为没变化？ 务必执行“开发者：重新加载窗口”；可对照工具栏右侧版本号确认当前构建。
- 支持 vscode.dev / github.dev 吗？ 不支持，插件需要在本机执行 git 命令。
- 超大仓库卡吗？ 分页 + 虚拟滚动保证流畅；可运行
git commit-graph write --reachable进一步加速翻页。
English Documentation
简体中文 | English
GitBoard brings a SourceTree-style commit graph to VS Code (desktop): browse history with a colored topology, inspect commits and diffs, and run everyday Git operations from the GUI.
Features
| Feature | Description |
|---|---|
| Commit graph | Colored topology with branches, merges, criss-cross and multi-root repos; HEAD / branch / remote / tag chips |
| Commit details | Full SHA (one-click copy), author/committer, full message, changed files with status and ± line counts |
| Diffs | Inline diff (compact mode shows changed lines only, ⋯ folds unchanged runs) + the built-in diff editor with syntax highlighting |
| File actions | Open working file, open any revision read-only, reveal in the system file manager (falls back to the parent folder for deleted files), copy path |
| Git operations | Fetch (--all --prune), Pull (merge/rebase/ff-only), Push (with upstream setup), Reset to commit (soft/mixed/hard), checkout branches, checkout remote branch as local tracking, detached HEAD |
| Filtering | Branch/remote/tag filter + author + date range, stackable and remembered per repository |
| Large-repo performance | Paged loading, virtualized rows + viewport-only canvas rendering, debounced auto-refresh on .git changes |
| UI | Follows VS Code light/dark themes, drag-resizable persisted columns, English/中文, status-bar branch |
Install
Option 0 — Marketplace (once published)
Search GitBoard in the Extensions view (Ctrl+Shift+X), ID: EmonZhang3438.gitboard, or:
code --install-extension EmonZhang3438.gitboard
Option 1 — CLI (recommended)
code --install-extension gitboard-0.6.0.vsix
Then run Ctrl+Shift+P → “Developer: Reload Window” (required after every upgrade).
Option 2 — From the UI
Extensions view (Ctrl+Shift+X) → ··· → “Install from VSIX…” → pick the file → reload.
Option 3 — From source
npm install && npm run package
Quick Start
- Open a folder/workspace containing Git repositories;
- Click the GitBoard icon in the Activity Bar (or press
Ctrl+Alt+G, or runGitBoard: Open Commit Graph); - Click a commit row for details, double-click a file to open the diff editor, right-click everywhere for more actions.
Using the Features
Layout — see the numbered badges in the overview: ① toolbar & filters, ② branch/remote/tag tree, ③ commit graph, ④ commit summary, ⑤ changed files, ⑥ inline diff. The detail panel is drag-resizable and collapsible.
Browsing — solid dots are commits, merged commits carry a ring, the HEAD node has a red outline. Chips: green = local branch, purple = remote, yellow = tag, HEAD → main = current branch. Scrolling near the bottom auto-loads the next page (500/page by default; auto-load caps at 20,000 with a manual “Load more” button). ↑/↓ move the selection.
Details & diffs — click a row to load the full SHA, author/committer, dates (YYYY-MM-DD HH:mm:ss by default) and the complete message. Click a file to preview its diff inline — compact mode highlights only added/removed lines and folds unchanged runs into ⋯ rows; switch to “With context” for full context. Double-click a file (or use the header button) to open VS Code’s built-in diff editor (parent revision ↔ commit). Merge commits are diffed against their first parent.
Operations — ① commit-row context menu (detached checkout, reset, copy SHA/subject); ② file context menu (open working file, read-only revision, reveal in file manager, copy path); ③ branch menu (checkout/pull/push/copy; double-click a branch to check it out, single-click to filter the graph; double-click a remote branch to create a local tracking branch); ④ the reset dialog — hard resets require an explicit red confirmation when uncommitted changes exist. Fetch/Pull/Push show live progress and can be cancelled.
Filtering — branch dropdown (or click a tree node), author box (git regex supported, auto-applies), and a date range (the end date includes the whole day). Filters stack, are remembered per repository, and map to git log --ref / --author / --since / --until.
Personalization — drag column borders in the header to resize (persisted across sessions); time column absorbs the remaining space; colors follow your theme; UI language follows VS Code.
Keybindings & Settings
Ctrl+Alt+G/Cmd+Alt+G— open the graph;↑/↓— move selection.- Search “gitboard” in Settings for page size, auto-load limit, pull strategy, date format, row height, graph style, detail panel position, language, auto-fetch on open, and more.
FAQ
- Nothing changed after upgrading? Run “Developer: Reload Window”; the version label on the toolbar right edge tells you which build is live.
- vscode.dev? Not supported — the extension runs your local
git. - Huge repos? Paging + virtualization keep it smooth;
git commit-graph write --reachablespeeds up paging further.
Development
npm install
npm run watch # then press F5 (“运行 GitBoard 扩展”)
npm run typecheck && npm test
npm run build && npm run package
许可证 / License
MIT © 2026 Emon