VS Code & Version Control

V)S Code has Git Version Control built into the editor when you install it. You can also install other source control systems from the marketplace.

Other Version Control System Integrations for VS Code

  • Mercurial – here
  • Preforce – here
  • SVN – here
  • Team Server Foundation – here
  • Note: you must have Team Foundation Server 2015 Update 2 or later

Entire list of SVM Marketplace Extensions or while in VS Code type Install Additional SCM Providers

Let’s take a look specifically at the Git support VS Code offers.

Git Integration

This article will assume you have basic knowledge of Git, if not feel free to checkout GitHub’s Git Tutorial here. It allows you to become familiar with Git and Git commands without needing to download anything – it’s all done right in the browser!

This also assumes you have already installed the Git client (grab it from here).

Let’s dive in!

Features in the activity bar

Remeber the Activity bar we saw in Navigating VS Code the Source control icon (Ctrl+Shift+G). This feature will display an overview of the changes made to your repository. You will be able to view the details like changes, staged changes, and merge changes.

vscode-git1.png

Clicking on any of these will provide further details on the changes. 

Features in the status bar

Remeber the Status bar we saw in Navigating VS Code – well here we can also see details regarding the status of our repository changes. We can view our current branch, your modified tracked files and staged changes, along with commits.

vscode-branch.png

The status bar allows us to switch between branches or even create a new branch on the fly.

There is also the Synchronize changes action in the Status Bar. When there is an available upstream branch configured you can synchronize with it. You can pull down the remote changes to your local copy and/or push your local changes to the upstream branch. When no upstream is available, then you will have a Publish action available to set up with a remote repository.

 

Commit actions

Hit the ... menu on the top of the Git view to see all available actions. These actions include pull, push, commit, stage, etc.

undo last commit

We can quickly go from our changes to stage changes by hovering over the number of files and with the click of the + button.

git stage all

You can also stage a portion of a file by selecting and then choosing Stage Selected Ranges from the command palette.

 

Resolve merge conflicts and git diff

During a merge, click the Source Control button in the Activity Bar and make changes in the diff view. Select and accept current, incoming or both changes in just one click.

merge conflicts 

Differences are highlighted and you are presented with various actions to accept.

resolve merge conflicts

git diff 

Git diff is also supported in VS Code. You can view side by side or inline.

side by side 

vscode-sideside1.png vscode-sideside2.jpg

inline

vscode-inline.png

Clone or initialize repository

To clone a repository, you can run a Git Clone command from the command palette Ctrl+Shift+P

To initialize a repository,  you can run an Initialise Git Repository command from the command palette and the necessary metadata will be created.

vscode-initializegit.png

Default Git configuration in workspace settings

// Git

  // Whether auto fetching is enabled
  "git.autofetch": false,

  // Whether auto refreshing is enabled
  "git.autorefresh": true,

  // Controls what type of branches are listed when running `Checkout to...`. `all` shows all refs, `local` shows only the local branchs, `tags` shows only tags and `remote` shows only remote branches.
  "git.checkoutType": "all",

  // Confirm before synchronizing git repositories
  "git.confirmSync": true,

  // Controls the git badge counter. `all` counts all changes. `tracked` counts only the tracked changes. `off` turns it off.
  "git.countBadge": "all",

  // Controls if Git contributes colors and badges to the explorer and the open editors view.
  "git.decorations.enabled": true,

  // The default location where to clone a git repository
  "git.defaultCloneDirectory": null,

  // Enables commit signing with GPG.
  "git.enableCommitSigning": false,

  // Whether git is enabled
  "git.enabled": true,

  // Commit all changes when there are no staged changes.
  "git.enableSmartCommit": false,

  // Ignores the legacy Git warning
  "git.ignoreLegacyWarning": false,

  // Ignores the warning when there are too many changes in a repository
  "git.ignoreLimitWarning": false,

  // Ignores the warning when Git is missing
  "git.ignoreMissingGitWarning": false,

  // Path to the git executable
  "git.path": null,

 

Multiple source control integrations

VS Code is capable of handling multiple source control integrations across various projects. The source control providers list shows the providers and repos.

vscode-multiplesources.png

That’s it for my overview of using Git with VS Code. Stay tuned for building an extension for VS Code for Day 5!

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