A JetBrains-inspired Git experience for Visual Studio Code. Built for developers coming from IntelliJ / WebStorm / RubyMine who miss their visual Git workflow.
English
Why GitCanvas?
If you've ever switched from a JetBrains IDE to VSCode, you probably hit the same wall: VSCode's built-in Source Control is fine for staging, but the visual Git graph, interactive rebase UI, and one-click commit panel you loved in IntelliJ are just… gone. GitLens is great for inspection, but it doesn't do the work for you. GitCanvas is the missing piece.
Features
- 🎨 Git Graph — Canvas-rendered, smooth at 10k+ commits. Branch lanes, merge points, ref labels (HEAD / branches / tags / remotes). Click any commit to see diff, files, author, parents.
- 📝 Commit Panel — JetBrains-style. Stage/unstage files individually or by hunk. Inline diff, multi-line commit message, recent-commit history.
- 🔀 Interactive Rebase — Drag-and-drop reorder, squash / pick / reword / drop / edit, with conflict preview.
- 🔧 Branch Compare, Inline Blame, Merge Conflicts, Changelists, Tags — the rest of the JetBrains toolkit, all in one extension.
- 🌐 i18n — English & Simplified Chinese, auto-follows VSCode language.
Screenshots
Real screenshots coming in v0.2.0.
| Git Graph | Commit Panel | Interactive Rebase |
|---|---|---|
 |
 |
 |
Branch Switch Highlight
When you switch from one branch to another, GitCanvas tags commits that are
exclusive to the branch you just left. They show up with a warm amber highlight,
a 4px left gutter bar, and an inline from <branch> pill — so you immediately
see what your previous branch contributed that hasn't been merged yet.
| Incoming commits from previous branch |
|---|
 |
