Show Project with Git Branch – A VS Code Extension Development Guide
This article describes how the author tackled the pain of switching between multiple VS Code projects by creating a custom extension that displays each project's Git branch directly in the side panel, detailing the discovery of VS Code APIs, implementation steps, and the final user experience.
When handling many concurrent development tasks, the author often faced overlapping project timelines and needed to switch between several local copies of a project (e.g., 3‑4 branches of "Project A") using the "space‑for‑time" strategy, which involved pulling multiple copies locally and switching via Control + R . However, the default VS Code quick‑open dialog only shows project names and paths, not the associated Git branch, leading to frequent confusion and wasted time.
To solve this, the author built a VS Code extension that augments the project list with the corresponding Git branch name, allowing a clear, one‑glance view of all branches. The enhanced UI shows the branch alongside each project, updating automatically whenever the side panel is opened.
The core challenge was obtaining the list of recently opened projects. By inspecting VS Code's source code, the author identified the internal call workspacesService.getRecentlyOpened() , which provides the needed data. After confirming the method is exposed to extensions, the author created a command that retrieves the recent project list, extracts each project's directory, and then runs a Git command to fetch the current branch.
Implementation steps include:
Searching VS Code's source for the recent‑project placeholder (e.g., openRecentPlaceholderMac ).
Tracing the call chain to locate the API that returns recent workspaces.
Building the extension scaffolding, registering a command, and invoking the API.
Using a child process to execute git rev-parse --abbrev-ref HEAD for each project directory to obtain the branch name.
Rendering the results in a custom side‑panel UI that replaces the default Control + R dialog.
The final result is a tidy side panel that lists each project with its Git branch, making project navigation fast and reliable. The extension can be installed from the VS Code Marketplace at https://marketplace.visualstudio.com/items?itemName=xicunyang.show-project-with-git-branch , and the source code is available at https://github.com/xicunyang/show-project-with-git-branch .
Images illustrate the original quick‑open dialog, the enhanced side panel, and snippets of the VS Code source search results.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.