Welcome to this review of the Version Control and Git module from the Pluralsight Course Visual Studio Code by John Papa

Version Control and Git

Code Integration with Version Control and Git

This module looks at the functionality available for Git

If you don’t already have Git installed you can download it from
http://git-scm.com/download

John says of course we don’t need to use VS Code for Git if we prefer to use another tool such as Source Tree or smart git.

However I find having Version Control built in to the editor can aid productivity: no need to switch between windows.

John lists some popular online Git providers:

• Github
• VS online
• Bitbucket

VS Code works with any provider you want to use.

Touring Code’s Git Features

We see an example of changes shown in Visual Studio Code, with staged changes and regular changes.

VS Code uses different colors to make it easy to see what types of changes you have:
Red – Deleted file
Blue – Modified file
Grey – unstaged new file

We can see which branch we are using at the bottom left hand corner.

Working with Version Control

John gives a demonstration, modifying a file, viewing the difference inline and side by side.

We then see how to stage our changes with the + button and unstage them with the – button.

John also shows us how to clean changes which resets them back to their original state.

There’s another way to do this for our changes – clicking the undo button beside the + button

If we have any changes staged then we need to unstage them before we can revert them (clean them).

We also see how to commit changes: hightlight the staged file(s) and add a commit message above.
John shows us that we can do a multiline commit and then press cmd + enter when we are ready to commit locally.

John decides he’s changed his mind and does a commit removing the newly added file.
We see that as an alternative to cmd + enter we can click on the … more button and choose from the dropdown options.

John also shows how easy it is to create a new Git branch:

“git checkout develop”

We can also switch back to the master branch just by clicking on the master option.

Also in this clip, John explains how Visual Studio Code denotes the differences between different versions of a file.
We see blue lines for modifications and green lines for added. We see a red arrow meaning deleted line(s). These are called gutter indicators.

Git Output

In the git panel, one of the … more dropdown options is “Show Git Output”.
When we click this we see the “Output for ‘Git'” window which outputs all of the commands that execute as we perform GUI commands.

We can use this to learn the git commands for common operations, or if you are an experienced Git user, for checking that the commands are those that you expect them to be.

In this clip we see the commands:

– git add
– git show
– git branch
– git reset
– git clean
– git checkout

Creating a New Local and Remote Repository from Scratch

John creates an Angular project using Bower, and then clicks the Git icon.
It says “This workspace isn’t yet under git source control.” and has an “Initialize git repository” button.

John clicks this button and we see all of the changes. We see how to create a .gitignore file to remove the bower components.

You can find John’s Angular Style Guide and VS Code Snippets at https://github.com/johnpapa/angular-styleguide and this is covered fully in his “Angular: Clean Code” course
John uses a snippet for app.js and renames it the controller to HomeController

We see that we can use Emmett to accelerate our HTML development.

John installs http-server using the command

$ npm install http-server -g

http-server runs a basic server on port 8080 and we see “Hello World” displayed for the URL localhost:8080

So we have a basic work app in our local repository and John now shows us how to push this up to Github. Github gives you a code snippet to help make this easy.

Once this is on Github, three new options show in the … dropdown:

– Sync
– Pull
– Push

Sync does a pull followed by a push. This works with BitBucket and VS Online as well.

Git Credentials

If you haven’t setup your Credentials yet with your Git remote, you will see “Authentication Required”

See https://help.github.com/articles/caching-your-github-password-in-git/

John also gives a quick summary of everything we covered in this module.