How to Use GitHub with VS Code Using Only the GUI (Source Control Tab)

Table of Contents

• Prerequisites
• Step 1: Install Required Tools
• Step 2: Connect VS Code to GitHub
• Step 3: Clone a Repository
• Step 4: Make Changes and Commit
• Step 5: Push Changes to GitHub
• Step 6: Create and Switch Branches
• Step 7: Pull Updates from GitHub
• Step 8: Resolve Merge Conflicts

Prerequisites

Before diving into the steps, ensure you have the following:

• A GitHub account.
• Visual Studio Code installed on your computer.
• The GitHub extension for VS Code installed.

Screenshot showing the GitHub extension in the Extensions Marketplace.

Step 1: Install Required Tools

Download and install Visual Studio Code and the GitHub extension:

1. Install Visual Studio Code.
2. Search for "GitHub" in the Extensions Marketplace and install it.

Screenshot of the Extensions Marketplace with the GitHub extension highlighted.

Step 2: Connect VS Code to GitHub

Connect VS Code to your GitHub account:

1. Open the Source Control tab.
2. Click the Sign in to GitHub button.
3. Authorize VS Code via your browser.

Screenshot of the "Sign in to GitHub" button in the Source Control tab.

Step 3: Clone a Repository

Clone a repository to download it to your local machine:

1. In the Source Control tab, select Clone Repository.
2. Paste the repository URL and choose a folder.

Screenshot of the "Clone Repository" option in the Source Control tab.

Step 4: Make Changes and Commit

Edit files and commit your changes:

1. Make edits to any file in the repository.
2. Go to the Source Control tab and write a commit message.
3. Click the checkmark icon to commit.

Screenshot of the commit message box in the Source Control tab.

Step 5: Push Changes to GitHub

Push your committed changes to GitHub:

1. In the Source Control tab, select Push.
2. Your changes will be uploaded to GitHub.

Screenshot of the "Push" option in the Source Control tab.

Step 6: Create and Switch Branches

Create and switch between branches:

1. Click the branch name in the bottom-left corner.
2. Select Create New Branch or switch to an existing branch.

Screenshot of the branch dropdown menu in VS Code.

Step 7: Pull Updates from GitHub

Pull updates to stay in sync with the remote repository:

1. In the Source Control tab, select Pull.
2. New changes will be downloaded to your local repository.

Screenshot of the "Pull" option in the Source Control tab.

Step 8: Resolve Merge Conflicts

Resolve conflicts when two people edit the same part of a file:

1. VS Code will notify you of conflicts in the Source Control tab.
2. Open the conflicting file and choose how to resolve the conflict.
3. Commit the resolved changes.

Screenshot of merge conflict resolution options in VS Code.

Further Explanation of Pull & Push Requests with Branches

Before diving into the steps, ensure you have the following:

• Push Definition: Pushing refers to uploading your local repository changes to a remote repository (like GitHub).
  When to use: After you've made changes to your code locally and committed them, you "push" those changes to the remote repository to share them with others or back them up.
  Command: git push Example: git push origin main (pushes changes from your local main branch to the main branch on the remote repository).
• Pull Definition: Pulling refers to downloading changes from a remote repository to your local repository.
  When to use: When you want to update your local repository with the latest changes from the remote repository (e.g., changes made by collaborators).
  Command: git pull Example: git pull origin main (fetches changes from the main branch on the remote repository and merges them into your local branch)..
• Workflow Example:
  1.You make changes to your code locally and commit them.
  2.You push those changes to GitHub to share them.
  3.A collaborator makes changes on GitHub and pushes them.
  4.You pull those changes to update your local repository.

Screenshot showing the create new branch name 'branchtesting' .

Screenshot showing the publish the new branch name 'branchtesting' .

Screenshot showing the already available all branches' .

commit and push files to 'branchtesting' branch' .

What is 'Clone' means

Downloads an entire repository for the first time from GitHub:

When to use: When you don't have a local copy of the repository.

Provide your github created repo URL to this text bar.