Implementation:
- Data source:
git rev-list HEAD..<previousBranchTip>— only commits reachable from the previous branch tip but NOT from HEAD are tagged. - Trigger: every checkout refreshes the tracking via
git rev-parse @{-1}(the reflog-based "previous branch" pointer). - Rendering: a CSS class
commit-row.incomingpaints the row; ref badges pointing to the previous branch getref-from-prev(italic + amber). - Lifecycle: session-scoped — switching branches again recomputes the set, so the highlight always reflects "what was on the branch I just came from".
Inspired by GitToolbox's "Show Unsynced Commits" and IntelliJ IDEA's Git Log incoming-change highlighting.
How is it different from GitLens / Git Graph?
| Capability | GitLens | Git Graph (mhutchie) | GitCanvas |
|---|---|---|---|
| Visual commit graph | ⚠️ requires Pro | ✅ | ✅ Canvas-rendered |
| Commit panel (stage/unstage) | ❌ | ❌ | ✅ |
| Interactive rebase UI | ⚠️ partial | ❌ | ✅ |
| Hunk-level staging | ⚠️ partial | ❌ | ✅ |
| Branch compare | ⚠️ | ❌ | ✅ |
| Inline blame | ✅ | ❌ | ✅ |
| Changelists | ❌ | ❌ | ✅ |
GitCanvas is not a replacement for GitLens — it's the workflow half that GitLens doesn't cover. GitLens shows you what happened; GitCanvas helps you do the work.
Keyboard Shortcuts
| Action | Mac | Windows/Linux |
|---|---|---|
| Open Git Graph | Cmd+Shift+G |
Ctrl+Shift+G |
| Open Commit Panel | Cmd+Shift+C |
Ctrl+Shift+C |
Configuration
{
"gitcanvas.language": "auto" // "auto" | "en" | "zh-cn"
}
Roadmap
- v0.1.0 — Git Graph + Commit Panel + Interactive Rebase + Branch Compare + Blame + Merge Conflicts + Changelists + Tags
- v0.2.0 — Hunk-level staging polish, screenshot pack, publisher verification
- v0.3.0 — GitHub/GitLab integration (PRs, issues inline)
Feedback & Issues
License
MIT
中文
为什么做 GitCanvas？
如果你从 JetBrains 系列 IDE（IntelliJ / WebStorm / RubyMine）切换到 VSCode，多半会遇到同一个坑：VSCode 自带的 Source Control 暂存变更没问题，但你在 IntelliJ 里习惯的可视化 Git 图谱、交互式 Rebase、一键提交面板——全没了。 GitLens 不错，但它只看不做。GitCanvas 就是把那块缺的拼图补上。
功能
- 🎨 Git 图谱 — Canvas 渲染，10k+ commit 也丝滑。分支泳道、合并点、ref 标签（HEAD / 分支 / 标签 / 远程）。点击任一 commit 查看 diff、文件、作者、父提交。
- 📝 提交面板 — JetBrains 风格。文件级或 hunk 级暂存/取消暂存。内联 diff、多行 commit message、历史 commit message 复用。
- 🔀 交互式 Rebase — 拖拽调整 commit 顺序，squash / pick / reword / drop / edit 一个面板搞定，带冲突预览。
- 🔧 分支对比、行内 Blame、合并冲突、变更列表、标签管理 — JetBrains 工具箱的其他部分，一个扩展搞定。
- 🌐 多语言 — 英文 + 简体中文，自动跟随 VSCode。
截图
v0.2.0 会替换为真实截图。
| Git 图谱 | 提交面板 | 交互式 Rebase |
|---|---|---|
|
|
|
切换分支高亮（Branch Switch Highlight）
从一个分支切换到另一个时，GitCanvas 会标记那些只存在于"上一个分支"的提交 — 用暖琥珀色背景 + 左侧 4px 色条 + message 末尾的 from <分支名> pill，让你能立刻看出之前那个分支还有哪些没合过来的工作。
| 上次分支独有的提交 |
|---|
|
实现要点：
- 数据源：
git rev-list HEAD..<previousBranchTip>— 只取"上次分支 tip 能走到、当前 HEAD 走不到"的 commit 集合。 - 触发：每次 checkout 都用
git rev-parse @{-1}（reflog 里的"上一个分支"指针）刷新追踪状态。 - 渲染：CSS class
commit-row.incoming给整行上色；指向 previous branch 的 ref badge 加ref-from-prev（斜体 + 琥珀）。 - 生命周期：会话级 — 每次切换都会重新计算，所以高亮始终是"你刚离开的那个分支独有的"。
参考了 GitToolbox 的 "Show Unsynced Commits" 和 IntelliJ IDEA 的 Git Log incoming-change 高亮。
和 GitLens / Git Graph 有什么不一样？
| 功能 | GitLens | Git Graph (mhutchie) | GitCanvas |
|---|---|---|---|
| 可视化 commit 图谱 | ⚠️ 收费Pro | ✅ | ✅ Canvas渲染 |
| 提交面板（暂存/取消） | ❌ | ❌ | ✅ |
| 交互式 rebase UI | ⚠️ 部分 | ❌ | ✅ |
| Hunk 级暂存 | ⚠️ 部分 | ❌ | ✅ |
| 分支对比 | ⚠️ | ❌ | ✅ |
| 行内 blame | ✅ | ❌ | ✅ |
| 变更列表 | ❌ | ❌ | ✅ |
GitCanvas 不是 GitLens 的替代品，而是 GitLens 不覆盖的那部分 workflow。GitLens 告诉你"发生了什么"，GitCanvas 帮你"把活干完"。
快捷键
| 操作 | Mac | Windows/Linux |
|---|---|---|
| 打开 Git 图谱 | Cmd+Shift+G |
Ctrl+Shift+G |
| 打开提交面板 | Cmd+Shift+C |
Ctrl+Shift+C |
配置
{
"gitcanvas.language": "auto" // "auto" | "en" | "zh-cn"
}
路线图
- v0.1.0 — Git 图谱 + 提交面板 + 交互式 Rebase + 分支对比 + Blame + 合并冲突 + 变更列表 + 标签
- v0.2.0 — Hunk 级暂存打磨、完整截图、publisher 认证徽章
- v0.3.0 — GitHub/GitLab 集成（PR、Issue 内嵌）
反馈 & Issue
License
MIT