VS Code Integration

Why bother with VS Code's Git UI?

The terminal commands — git add, git commit, git push — work perfectly. You'll use them throughout this program. But for day-to-day work, VS Code's built-in Source Control panel gives you something the terminal doesn't: you can see exactly what changed before you commit it.

Instead of typing git diff and reading through green and red text in the terminal, VS Code shows you two versions of the file side by side. The left shows what you had before. The right shows what you have now. Changed lines are highlighted in context. You can see whether you're committing what you think you're committing.

This matters more as projects get larger. When you've changed 12 files in one session, the visual diff is the difference between confident commits and "I think that's right."

The Source Control panel

The Source Control panel is Git built directly into VS Code. You don't install anything — it's there from day one.

To open it: Click the branching-paths icon in the left sidebar (it looks like a small branch with two forks, the third icon from the top). Or press Ctrl+Shift+G on Windows / Cmd+Shift+G on Mac.

What you see in the Source Control panel

When you open a project folder that contains a Git repository (i.e., one you've cloned from GitHub or initialized with git init), the Source Control panel shows:

Changes — a list of every file that has been modified since your last commit. Each file shows:

• The filename
• The type of change: M (modified), U (untracked — a new file Git hasn't seen before), D (deleted)
• A small icon: clicking the + next to a file stages it (equivalent to git add filename)

Staged Changes — files you've staged using the + button. These are what will be included in your next commit.

Commit message box — at the top of the Source Control panel, there's a text field labeled "Message". This is where you type your commit message.

The checkmark button — clicking the checkmark (✓) at the top of the Source Control panel creates the commit. This is equivalent to git commit -m "your message".

Viewing a diff in VS Code

Click on any file in the Changes list. VS Code opens a split view:

• Left side (red highlights): the file as it was before your changes
• Right side (green highlights): the file as it is now
• Each changed line is highlighted in context with the surrounding unchanged code

This is your "review before you commit" moment. Get into the habit of clicking through your changed files before every commit. You'll catch mistakes you'd otherwise ship.

Signing in to GitHub from VS Code

Signing in connects VS Code to your GitHub account. This enables you to push and pull without the terminal ever asking for your PAT, and unlocks features in the GitHub Pull Requests extension.

Staging, committing, and pushing from VS Code

Once your project is open and VS Code is signed in to GitHub, here's the complete workflow without touching the terminal:

The GitHub Pull Requests and Issues extension

This extension is already installed as part of your VS Code setup. It adds a GitHub icon to the left sidebar (looks like the GitHub logo — a cat silhouette). Clicking it opens a panel showing:

• Pull requests assigned to you
• Pull requests you've created
• Issues assigned to you

For now, this is most useful for reviewing pull requests directly inside VS Code without switching to the browser. When you start working on team projects, you'll use this to see what your teammates have submitted for review.

GitLens — the extension that shows why code exists

GitLens is already installed as part of your VS Code setup. It's one of the highest-value extensions for understanding a codebase.

Blame annotations

Open any file in VS Code. Move your cursor to any line. GitLens shows a faint annotation at the end of the line — something like:

This is called a blame annotation — it tells you who wrote that specific line, when, and in what commit. Without GitLens, you'd need to run git blame filename in the terminal and read through output that's hard to navigate.

For CA professionals: think of this as an audit trail per line of code. Every line in every file has a record of who wrote it and why.

Commit history in the file

Click the GitLens icon in the left sidebar (a small branching icon, below the GitHub icon). GitLens shows several views:

• File History — every commit that touched the current file, in order. Click any commit to see exactly what that commit changed.
• Line History — the history of the specific line your cursor is on.
• Repositories — an overview of all your repositories and their branches.

Hover details

Hover over the blame annotation at the end of any line. A popup appears showing the full commit message, the date, and a link to view the full commit on GitHub. This makes it possible to understand the context of any piece of code without ever leaving VS Code.

Terminal vs VS Code GUI — which to use?

Both work. Use whichever feels natural.

The terminal gives you more power and control. The VS Code panel gives you better visibility. Most developers use both depending on the task.