Chapter 8: Using GitHub with Visual Studio Code

GitHub is a popular platform for hosting and collaborating on Git repositories. Combined with Visual Studio Code (VS Code), it creates a powerful environment for managing code, tracking changes, and collaborating on projects. This chapter will cover the basics of setting up GitHub in VS Code, creating and cloning repositories, and using GitHub’s built-in collaboration features.

Why Use GitHub with Visual Studio Code?

Visual Studio Code (VS Code) has integrated Git and GitHub support, making it easy to commit changes, push to GitHub, and manage your repositories all in one place. This integration allows you to:

Track Changes: See which files have been modified, staged, or committed directly in VS Code.
Commit and Push with Ease: Quickly stage, commit, and push changes to GitHub from within the editor.
Collaborate: Share your code with others on GitHub and review pull requests without leaving VS Code.

Setting Up GitHub in Visual Studio Code

To use GitHub with VS Code, ensure you have Git installed on your computer. You’ll also need a GitHub account. Once you’ve set up Git, you can start linking VS Code to GitHub.

1. Installing Git

If Git is not already installed, download and install it from git-scm.com. During installation, follow the default options.

2. Logging into GitHub in VS Code

VS Code has a built-in GitHub authentication tool. Follow these steps to log into GitHub:

Open VS Code and go to View > Command Palette.
Type GitHub: Sign In and select it from the list.
Follow the prompts to log into your GitHub account and authorize VS Code to access your repositories.

Recommended Git and GitHub Extensions for VS Code

VS Code offers several extensions that enhance Git and GitHub functionality. Here are some popular extensions that make version control and collaboration easier:

GitLens: This powerful extension enhances Git in VS Code by adding features like blame annotations, commit history, and code lens. It also provides a visual history of changes made to each file.
GitHub Pull Requests: This official GitHub extension allows you to create, view, and review pull requests and issues directly in VS Code, making collaboration seamless.
Git Graph: This extension provides a graphical representation of your Git repository, allowing you to visualize branches, commits, and merges, which can help when managing complex projects.

Web Development - VSCode Github extensions

Creating a New GitHub Repository in VS Code

You can create a new GitHub repository directly from VS Code. This is useful for starting new projects and immediately linking them to GitHub.

        # Step-by-step to create a new repository
        1. Open a new or existing folder in VS Code.
        2. Go to the Source Control view by clicking the Source Control icon or pressing Ctrl+Shift+G.
        3. Click "Initialize Repository" to create a local Git repository.
        4. In the Command Palette (Ctrl+Shift+P), type "Publish to GitHub" and select it.
        5. Follow the prompts to name the repository and choose whether it should be public or private.
        6. VS Code will create the repository on GitHub and link it to your local project.

Cloning an Existing GitHub Repository

To work on an existing GitHub project, you can clone the repository in VS Code. Cloning makes a local copy of the repository so you can edit, commit, and push changes.

        # Cloning a GitHub repository in VS Code
        1. In VS Code, open the Command Palette (Ctrl+Shift+P) and type "Git: Clone."
        2. Paste the URL of the GitHub repository you want to clone.
        3. Choose a location on your computer to save the repository.
        4. Open the cloned repository in VS Code.

Basic GitHub Workflow in VS Code

Here’s an overview of the typical GitHub workflow in VS Code, including staging changes, committing, and pushing to GitHub.

1. Staging and Committing Changes

When you modify a file, it appears in the Source Control view with a U (Untracked) or M (Modified) icon. Click the + icon next to the file to stage it, then enter a commit message and click the checkmark to commit.

2. Pushing Changes to GitHub

After committing changes, you can push them to your GitHub repository. Click on the Source Control view, then click "Push" to send your changes to GitHub.

Using Pull Requests and Collaboration

GitHub’s pull request (PR) feature allows you to propose changes to a repository. PRs are ideal for collaborating on projects, as they let you review and discuss changes before merging them.

        # Creating a pull request in GitHub
        1. Commit and push changes to a branch other than main.
        2. Go to your GitHub repository and switch to the new branch.
        3. Click "New Pull Request" and select the branches to compare.
        4. Review the changes and submit the pull request for review.

Summary

Using GitHub with Visual Studio Code simplifies version control and collaboration by integrating Git functionality directly into your code editor. By following these steps, you can create repositories, clone projects, stage and commit changes, and collaborate with others through pull requests—all within VS Code. Additionally, extensions like GitLens and GitHub Pull Requests and Issues can further enhance your workflow, making it easier to track changes, view commit history, and manage pull requests. This workflow helps streamline your development process and ensures your code is versioned, backed up, and ready for collaboration.