sangama

How to Use GitHub with VS Code: A Complete Guide for Beginners

Manasa Raj's photo
Manasa Raj
·

4 min read

Are you looking for a simple way to manage your code using Visual Studio Code (VS Code) and GitHub? Whether you're just starting or looking to streamline your workflow, this guide covers everything from uploading code to pushing and pulling changes.

Why Use VS Code with GitHub?

VS Code and GitHub are a perfect duo for developers. They allow you to:

  • Manage code repositories with ease.

  • Push updates and pull changes effortlessly.

  • Collaborate using Pull Requests without leaving your editor.

Getting Started with GitHub and VS Code

Step 1: Install Prerequisites

Before starting, make sure you have the following:

  1. Git Installed:

    • Download Git from git-scm.com and install it.

    • Configure Git after installation:

        git config --global user.name "Your Name"
  git config --global user.email "your.email@example.com"

  2. VS Code Installed:

  3. GitHub Account:

  4. GitHub Extension in VS Code:

    • Open VS Code → Go to Extensions (Ctrl+Shift+X) → Search for GitHub Pull Requests and Issues → Install it.

How to Clone a Repository from GitHub

If you already have a GitHub repository, you can clone it to work locally in VS Code.

  1. Open VS Code.

  2. Press Ctrl+Shift+P to open the Command Palette.

  3. Type Git: Clone and select it.

  4. Paste the URL of your GitHub repository (found on GitHub under Code → HTTPS).

  5. Choose a folder on your computer to save the repository.

  6. Open the cloned repository in VS Code.

How to Make Changes and Push Them to GitHub

Step 1: Make Changes

  1. Open your project files in VS Code.

  2. Edit the code as needed and save the file (Ctrl+S).

Step 2: Stage Changes

  1. Go to the Source Control tab (the third icon in the Activity Bar on the left).

  2. You’ll see a list of modified files.

  3. Hover over the files and click the + icon to stage them.

Step 3: Commit Changes

  1. In the Source Control tab, write a commit message (e.g., "Updated README.md").

  2. Click the ✔ Commit icon to save your changes.

Step 4: Push Changes

  1. Click … (More Actions) in the Source Control tab.

  2. Select Push.

  3. Your changes will be uploaded to the remote GitHub repository.

Tip: For the first push, you might need to set an upstream branch:

git push --set-upstream origin main

How to Pull Updates from GitHub

  1. Open the Source Control tab.

  2. Click … (More Actions) → Select Pull.

  3. This will fetch and merge the latest changes from the remote repository into your local copy.

Important: If there are conflicts, VS Code will highlight them so you can resolve them manually.

Using Pull Requests in VS Code

Step 1: Create a Pull Request

  1. Push your changes to a new branch:

     git checkout -b feature-branch-name
 git add .
 git commit -m "Added feature"
 git push origin feature-branch-name

  2. Open the GitHub Pull Requests and Issues extension in VS Code.

  3. Click Create Pull Request.

  4. Fill in the details (title, description, and branch to merge into) and submit the PR.

Step 2: Review a Pull Request

  1. In the GitHub Pull Requests and Issues extension, select a pull request from the list.

  2. View changes, leave comments, and approve or request changes.

  3. If approved, click Merge Pull Request.

Tips for Efficient GitHub Management in VS Code

  1. Pull Before Push: Always pull the latest changes before pushing your updates.

  2. Commit Frequently: Save small, meaningful changes often to make tracking easier.

  3. Resolve Conflicts Early: Handle merge conflicts as soon as they arise.

  4. Write Clear Commit Messages: Describe your changes succinctly for better collaboration.

  5. Use Branches: Keep the main branch clean by working on separate branches for features or fixes.

Conclusion

With GitHub and VS Code, managing your code becomes a breeze. From pushing and pulling changes to creating and reviewing Pull Requests, this setup simplifies your workflow and keeps your projects organized.

Start using VS Code with GitHub today, and let me know how it transforms your coding experience!

Happy coding! 🚀

GitHubGit