Simple GitHub Integration with VSCode
By: Alan Jones
Tags: Hands On Tutorials, Github, Git, Vscode

Simple GitHub Integration with VSCode

GitHub is a good way to share your code and keep it secure— VSCode is a great editor that works seamlessly with GitHub Alan Jones Sep 5·8 min read

Photo by Fotis Fotopoulos on Unsplash

I am no GitHub expert. I don’t need to be. I don’t need to share code across development teams or to have multiple versions of code that will eventually be merged into a single product or do any of the other wonderful things you can do with GitHub.

What I want is to have a copy of the little projects I create that I can share with others and to be able to easily access my code from different computers and/or locations. And a combination of VSCode and GitHub does this simply and easily.

Using GitHub also means that I can work on multiple machines, use Windows and Linux as I like, and still keep my code in sync and up-to-date on each machine.

And once set up it only takes a couple of clicks to do it.

I’m going to run through the steps I took to use GitHub for my own simple needs, so if you are a GitHub expert or you head up a team of developers who work remotely, create and share documents and code between themselves, then you might want to stop reading now — this is not for you.

But if you are in a similar position to me, you create small projects that you would like to share while at the same time keeping your code safe and secure, AND you don’t currently use GitHub, then read on.

Git basics

GitHub manages code using the version control system, Git, support for which is built in to VSCode. You can download Git from their website and once installed, VSCode should be able to find it.

Fundamentally, Git tracks any changes that you make in you code — edit a file and Git knows about it. But in order to update a project, you need to commit the changes. There are two parts to commiting, first you add the files you want to the commit — that’s called staging — and then you actually commit the changes with a short message (typically describing what changes you have made). In this way Git keeps a repository of code which contains the up-to-date files for the latest version along with a history of what changes have been made.

Once a version of your code is commited it can be pushed to a remote repository like GitHub and shared with the world (or your team).

Conversely, a version of the code can be pulled from the remote repository to a local machine to be worked on there and then pushed back to the remote repository when you’ve finished.

That’s all I use from Git and GitHub, so I’ll leave it at that. But you can find comprehensive documentation for Git and GitHub on their websites.

Set up a Github account

In order to use GitHub you need an account and getting one is straightforward. You’ll need your email address and a password, and you’ll need to choose a username that isn’t already in use. Then you have to solve a puzzle to make sure that you really are a human being — it’s not difficult.

Next they will send you a launch code which you enter to get going.

They ask you about how you will use GitHub and your interests and give you a choice of different accounts that might interest you. Some accounts charge a small monthly fee but there is a free account which is probably the one you want to go for. You can look at the details of what else is available but the free one gives me all I need.

Create a repository

Once you’ve sorted out your account you will want to create a repository (also known in Git circles as a ‘repo’). On you home page you should see something like this:

Creating a repository in GitHub — image by author

Clicking on ‘Create a repository’ will bring up a form where you name the repo, give it a description and decide whether is should be public or private. If you make it public, the whole world can see and download you code. Private repositories are… well they’re private.

Naming a repository in GitHub — image by author

You will then be asked to to specify some options. It’s a good idea to create a README file, it’s where you can describe the purpose of the repo and its contents, so select that and it will be automatically created for you.

I don’t usually bother with .gitignore — it’s a way of instructing Git to ignore particular types of files that you don’t want to include in the repo.

Finally, choose a license. It is entirely up to you which one you choose but GitHub public repos ought to be open source.

Settings for a repository in GitHub — image by author

Once you’ve created your repo it will look similar to this. The README.md file has been created with the title of the repo and its description — you might want to change this later.

Your first repository in GitHub — image by author

You now have a basic repo that can be downloaded onto your local machine. To do this we clone the repo. Click on the code button and copy the url — you will use this in VSCode in a moment.

Cloning a repository in GitHub — image by author

Clone the repo in VSCode

Now you need to open VSCode. Close any files or folders that you have open and select the source control icon. This gives you the option to open an existing Git repo or clone a new one. We are going to do the latter.

Creating a repository in VSCode — image by author

So, click on Clone Repository and you’ll be asked for a url —that’s the one that we copied a moment ago from the GitHub webpage, so paste it in!

Cloning a repository in VSCode — image by author

Don’t be tempted to copy my repo url because although you will be able to clone it, you will not be able to push it back to GitHub later and you’ll waste a lot of time by having to go through this all over again!

Hit return and you’ll be asked whether you want to open the repo — you do, of course. It may then ask if you trust the authors of the repo — again, you do (you trust yourself, right?).

After a second or two you should have this:

A new repository in VSCode — image by author

It’s a newly created repo containg the README file and the licence.

Now we’ll create something new. Create a new file and save it. e.g.

A new Python program in VSCode — image by author

Notice that the source control icon now has a notification — this is because something has changed. Open the source control icon again and and you can see that Changes lists prog1.py. We can now commit this change by typing in a commit message and hitting Ctrl+Enter .

Source control changes y in VSCode — image by author

Now since we haven’t staged the change, VSCode asks if you would like to automatically stage them and whether you should always do this (or never). I never bother to stage things because I always want all my changes to be in the commit — if you want the same then choose Yes or Always. If you choose Never, you will have to do the staging manually.

Automatic staging — image by author

You should notice that the notification has gone.

Now the whole point of us doing all this is to keep our code on GitHub so having made a change we now need to push it there. Select Push from the … menu.

Push the repo — image by author

GitHub needs to know that you are authorized to push you repo. This next step only happens the first time you connect to GitHub after that it will connect automatically. First step:

Give permission to sign in to GitHub — image by author

This brings up a browser window and asks you log in to GitHub in the usual way to confirm that VSCode can use your account.

When you’ve done that the local repo will be pushed to GitHub. Open it and you’ll see that there is a new file in the GitHub version of the repo — i.e. exactly the same as on your local machine.

The updated remote repo — image by author

Let’s make another change to prog1.py in VSCode:

Another change — image by author

Commit this and push, again, in the same way as before. There should be no messing about with authorization, this time. The push should go ahead without a hitch.

In GitHub click on prog1.py and you should see this:

The modified program is in the GitHub repo — image by author

The modified version of the program is now in the remote repo.

And you can now make changes to the file in GitHub and use the Pull command to get it back to VSCode. To edit the file click on the pencil icon.

Edit prog1.py — image by author

Make some changes and then hit the Commit Changes button (you can optionally add a comment).

Commit changes in GitHub — image by author

Now you can go back to VSCode and pull the changes so you have the newly modified repo locally.

Pull the repo to VSCode — image by author

And Hey Presto!

The pulled file in VSCode — image by author

So, we can make changes either remotely and pull them to a local machine or make changes locally and push to the remote repo.

And with a combination of these you can keep more than one machine up-to-date with the latest version of your code. Just make sure that your remote repo is always current by always pushing to it as the last thing you do after an editing session.

I hope that demonstrating how I use Git and GitHub has been useful. It only scratches the surface of what you can do with these tools, so if you have any better ideas or techniques (or if you think I’ve got something wrong), please feel free to comment, below.