Git with VS Code for Mac: Part 3 – Configuring Git and VS Code

In my previous post, I discussed how to install both Git and Microsoft Visual Studio Code on MacOS. This is the third and final part of my three-part blog series on integrating Git with VS Code for MacOS. In this post, I’ll cover how to configure Git and Microsoft Visual Studio Code to work together to synchronize with GitHub.

Git with VS Code for MacOS blog series:

Configuring Git and VS Code

Now that both Git and VS Code are installed, let’s start configuring the two applications to work together to synchronize content with GitHub.

[Optional] The PowerShell Extension for VS Code

Open the Extensions menu by going to View > Extensions (or use the keyboard shortcut COMMAND + SHIFT + X).

In the Extensions pane on the left, search for PowerShell in the Search Extensions in Marketplace box at the top.

Highlight the PowerShell extension and click on the green [Install] button. The installation only takes a short time to complete.

At this point, the PowerShell extension should now be installed. It also seems that installing the PowerShell Extension changes the VS Code color theme to a PowerShell ISE scheme (I don’t recall it doing that in the past, so I’m not sure if something changed recently). If you’d prefer the default dark mode in VS Code, simply go to Code > Preferences > Color Theme (Or use the keyboard shortcut, press and hold Command, then press K and then T) and choose Dark+.

Create the Git Config File

Before doing any communication or synchronization with GitHub, we’ll need to create the local Git Config file. Essentially, we need to let Git know who we are before we start synchronizing our code.

In VS Code, if the Terminal pane isn’t at the bottom, simply go to View > Terminal (Or use the keyboard shortcut, Control + `). Once the Terminal pane is visible, run the following set commands to configure your First and Last Name, as well as an email address:

git config --global user.name "First Last"
git config --global user.email name@domain.com

The User.Name and User.Email fields are used to identify you when making commits in Git. See Git’s online documentation regarding the First Time Setup for other additional options that can be set or modified. To view what has been set in the Git Config file, run this command:

git config --global --list

Configure Git Integration

In VS Code, open the Command Palette by going to View > Command Palette… (or use the keyboard shortcut COMMAND + SHIFT + P).

In the Command Palette, type the following command: > Git: Clone and press Enter.

The next step in the Command Palette is to provide a Repository URL, and in this example, we’ll be using a GitHub repo. So, jump over to a web browser, go to https://github.com, and login with your credentials. Find the repo you want to sync with, and in the green Clone or download button, find the Clone with HTTPS URL. Copy that url (it should be formatted something like this):

https://github.com/<username>/<repo-name>.git

Back in VS Code, paste the repo URL into the Command Palette and press Enter.

The next step in the Command Palette is to define the local directory where the repo files will sync to. In this example, I created a new “Scripts” directory (typically located at ~\Documents\Scripts). Feel free to pick any location you prefer.

With the repo location selected, a pop-up will appear in the lower right corner of VS Code, asking if we’d like to open the cloned repository. In this case, I usually click Open.

With the repo opened, everything that was on the GitHub repo has been downloaded to our local machine! A list of files from the repo will appear in the left pane. Notice that the purple bar that was previously across the bottom of the VS Code window has changed to a light blue color. I believe this is to show that the files open are synchronized with an online repo.

Synchronizing Content

Now, in order to get content to sync between the Mac and GitHub, a few more steps need to be taken. Assuming the repo is sill open in VS Code (in this example, VMWARE-SCRIPTS), let’s create a new sample file. Click File > New to create the new file. In the Untitled-1 tab, enter some sample code or text, and save it within the downloaded repo (in this example, I’m saving it to ~\Documents\Scripts\vmware-scripts).

After saving the new document (or saving changes to a document), the file name in the Explorer pane turns green. In addition to the change in color, a new blue bubble has appeared over the Source Control icon. If we click on that Source Control icon, we can see that there’s now a change pending for that file. I believe the U at the tail end of the file name means that the file is new and not tracked by GitHub yet. Note: If you modify an existing file, it will be highlighted in Red text and the letter M is used.

At this point, we can discard those changes, stage the changes, or commit the changes directly to the online repository (skipping the whole staging process completely).

For the sake of demonstration, I’m going to stage the changes first by highlighting the sample.txt file name and clicking the plus (+) icon. This will save an index of the changes that have been made to the file so far.

Once we’re ready, we can commit those changes to the online repo by clicking the checkmark icon [ √ ] in the Source Control: Git heading. Once clicked, we’ll be asked to enter a commit message into the Command Palette near the top of the VS Code window. Type in a descriptive message about what’s been modified in the file and press Enter. This commit message will also be uploaded to GitHub to help others you may collaborate understand what’s changed and/or why something was changed.

At this point, those changes have only been staged and committed to our local copy of the repo. In the lower left corner of the VS Code window, in the light blue bar, a set of arrow icons will appear whenever there’s content to to upload to or download from GitHub. In this example, we have a new file that needs to be uploaded to GitHub, in order to synchronize the online and local copies of the repository.

Click on those arrow in the blue bar to initiate the synchronization. In doing so, a dialog will appear to notify you of the push and pull operation.

Since this is our first time synchronizing back to GitHub, we need to provide our GitHub username and password here in VS Code.

However, if you have two-factor authentication (also known as 2FA or MFA) enabled on your GitHub account, a username and password isn’t enough and won’t work. There are some extra steps that need to be taken if using 2FA/MFA. Log into GitHub and go to your Account Settings. Click Developer Settings, then go to Personal Access Tokens. Click the Generate a New Token button. Provide a description of the system you’ll be connecting to your GitHub account. Then, there are a number of options to select from. For me, I’ve done repo and gist, and that seems to be enough. Then, click Generate Token. A long, alpha-numberic code will be displayed, and that will be the unique password needed to perform the authentication. Copy the code, and re-try the synchronization with your username, and the token as your password.

After VS Code is able to authenticate with GitHub, we’re asked if we’d like to periodically run ‘git fetch.’ It’s completely up to you, but I personally like VS Code (or Git) to check-in with my online repo from time to time to automatically detect any changes.

Now, using our web browser, we can jump over to our GitHub page and look at the results. The new sample.txt file is displayed and was successfully synced with the online repo!

Related Video

26-JUL-2019: I’m in the finishing stages of a related YouTube walkthrough video for this process. As soon as that video is uploaded and available, I’ll place an embedded version right here in the blog post. Stay tuned!

And that concludes this three-part blog series on integrating Git and VS Code with GitHub for MacOS. I hope you found this content useful, and that it’s helped you in some way. As always, thank you for stopping by!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s