Visual Studio Code and GitHub

Want a quick read on how to connect Visual Studio Code to GitHub on Linux and Windows? Well look no further. 🙂 Now bare with me, some of these steps might seem obvious but this tutorial is written for everyone. ✌️

Table of Contents

For Windows

  • Need Visual Studio Code? It’s free, get it here: https://code.visualstudio.com/
  • Go to https://github.com/ and signup for an account.
  • You need to download GitHub for Windows to connect Visual Studio Code to GitHub. You can install it using the default options. https://git-scm.com/download/win
  • Now that we have downloaded and setup everything we are ready to connect Visual Studio with GitHub.
  • Click Source Control on the left in Visual Studio Code. You have two options, to open a local folder or clone the Repository directly from Visual Studio. Let’s do the latter.
  • Click “Clone Repository” and then click “Clone from GitHub.” This will prompt you for your GitHub username and password. After you login you will be asked to authorize.
Visual Studio Code and GitHub
  • After you authorize, the browser sends you back to Visual Studio and you might have this on your screen.
Visual Studio Code and GitHub
  • This does not mean that you don’t have any repositories, it just means that it’s not connected to a specific one. If you don’t have a repository, let’s create one quickly on GitHub, click “New.” This will be on the default GitHub page after you login to GitHub.
Visual Studio Code and GitHub
  • Let’s give it a name and description. My repository is private not public and I click “Add a README file.” If you click that you see that it will set “main” as the default branch.
Visual Studio Code and GitHub
  • Now we have created the repository, now it’s time to copy the link to it and paste it into Visual Studio. Click Code, now click the copy icon next to the URL.
Visual Studio Code and GitHub
  • In Visual Studio Code, paste the URL in the field that got opened when you clicked “Clone Repository.” If it’s not open, click “Clone Repository” again.
Visual Studio Code and GitHub
  • Then Windows Explorer will open up and ask you to select or create a local folder that will store the cloned Git repository. Once you have selected the folder it will sync with the GitHub repo.
  • You will get this pop-up notification, click “Open.”
Visual Studio Code and GitHub
Visual Studio Code and GitHub
  • I check the “Trust the authors …” checkbox and click “Yes, I trust the authors …”
  • Now you have successfully connected to the repository you selected to clone.
  • You should see the only file in your repository, README.md. At the bottom you can see the branch you are currently working in, “main.”
Visual Studio Code and GitHub
  • Now let’s create a file and sync it to the repository. Right click somewhere below README.md and select “New File.”
Visual Studio Code and GitHub
  • I created a Markdown file. I take all my notes using Markdown.
  • Here you can see a few things happening, the 1 on the left with the pink underneath is telling us that there is 1 pending change that has not yet been pushed to our repo.
Visual Studio Code and GitHub
  • Now we commit the changes to our repository. Click “Source Control” on the left. Then click the plus sign for the file you just created and edited. Then you click on the check mark and it will ask you for a comment for the commit. It’s a good idea to give it a helpful description so you know in the future what was added/changed. I put in “tutorial update” as my comment.
Visual Studio Code and GitHub
Visual Studio Code and GitHub
  • If you get this notification you need to set your name and email. Press “Open Git Log.”
Visual Studio Code and GitHub
  • Click Output. Scroll up a bit and you will see the following.
Visual Studio Code and GitHub
  • It doesn’t have to be your GitHub email. Git commit uses this information, and it’s put into the commits you start creating.
  • Click “TERMINAL” and do the following. Remember to put in your email address. 🙂
Visual Studio Code and GitHub
Visual Studio Code and GitHub
  • Now let’s commit again by pressing the check sign, no 1. Then provide a comment for the commit, no 2. Then click “Sync Changes” click “OK.”
Visual Studio Code and GitHub
Visual Studio Code and GitHub
Visual Studio Code and GitHub
  • You will get this notification after pressing “OK.”
Visual Studio Code and GitHub
  • Here is a description about what this means, I took it from Google. 😉
    • Fetch just updates your remote tracking branches and doesn’t affect your local branches or working copy, so it’s safe to do regularly without messing up your work. It’s helpful for staying updated when collaborating on a repo with others.
  • You did it! Yeah. 😀 Hope everything worked out for you. If not feel free to add a comment down below.
Visual Studio Code and GitHub

For Linux (RHEL based systems)

  • I used Fedora 35 for installation. You might run into some problem I didn’t and if you do, comment down below and we can figure it out together. 🙂
  • Here are the steps to install, and if you don’t know how to use vim here is a tutorial.

sudo vim /etc/yum.repos.d/vscode.repo

Paste this into the vscode.repo file. Click “I” when you are in Vim to insert, do ctrl+shift+v to paste it. Press escape on your keyboard and do :wq to write quit.

[vscode]

name=Visual Studio Code

baseurl=https://packages.microsoft.com/yumrepos/vscode

enabled=1

gpgcheck=1

gpgkey=https://packages.microsoft.com/keys/microsoft.asc

That should import the GPG key but if it doesn’t import, you can manually import it.

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc

We are now ready to install Visual Studio Code.

sudo dnf install code

  • Here is a sample output from the install.
  • How you connect to GitHub is the same in Visual Studio Code for Linux as it is in Windows.

Additional Information

Git Cheat Sheet!

Leave a Reply

Your email address will not be published.