Git Integration with VS Code: Part 4 – Configuring Visual Studio Code

Now that PowerShell has been upgraded, and we installed both Git and VS Code, let’s go ahead and configure our environment for synchronization with GitHub. For me, this part was really the meat and potatoes of getting VS Code to integrate with Git and GitHub.

Installing the PowerShell Module

Now that VS Code is installed, let’s install the PowerShell Module so that it can properly understand PowerShell scripts and *.ps1 files.

  • Launch VS Code (possibly for the first time, as seen in this screenshot):
    01-Configure-VS-Code-Initial-Launch
  • Open the Extensions menu by going to View > Extensions (or use the keyboard shortcut CTRL + SHIFT + X).
    02-Configure-VS-Code-Search-Extensions-Marketplace
  • In the Search Extensions in Marketplace search bar, type in PowerShell and hit Enter.
    03-Configure-VS-Code-PowerShell-Extension
  • Highlight the PowerShell extension and click on the green Install button. The installation only takes a short time to complete.
    04-Configure-VS-Code-PowerShell-Extension-Installing
  • Once the PowerShell extension has been installed, click the blue Reload button. This will reload the VS Code app with the installed extension.
    05-Configure-VS-Code-PowerShell-Extension-Reload
  • Now that VS Code has reloaded, we can see that the PowerShell extension is now installed!
    06-Configure-VS-Code-PowerShell-Extension-Installed

 

Configuring Git Integration

Now, let’s integrate VS Code with a GitHub account. Naturally, this process assumes that you’ll be connecting to GitHub and that you already have an active account.

  • In VS Code, open the Command Palette by going to View > Command Palette… (or use the keyboard shortcut CTRL + SHIFT + P).
    07-Configure-VS-Code-Command-Pallette
  • In the Command Palette, type the following command: > Git: Clone and press Enter.
    08-Configure-VS-Code-Command-Pallette-Git-Clone
  • 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

    09-Configure-VS-Code-GitHub-Repo-URL

  • Back in VS Code, paste the repo URL into the Command Palette and press Enter.
    10-Configure-VS-Code-Command-Palette-Enter-Repo-URL
  • The next step in the Command Palette is to define the local directory where the repo files will sync to. In this example, I just used my user profile’s “Documents” directory (typically located at C:\Users\<username>\Documents). Feel free to pick any location you prefer.
    11-Configure-VS-Code-Command-Palette-Enter-Local-Directory
  • Once the Git Clone is performed, a small dialog window will open in the lower right corner of VS Code. It’s asking if you’d like to open the repository that was just synchronized. In this example, I clicked the Open Repository button.
    12-Configure-VS-Code-Open-Repository
  • Now that the repository is opened, we can see that the scripts and other files that I have up on GitHub have now been downloaded to my local computer!
    13-Configure-VS-Code-Files-Synced

 

Update the Git Config file

Before doing any more synchronizations with GitHub, we’ll need to update the local Git Config file. Essentially, we need to let Git know who we are before we start synchronizing things over the Internet.

In the Terminal section of the VS Code window, you’ll need to run the following commands:

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

14-Configure-VS-Code-Update-Git-ConfigIf, by some chance, these may have been configured beforehand, you can always confirm or validate the information in the Git Config by running this command:

git config --global --list

 

Now that files have been downloaded to the local computer, we can begin working with the scripts locally, tracking changes, etc. In the 5th and final post of this Git Integration with VS Code series, Part 5 – Syncing Content with GitHub will touch on how to do staging, commits, synchronization, and more with VS Code and GitHub.

 

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