Use Git with Visual Studio Code

0

Visual Studio Code is a great PowerShell development platform and since moving off of PowerShell ISE, I can say that I haven’t really looked back since making the move.  Visual Studio Code provides tight integration with Git so it is an excellent way to start using version control if you haven’t already with you PowerShell code.  Let’s run through just a quick basic tutorial on how to use Git with Visual Studio Code.  We will walk through a basic clone of a repository and synchronizing of files in Visual Studio Code using the integrated GUI Git tools that are installed by default.  Let’s dive in and take a look at a couple of basic tasks most will want to accomplish – cloning and synchronizing files.

Use Git with Visual Studio Code

The first thing I like to do is install the Git for Windows installation that allows us to work with Git from the command line.  Below are screenshots of the installation, although I left everything at defaults.  The screenshots will show what those default are during the installation.

Git-Hub-for-Windows-Installation-begins Use Git with Visual Studio Code

Git Hub for Windows Installation begins

Choose-installation-directory-for-Windows-Git-Hub Use Git with Visual Studio Code

Choose installation directory for Windows Git Hub

Select-Git-Hub-for-Windows-components Use Git with Visual Studio Code

Select Git Hub for Windows components

Name-the-start-menu-program-group Use Git with Visual Studio Code

Name the start menu program group

Choose-PATH-statement-configuration-and-command-line Use Git with Visual Studio Code

Choose PATH statement configuration and command line

Choose-SSH-executable-for-Git-Hub-Windows Use Git with Visual Studio Code

Choose SSH executable for Git Hub Windows

Choose-HTTPS-transport-backend Use Git with Visual Studio Code

Choose HTTPS transport backend

Configure-line-endings-format Use Git with Visual Studio Code

Configure line endings format

Configure-Git-Hub-terminal-emulator Use Git with Visual Studio Code

Configure Git Hub terminal emulator

Configure-Git-Hub-extra-options Use Git with Visual Studio Code

Configure Git Hub extra options

Completing-Git-Hub-for-Windows-installation Use Git with Visual Studio Code

Completing Git Hub for Windows installation

Cloning Git Repository Visual Studio Code

For the purposes of the Git Hub Visual Studio Code walkthrough, I simply created a Test repository. Here we are logged into Git Hub and are getting the repository URL. We use this URL to clone the repository on our Visual Studio Code workstation.

Clone-Git-Hub-Repository-URL Use Git with Visual Studio Code

Clone Git Hub Repository URL

Now that we have our repo URL, we can clone the repository on our Visual Studio Code workstation to work with the code locally.  To do this we launch the Git CMD utility.   ***Note*** the directory you are currently inside of in the Git CMD Window is where the repository will be created.

Use-Git-Clone-command-to-clone-remote-repository Use Git with Visual Studio Code

Use Git Clone command to clone remote repository

As we can see our files that exist on the remote repository now exist in our local repository folder.

Remote-Git-Hub-Repo-cloned-locally Use Git with Visual Studio Code

Remote Git Hub Repo cloned locally

Open Local Git Repository Visual Studio Code

Now, to Visual Studio Code.  We click to Open Folder.  Point Visual Studio Code to the folder of your repository which for me was c:\users\%username%\documents\git\testrepo.

Open-Clone-Git-Hub-repo-folder Use Git with Visual Studio Code

Open Clone Git Hub repo folder

As we see below, we have our repository folder open and we see the correct files as they exist on GitHub.  I want to create a new Powershell file.  Click the new file with the + symbol to create a new file to work with.

Create-new-Git-Hub-file-local-repository Use Git with Visual Studio Code

Create new Git Hub file local repository

Stage and Commit changes from Visual Studio Code to Git

After creating a new file called test.ps1 and entering a few PowerShell lines, we want to stage our changes.

Creating-a-test-Git-Hub-file-local-repository Use Git with Visual Studio Code

Creating a test Git Hub file local repository

Hovering over the + sign next to our test.ps1 file we see the Stage Changes button.  Click it.  If you don’t choose to stage changes, you can still commit.  You will see a “warning-ish” message that you have no changes staged to commit, “would you like to automatically stage all your changes and commit them directly?”.  Staging first is the best practice for GitHub workflow.

Stage-changes-local-Git-Hub-repository Use Git with Visual Studio Code

Stage changes local Git Hub repository

Now, our changes are staged and ready to commit.  Next to the Source Control: GIT area at the top, we should see a “check mark” we can click.  If we hover over it, we will see the Commit button popup.

Commit-Git-Hub-staged-changes Use Git with Visual Studio Code

Commit Git Hub staged changes

To commit our changes, type commit in the box that pops up and hit Enter as the directive mentions.

Type-commit-and-enter-to-finalize-the-commit Use Git with Visual Studio Code

Type commit and enter to finalize the commit

After doing that, we will notice at the bottom left hand corner, we will see the “1” show up in the up arrow or changes to be synchronized to our remote repository.  Click the little synchronize changes arrow to sync the changes.

Changes-show-to-be-synchronized-to-Git-Hub Use Git with Visual Studio Code

Changes show to be synchronized to Git Hub

A Visual Studio Code warning will pop up alerting this action will push and pull commits to and from ‘origin/master’.

Verify-push-and-pull-commits-to-GitHub Use Git with Visual Studio Code

Verify push and pull commits to GitHub

We will be prompted to login to our GitHub account.

Login-to-GitHub Use Git with Visual Studio Code

Login to GitHub

After providing credentials and waiting just for a moment, we can refresh our GitHub repository and we should be able to see our new file that was synchronized.

Verify-our-test-file-is-synchronized-with-GitHub Use Git with Visual Studio Code

Verify our test file is synchronized with GitHub

This works in reverse as well.  I created a test2.ps1 file on the remote GitHub repository and synchronized changes.  After synchronizing, I saw the test2.ps1 file locally in Visual Studio Code.

File-created-on-GitHub-remote-is-synchronized-locally Use Git with Visual Studio Code

File created on GitHub remote is synchronized locally

Thoughts

Visual Studio Code is now my preferred PowerShell code editor of choice.  Features such as the tight integration with Git, make it an excellent choice for version control.  There are a lot of PowerShell features and functionality built in and it is sure to only get better.  New versions of Visual Studio Code are being released quite regularly.  I love the look and feel of the interface as well.  Do yourself a favor if you haven’t checked Visual Studio Code out yet to grab a copy and start playing around with the features/functionality, especially with Git integration.