Create Your First Github Project in VSCode

Share this post

This post is part of the complete guide on Git and Github

Visual Studio Code (VSCode) is a code editor that helps you to develop, run and debug code with built-in syntax highlighting, code completion and commit features.

In this post, I will show how you create, clone and work with your Github repository in VSCode.

Install Visual Studio Code and the Python Extension

  1. If you have not already done so, install VS Code.
  2. Next, install the Python extension for VS Code from the Visual Studio Marketplace.
Install Python Extension for VSCode

Install and Activate Git and Github

Before you can use Git and Github in VSCode, you need to :

  1. Create a Github account;
  2. Install Git on your computer.

If you want detailed instructions on how you can create and set-up Git and Github, read how to install and set-up Git in VSCode.

If you know how, you can also just go to Git Download location.

Create a Repository on Github

Create your first repository on Github by following these simple steps.

  • Click on “New repository” in the top right of the page;
  • Give your repository a name;
  • Initialise this repository with a README;
  • Click on “Create repository”
First repository created on Github

If you want detailed steps, read this post that tells you how to create a repository on Github.

Clone Your Repository

Now it is time to clone your Github Repository.

To clone your repository, you need to copy the web URL linked to your repository on Github and clone the repo.

Go to a folder where you want your Repository to be cloned

Go to your Github Repository and Copy the URL

Clone a Github repository with HTTPs
Clone a Github repository with HTTPs

Go in Visual Studio Code.

Press Ctrl + Shift + P (on Windows), or Command + Shift + P (on Mac). This will replicate what you would do from the command line.

Type Git: Clone.

Clone Your Github Repository from VS Code

Add the URL that you copied earlier.

Copy the Github URL

Select the repository location where you want your file to be cloned.

A small prompt window will pop-up in the bottom right of your screen saying: “Would you like to open the cloned repository?”. Click on “Open”.

Go to your working folder, your repository should be cloned.

Open the Project in VSCode

If you have not opened the newly created project in VSCode when you were ask if you wanted to open the repository earlier, now it is time to do it.

Click on File > Open, go to the cloned repository and click on “Open”.

Set-Up Gitignore File

When you commit something to Github, you might want to exclude some stuff from your commit. For example, you might want to exclude stuff like credentials (for security purposes), or other stuff like VS Code workspaces (for best practices). Sometimes there are even stuff you just don’t want to be committed because you don’t really care about them and don’t want to pollute your commit history.

To do so, you need to create a .gitignore file with rules to what you want to be excluded from your commits. The .gitignore file is a text file that tells Git which files or folders to ignore in a project.

To set-up a .gitignore file using VSCode, go to File > New File, or click on the + file icon in the Explorer.

Create a new file in Github
Create a new file in Github

In this new file, add all the directories and files that you want to be ignored. Save the file as plain text file and name it .gitignore within VS Code.

.gitignore file in VSCode
.gitignore file in VSCode

If you don’t know what to add in it, you can use my Gitignore template for Python. Just know that I have blocked common names I give to credential files, and the README.md file because I don’t want changes to this file to impact my commit history. Just make sure that you update to file to your needs.

Now, save your .gitignore file. Press CTRL + S(on Windows), or Command + S (on Mac), or go to File > Save.

Save Your Project as a Workspace

Workspaces in VSCode are super useful. They can have their own settings and seperate your projects in a way that each commit doesn’t impact other projects.

To save your current configuration as a workspace, go to File > Save Workspace as and go to the folder that you are currently working on.

Give a name. I usually use the name of the repository as a workspace name.

The workspace will now appear in the explorer.

Whenever you want to come back to that project, all you need to do is to go to File > Open Workspace... and you’ll come back to the state you left it.

Make Your First Commit to Github

Now that you have created your first file in VSCode. You will want to push (commit) to Github.

If you don’t understand commits, don’t worry about it too much. All you need to do it push something to Github from VSCode is:

  1. Save the changes you made to your file;
  2. Commit to the Master Branch;
  3. Push to Github.

Save Changes

The first step is to save your .gitignore file. Press CTRL + S(on Windows), or Command + S (on Mac), or go to File > Save.

Commit Your Changes

Next, go to the Source Control panel and click on the check icon.

Commit to Github
Commit to Github

This will commit the changes you made to your master file. Add a message to help you understand what the commit is about.

Commit message
Commit message

Push the Commit to Github

The third step is to push the commit to Github. Just click on the three dots ... and click on “Push”.

When all is done, go back to your Github repository and see that your .gitignore file has been pushed to Github and has the last commit message you added right next to it.

As you can see, because of the .gitignore file we have added, the README.md file as stayed to the initial commit and the workspace file (seo-projects.code-workspace) have not been pushed to Github.

Conclusion

Congratulations, you have created your first project with Github and VSCode. You are now ready to start coding.