Using GitHub with VSCode

Lecture: Using VSCode with Repositories

Now we need to connect Git and VS Code.

VS Code has provided a Using Git in VS Code Tutorial that provides a full overview of the features VS Code offers.

For our purposes, you need to link your account to VS Code and configure your Git credentials.

First, open VS Code. Click the Source Control button (the third icon with three circles and a squiggly line. Fun fact – that’s a visualization of branching!). If you don’t see two blue buttons with “Open Folder” and “Clone Repository”, click the “reload” link. If that doesn’t help, close VS Code and reopen it. If that doesn’t work, restart your computer. If that doesn’t work, reinstall Git. If that doesn’t work, try reinstalling VS Code and/or post on Piazza or sign up for office hours so we can figure out what’s going on with your installation.

You’re going to link your GitHub account and download the CS121 example code repository. If you haven’t set up your GitHub account, stop, go back to Create Your Accounts and create your GitHub account first.

Click Clone Repository.

It should redirect focus to the box in the top middle of VS Code. Click “Clone from GitHub”.

It should tell you that it wants you to sign in with GitHub. Click “Allow”.

It should open a browser window. It will either take you to a page to Authorize access or to log in. If the former, choose Authorize access. If the latter, log into GitHub.

Then it should redirect you back to VS Code. If not, close the browser and go back to your VS Code window.

You’re going to clone the example code from CS 121. In the textbox, enter “CS121-Public-F22”. You should see “BoiseState/CS121-Public-F22” show up. Choose that.

It will ask you where you want to store the repository. Choose the location where you want all of the files to go. Open the cloned repository.

Choose “Yes, I trust the authors”

On the left hand side, expand “examples” by clicking on the arrow next to it. You should see module folders listed. Feel free to explore the code.

You’ve now connected your GitHub account to VS Code! This will allow you to open and manage your repositories directly from inside VS Code. Continue to the next part to configure Git correctly.

Configure Your Git Information in VSCode

Open a terminal by selecting View → Terminal.

Open a Git Bash terminal by clicking the plus icon and choosing Git Bash from the menu. If you don’t see Git Bash, then you likely did not install Git successfully. Go back and reinstall Git or restart VS Code or restart your computer.

In the terminal, enter your configuration information:

git config –global user.name “Your Name”

git config –global user.email “YourEmail@u.boisestate.edu”

Replace “Your Name” with your name and replace “YourEmail@u.boisestate.edu” with your BSU email address. The screenshot below shows how I configured mine.

Done! Git should now be connected with VS Code.