Branches
Beginner VS Code UI
Why this matters
Branching is the operation you do most often after committing, and VS Code puts it one click away in the corner of the window. Knowing what that click does, and what it does with your unfinished work, makes branching a non-event.
The Status Bar control
The bottom left of the window shows the current branch, with a small branch icon. Clicking it opens a Quick Pick listing:
| Entry | Does |
|---|---|
| Create new branch… | New branch from the current commit, and switches to it |
| Create new branch from… | New branch from another branch, tag or commit |
| Any branch name | Switches to it |
| Remote branches | Creates a local branch tracking it |
Typing filters the list, which matters in a repository with sixty branches.
Beside the branch name, a small sync icon shows the incoming and outgoing counts, and clicking it syncs (lesson 15.6).
What happens to uncommitted work
The rule is Git's, not VS Code's (lesson 6.3):
| Situation | What happens |
|---|---|
| Your changes do not touch files that differ between branches | They come with you |
| They do | Git refuses; VS Code shows the error |
When it refuses, VS Code offers to Stash & Checkout, which stashes your work, switches, and leaves the stash for you to pop. That is the right answer most of the time, and it is worth knowing it happened: the work is in the stash, not lost, and git stash list proves it.
The habit that avoids the question: commit or stash before switching.
Publishing a branch
A new local branch does not exist on the server. After the first commit, the Source Control view shows Publish Branch, which is git push -u origin <branch>: it pushes and sets the upstream, so from then on Sync Changes knows where to go.
Signed in to GitHub or GitLab, publishing usually offers to open the merge or pull request page as well (lesson 15.8).
Comparing and merging
| Task | Where |
|---|---|
| See a branch's commits | Source Control Graph, or Git: View History |
| Compare with another branch | Git: Compare With… in the Command Palette |
| Merge another branch into this one | Git: Merge Branch… |
| Rebase onto another branch | Git: Rebase Branch… |
| Delete a local branch | Git: Delete Branch… |
| Delete the remote branch | The platform, usually at merge time |
Merging from the editor is an ordinary merge: if it conflicts, the files appear under Merge Changes and the merge editor takes over (lesson 15.7).
The graph
The Source Control Graph, below the file lists, draws the history: one row per commit, with lines showing where branches diverged and merged. Clicking a commit shows its files; clicking a file shows that commit's diff.
It is the fastest way to answer "has my branch got the latest main?" without any commands: if your branch's line joins main's line above the last main commit, it has not.
How to do it
$ git switch -c docs/12-windows-install-steps
$ git switch main
$ git push -u origin docs/12-windows-install-steps
$ git branch -d docs/12-windows-install-stepsEverything the Status Bar does, in four commands (lesson 6.3).
- The branch name in the Status Bar for switching and creating
- Git: Create Branch, Git: Checkout to…, Git: Delete Branch…
- Publish Branch in the Source Control view after the first commit
- Git: Merge Branch…, Git: Rebase Branch…
The branch widget sits in the same corner and offers more: New Branch from…, Checkout and Rebase onto Current, and per-branch actions from the list. See lesson 16.6.
Branches live under Code → Branches, and the merge request page offers Delete source branch at merge time. Protected branches will refuse a push from the editor exactly as they would from the terminal (lesson 9.5).
Branches in the repository, and Delete branch on the merged pull request.
Common mistakes
- Creating a branch from the wrong starting point. Check the Status Bar before creating; use Create new branch from… when you need a different base.
- Forgetting to publish, then wondering why colleagues cannot see the branch.
- Accepting Stash & Checkout without noticing, then losing track of the stash. It is in … → Stash → Pop Latest Stash.
- Deleting a local branch that was never merged. VS Code will warn; the warning is information (lesson 12.9).
- Working on
mainbecause it was already checked out. The Status Bar says which branch you are on; read it.
Try it yourself
Goal: run a branch's whole life from the interface.
- Click the Status Bar branch name and create
docs/vscode-branch-demo. - Make a change, stage and commit it in the Source Control view.
- Click Publish Branch, then check the branch exists on the platform.
- Switch back to
mainwith the Status Bar, then switch again to your branch, both times with uncommitted work present, and note what happens each time. - Merge it into
main(Git: Merge Branch…), then delete the branch with Git: Delete Branch….
Expected result: a branch created, published, merged and deleted without typing a Git command, and one observation of what switching does to uncommitted work.
Show solution
Step 4 is the useful one. If your change touches a file that differs between the branches, Git refuses and VS Code offers Stash & Checkout; if it does not, the change simply comes with you. That difference confuses people until they have seen both, which takes about a minute to arrange deliberately.