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.
- After you authorize, the browser sends you back to Visual Studio and you might have this on your screen.
- 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.
- 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.
- 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.
- 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.
- 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."
- 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."
- Now let's create a file and sync it to the repository. Right click somewhere below README.md and select "New File."
- 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.
- 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.
- If you get this notification you need to set your name and email. Press "Open Git Log."
- Click Output. Scroll up a bit and you will see the following.
- 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. 🙂
- 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."
- You will get this notification after pressing "OK."
- 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.
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
- That's my tutorial for Visual Studio Code and GitHub. There is more to learn so I have added the additional links section below. I hope this was helpful and if you're on LinkedIn, reach out and let's connect.
- Learn to code with Visual Studio Code General information on how to get started.
- Official documentation on how to install on Linux from Microsoft.
- Microsoft Starter Kit Videos.
- Git and GitHub tutorial video. If you want to use GitHub without Visual Studio, use the command line tool Git instead.
- Git Documentation.
- If you think you are too old to get into programming and IT, check out my blog about that here. 🙂
Git Cheat Sheet!
