Git and GitHub inside VS Code

Visual Studio Code bundles Git integration directly into the editor, so you can handle the full version control workflow—initializing a repository, creating branches, making commits, and pushing to GitHub—without switching to a terminal. You’ll need both Git and VS Code installed to follow along.

Setting up a local repository

Open VS Code and use the Explorer view (the top icon in the left sidebar, showing two files) to open a folder containing code you want to track. Then click the Source Control icon, the third from the top by default, and select Initialize Repository.

Two things happen immediately. The current branch name appears in the bottom-left status bar, defaulting to main, and every file in the Source Control panel gets a "U" label, indicating it’s untracked. Click the plus sign next to a file to stage it; the label changes to "A" (added). Use the plus next to the CHANGES header to stage all files at once.

To rename the branch:

  1. Open the Command Palette with Shift-Command-P (Mac) or Ctrl-Shift-P (PC).
  2. Type “rename” and pick Git: Rename Branch.
  3. Enter the new name and press Enter. The status bar updates immediately.

To commit staged changes, type a message into the text box at the top of the Source Control view—or click the Copilot icon to have it draft one—then press Commit.

Working with branches

Feature work should happen on its own branch. To create one:

  1. Open the Command Palette.
  2. Enter “create branch” and select Git: Create Branch….
  3. Name the branch (e.g., new-features) and press Enter.

VS Code switches to the new branch automatically. The name in the bottom-left corner confirms where you are.

Reading change indicators in the gutter

When you edit files, markers appear in the gutter—the narrow column to the right of the editor:

  • Adding a line shows a thin green line.
  • Modifying an existing line shows a blue line with a pattern.
  • Deleting a line shows a red arrow.

Changed files show up under CHANGES in the Source Control view. Hover over a filename for quick actions: open, discard, or stage that file. Hover over the CHANGES header to review, open, discard, or stage everything at once.

Reviewing diffs

Click any changed file in Source Control to open a side-by-side diff against the last committed version. To switch to a single-pane view, click the ellipsis (…) in the top-right of the diff and choose Inline View. You can edit directly inside either view; changes appear in the diff in real time.

After staging and committing your edits, the Source Control window clears—but the changes live only in your working branch. Switch back to main by clicking the branch name in the bottom-left and selecting main from the drop-down.

To bring your feature branch work into main:

  1. In the Source Control window, click the ellipsis (…) next to CHANGES.
  2. Hover over Branch and select Merge….
  3. Pick the branch you want to merge from the prompt.

Publishing and cloning

To push your local repository up to GitHub, click Publish Branch in the Source Control view. VS Code asks whether you want a private or public repository, then creates it for you. A notification with Open on GitHub lets you view the new remote.

Cloning an existing repository is just as direct:

  1. On the repository’s GitHub page, click the green <> Code button and copy the URL.
  2. In VS Code, open the Command Palette, type “clone,” and pick Git: Clone.
  3. Paste the URL, choose a destination folder, and select Select as Repository Destination.
  4. When prompted, click Open to open the local copy.

Using MCP with GitHub

You can extend VS Code’s AI assistance through the Model Context Protocol (MCP), which lets AI tools safely tap external data and actions. The GitHub MCP server is installed as an extension:

  1. Open the Extensions view from the left navigation.
  2. Search for @mcp github.
  3. Select the GitHub extension and click Install.
  4. Authorize the MCP server when prompted and select your GitHub username.

Once installed, the server appears in the installed MCP section at the bottom of the Extensions view. With it active, you can use Copilot chat to create code—and Copilot uses external tools where needed, for instance when you ask it to draft GitHub issues. Open the chat window with the Chat icon and enter a prompt to get started.