Git With Visual Studio Code

Previously we looked at how Git works through GIT GUI and Sourcetree. At this point you might be asking - so I need to have my code editor and a separate tool open to mange the Git stuff?

No. Many code editors support Git operations straight out-of-the-box. Visual Studio Code is no exception, so let's take a look at how it looks like in there.

The Git Tab

Open the same folder/repository we used previously, with Visual Studio Code. If you haven't changed the layout, then the GIT or "Source Control" tab should be the 3rd on from the top, on the left side of Visual Studio Code. Click it.

Now you should see no changes, which is good, because we haven't changed anything after the last commit.

Time to Commit

Let's add some changes to the text file, to see how Git control works in Visual Studio Code.

So just change the text and as soon as you save the file, you will see a "1" pop up next to the Source Control tab icon on the left side.

Now when you navigate to Source Control again, you will see the text file as the file that has a change in it.

To stage the file, you can right click on it and select "Stage Changes". Additionally you can choose to discard any changes from individual files that you don't want to commit, by selecting "Discard Changes" instead.

After pressing "Stage Changes" you will notice, that the file is now under the "Staged Changes" dropdown.

To create the commit description, you can just type in the text input at the top, just below where it says "Source Control". Once you're done, just click the "check" icon or press CTRL + Enter.

Commit History

Now you probably might be wondering - how to see the Git commit history?

Simply navigate to the file explorer tab again and at the very bottom of the dropdowns, you will see a "TIMELINE" dropdown. Once you expand that, there's your commit history.

Checking Out a Commit

To check out a specific commit (like before) you will have to copy the commit id via right-click and then open a terminal aka command line interface (CLI) and type:

git checkout <commit_id>

then just press "Enter" to execute this command.

After you check out a specific commit, you will notice that the Timeline is now displaying only the commits up until the one you checked out. If you wish to return to the latest version, click the commit id that is at the very bottom left and then select "master".

Additionally

There are many Visual Studio Code extensions in the "Extensions" tab on the left, just type "git" in the search box to find all of them.

You can check out the documentation about Git from the Visual Studio Code team themselves.