Set up GitHub with Visual Studio code [Step-by-Step]

Getting started with steps to setup GitHub with Visual Code

Knowing how to set up GitHub with visual studio code will simplify your software development process. Here's what happens in a typical git-GitHub-Visual Studio Code workflow.

You build a remote repo on GitHub and clone it on your terminal. Next, you create and modify files in the Visual Studio Code. You then return to the terminal to stage, commit and push the changes to the remote repo.

The back and forth switching between applications can be tiresome. Worse yet, you may lack the skills to use the terminal. Or you want to see details of what you do on a GUI.

Thanks to constant improvements to Visual Studio Code, you can now log into and interact with your GitHub account right from the Visual Studio Code.

To get started, you need to install git and Visual Studio Code on your computer, have a GitHub account, then do some settings in Visual Studio Code. One of the settings is enabling git in the Visual Studio Code through these steps.

Manage -> Settings -> Extensions -> Git: Enable

After that, you can modify, commit and push files. As you will see in this tutorial, you can comfortably make branches, merge and delete them from Visual Studio Code. You can also handle pull requests and issues using extensions we will install.

Let's dive into a detailed explanation of the concepts before learning how to set up GitHub with visual studio code with examples.

 

Introduction to git, GitHub, and Visual Studio Code

Git is a free, open-source, actively maintained, distributed version control system. It gives you the convenience of tracking file changes and software versions online and offline.

In an offline setting, git stores the changes in the git database, whose details lie in the .git subdirectory of your project's root directory. You can take a snapshot of your repo in a cloud-based service like GitHub, GitLab, or Bitbucket.

But how do you modify the files? That is where a code editor like Visual Studio Code comes in. Visual Code Studio is a cross-platform source-code editor made by Microsoft.

 

Requirements to set up GitHub with visual studio code

Get the software

Install git and Visual Studio Code of your operating system, then create a GitHub account.

 

Know the basics of git workflow

Before attempting to set up GitHub with Visual Studio Code, you should understand what happens in a git workflow. Learn the three levels of the workflow: working directory, file staging, and change committing.

Next, you should know how to push and undo changes. Lastly, it would be best to understand git pulling, branching, merging, and rebasing.

That is all you need to set up GitHub with visual studio code. We can now prepare a lab to manage a GitHub repo using Visual Studio Code.

 

Set up GitHub with Visual Studio Code

In this section, we will log in to GitHub from Visual Studio Code, enable git on Visual Studio Code, and create a remote repo to practice a basic Visual Studio Code-GitHub workflow.

 

Confirm installations

It would help to confirm our git and Visual Studio code installations before doing any practice or trying to set up GitHub with visual studio code.

To check for git installation, open your terminal or command line and run the following command.

git --version

Similarly, you can check the Visual studio code installation as follows.

code --version

 

Configure global details

Configure your git username, email, and text editor because git will need them for the commits.

git config --global user.name "<username>"

git config --global user.email "<your email>"

git config --global core.editor "<default text editor> -w"

I am setting mine as follows:

git config --global user.name "Stevealila"

git config --global user.email "stevealila25@gmail.com"

git config --global core.editor "code -w"

Here, code represents Visual Studio Code.

 

Enable git in VS Code

Open a new Visual Studio Code window. On the bottom-left corner, you see the settings icon which tooltips to Manage on hover.

 

Click on it followed by settings. In the search box, type git enable, scroll down and check the box labelled, Git: Enabled.

 

Sign in to GitHub from Visual Studio Code

Return to Visual Studio Code's main page. Next to the Manage icon is Accounts. Click on it followed by Turn on Settings Sync, then Sign in and Turn on and Sign in with GitHub.

The system takes you to your default browser, from where you can log in to your GitHub account, enabling you to set up GitHub with Visual Code Studio. Click Continue and accept prompts till you get redirected to Visual Studio Code.

 

Create a remote repo

Head over to GitHub and create a repo to practice setup GitHub with Visual Studio Code.

Now that we have set up GitHub with visual studio code, let's use the environment to explore a standard git workflow.

 

Example-1: Set up GitHub with visual studio code to commit and push a file

Click on Clone repository. Choose Clone from GitHub. If you are logged in, you will see a list of your remote repos.

Otherwise, GitHub leads you to the login page where you can sign in to GitHub. It then redirects you to Visual Code Studio on successful login.

Pick the repo, new_repo, we created in the lab section.

Save the repo in a folder, create a text file with the words "text file" and save it.

The Source control tab shows we have a new change. Likewise, the file gets marked with U meaning untracked. Click on the Source Control tab and the plus, + sign on the file. That's the equivalent of git staging on a terminal workflow.

Enter a text message in the textbox and click on the tick whose hover reveals Commit.

The entered text is our commit message. Lastly, we can push the changes using these four main ways.

You can click on:

1. Sync Changes,
2. View -> Command Palette -> Git: Push,
3. the ellipsis ... followed by push, or
4. The bottom-left cycle icon next to the current branch.

I am using the option 4 above.

Checking the repo on GitHub confirms our git push action was successful.

We can modify the file, stage, commit and push the changes using the same steps. Let's see how to collaborate on the remote.

 

Example-2: Branching, merging, and pulling using Visual Studio Code

Creating, switching between, and pushing branches is simple after setting up GitHub with Visual Studio Code. Click on Source Control (Ctrl+Shift+G), the ellipsis ... followed by Branch, then choose a target option.

We can also create a branch by clicking on the current branch, main, then follow prompts till we make and check out a branch. I have created one called branch_B.

Let's modify file.txt by appending the line "modified".

And follow the example-1 steps above to push the changes.

Lastly, we can merge branches and pull changes by checking out the main branch, clicking Source Control (Ctrl+Shift+G), the ellipsis ... followed by Branch and choosing Merge branch, picking branch_B then pushing the changes to synchronize the remote repo with the local one.

 

Bonus tricks

There are multiple extensions to apply as we set up GitHub with visual studio code. Here are two of the most crucial ones.

1. GitHub Pull Requests and Issues - manage pull requests and related challenges
2. GitHub Repositories - view, search, edit and commit changes to any remote repos.

Head over to the Extensions tab and search the extensions' respective names.

After installing the GitHub Pull Requests and Issues extension, you should see the GitHub icon. On the other hand, the GitHub Repositories extension creates a screen-like shape named Remote Explorer on hover.

Their friendly docs should guide you to use them smoothly. You can also find guidelines on how to use GitHub Repositories Visual Studio Code's documentation.

 

Key Takeaway

You just learned how to set up GitHub with Visual Studio Code and practiced a basic git workflow. Now is the time to ease your software tracking journey by using the workflow alongside command-line commands.