Git and GitHub in VS Code: Stage, Commit, Branch, Merge and Pull Requests

VS Code puts Git a click away. In this lesson you will use the Source Control view for daily work, manage branches from the status bar, resolve conflicts in the merge editor and handle pull requests with the GitHub extension.

---

🧑‍💻 Why Use Git in VS Code?

Visual Studio Code has Git built in. You can stage, commit, branch, merge, resolve conflicts and push without leaving the editor, and see changes right next to your code. Knowing the commands first (Modules 2 to 4) makes the buttons easy to understand; VS Code then makes daily work faster.

Requirements: Git installed and configured.

---

🗂️ The Source Control View

Open it with Ctrl + Shift + G (macOS: Cmd + Shift + G) or the branch icon in the Activity Bar.

Area	Equivalent command
Changes list	git status (unstaged and untracked files)
+ next to a file	git add file
Staged Changes list	Staged files
− next to a staged file	git restore --staged file
Curved arrow (Discard Changes)	git restore file
Message box + Commit	git commit -m "..."
Sync Changes button	git pull then git push
… menu	Pull, push, fetch, branch, stash, tags and more

Click a changed file to open a side-by-side diff. In the editor, coloured bars in the gutter show added (green), modified (blue) and deleted (red) lines; click a bar to see or revert that change.

---

🚀 Start a Repository

• New repository: open a folder, then click Initialize Repository in Source Control (git init).
• Clone: Command Palette (Ctrl + Shift + P), run Git: Clone, paste the URL or choose Clone from GitHub after signing in.
• Publish to GitHub: for a local repository without a remote, click Publish Branch (or Publish to GitHub) to create the GitHub repository and push in one step (push an existing project).

---

🌿 Branches in VS Code

• The current branch is shown in the bottom-left status bar. Click it to switch branches, create a new branch or check out a remote branch.
• Publish Branch pushes a new branch with upstream tracking (git push -u).
• Merge or rebase from the Command Palette: Git: Merge Branch…, Git: Rebase Branch….

---

🧯 Resolving Conflicts in VS Code

When a merge or rebase stops with conflicts, conflicted files appear under Merge Changes. In the file you can click Accept Current Change, Accept Incoming Change or Accept Both Changes, or open Resolve in Merge Editor for a 3-way view. Then stage the file and commit (or continue the rebase). Full details: Resolve Merge Conflicts.

---

🕰️ History and Stash

• Timeline view (Explorer, bottom): commit history of the current file; click an entry to see that version’s diff.
• Source Control Graph (in recent VS Code versions): a visual history of branches and commits in the Source Control view.
• Stash: in the … menu, choose Stash to save, apply or pop changes (git stash).

---

🔌 Recommended Extensions

Extension	What it adds
GitHub Pull Requests (by GitHub)	Create, review, comment on and check out pull requests and issues inside VS Code
GitLens	Inline blame, rich history, commit search and comparisons
Git Graph	A detailed, clickable branch graph
GitHub Copilot	AI suggestions, commit message generation and PR summaries (Copilot)

---

⌨️ Handy Settings

Setting	Effect
git.autofetch	Fetch in the background so the status bar shows incoming commits
git.confirmSync	Ask before syncing (turn off once confident)
git.enableSmartCommit	Commit all changes when nothing is staged
git.postCommitCommand	Push or sync automatically after committing

Open Settings (Ctrl + ,) and search “git” to see all options. The integrated terminal (Ctrl + `) is always available for commands the UI does not cover.

---

📝 Assignment

1. Open git-practice in VS Code and make a change; stage, commit and sync it using only the Source Control view.
2. Create a branch from the status bar, commit on it, and publish it.
3. Create a conflict between two branches and resolve it with the Merge Editor.
4. Use the Timeline view to compare an old version of README.md.
5. Install the GitHub Pull Requests extension, sign in, and open or review a PR from VS Code.

---

❓ FAQ

🤔 How do I use Git in VS Code?

Open a folder with a Git repository and use the Source Control view (Ctrl + Shift + G) to stage, commit, push, pull and manage branches.

🤔 How do I connect VS Code to GitHub?

Sign in with your GitHub account (Accounts icon or when cloning or publishing). VS Code then uses it for cloning, publishing and pushing.

🤔 How do I resolve merge conflicts in VS Code?

Open the conflicted file and choose Accept Current, Accept Incoming or Accept Both, or use Resolve in Merge Editor, then stage the file and commit.

🤔 Why does VS Code say Git is not found?

Git is not installed or not in your PATH. Install Git, restart VS Code, or set the git.path setting.

🤔 Which VS Code extensions help with GitHub?

GitHub Pull Requests for PRs and issues, GitLens or Git Graph for history, and GitHub Copilot for AI assistance.

---

🎯 Next Steps

• ✅ Git Workflow Best Practices for Teams
• 🧬 Interactive Rebase: Squash, Reword and Reorder Commits
• 📘 Git and GitHub Tutorial: full course