GitHub for Beginners: Getting started with Git and GitHub in VS Code (opens in new tab)

VS Code provides an integrated way to manage Git and GitHub without leaving the editor, reducing context switching and simplifying common version-control tasks. The post walks beginners through initializing a repository, staging and committing files, creating branches, tracking edits, and reviewing diffs. It emphasizes that Git manages source code locally, while GitHub hosts repository copies remotely.

Git, GitHub, and VS Code

• Git is the program used to manage source code and version history.
• GitHub hosts copies of Git repositories.
• VS Code uses Git to provide a graphical workflow for managing code and synchronizing it with GitHub.
• Following along requires installing both Git and VS Code.

Initializing a Repository

• Open a project folder in VS Code through the Explorer panel.
• Select Source Control and click Initialize Repository.
• VS Code creates a local Git repository, initially using the main branch.
• The branch can be renamed through the Command Palette:
  • macOS: Shift-Command-P
  • Windows/Linux: Ctrl-Shift-P
  • Choose Git: Rename Branch.

Staging and Committing Files

• Newly detected files appear with a U, meaning “untracked.”
• Click the plus sign beside a file—or beside CHANGES to stage everything.
• Staged files receive an A indicator.
• Enter a commit message in the Source Control panel and click Commit.
• Git commits changes locally; they are not uploaded to GitHub until they are pushed.

Creating and Switching Branches

• Use the Command Palette and select Git: Create Branch….
• Enter a branch name such as new-features.
• VS Code creates the branch and automatically switches to it.
• The active branch is displayed in the bottom-left status bar.
• Branches allow developers to work on features separately from main.

Understanding Change Indicators

VS Code displays edits directly in the editor gutter:

• A green line marks newly added code.
• A blue patterned line marks modified existing code.
• A red arrow marks deleted code.
• Modified files appear under CHANGES in the Source Control panel.
• Hovering over a file provides controls to open it, discard changes, or stage it.
• The CHANGES header also provides actions for reviewing, discarding, or staging changes across all files.

Reviewing Diffs

• Clicking a changed file opens a side-by-side comparison of the current and previous versions.
• The diff menu’s Inline View option displays changes in a single editor pane.
• Inline diffs can also be edited directly, allowing corrections before staging or committing.

VS Code’s Source Control integration gives beginners a practical, visual workflow for Git. A typical process is to initialize a folder, create a working branch, inspect edits, stage selected files, commit them with a descriptive message, and then push the commits to GitHub.