Git Support in VS Code

DZone 's Guide to

Git Support in VS Code

Visual Studio Code comes with native support for Source Control systems. So, let's see how it integrates with Git, shall we?

· Web Dev Zone ·
Free Resource

Image title

Originally, Visual Studio Code came with native support for Git, but recently, in order to allow support for other systems, the source control support also became an external plugin. At the moment, there are six SCM providers.

Let's have a look at my favorite features of the Git support in Visual Studio Code.

The one I like the most, and which was just recently added, is the visual representation of which files have changed, directly in the file explorer view.

enter image description here

Another feature I like is the diff view, which can be both side-by-side or inline.

enter image description here enter image description here

And diff can also be displayed by simply clicking on the gutter.

enter image description here

Another feature I like is the easy procedure for committing code: just type the message and you can commit all the changes. Or you can also choose which changes to commit.

enter image description here

And once committed, the status bar shows that there is a pending commit.

enter image description here

Also, most of the git commands are accessible in the command palette, like branch, checkout, clone, merge, commit, etc.

enter image description here

But to really enhance the experience using Git in VS Code, I recommend also checking out two very useful extensions:

  • Git history which adds, as the name suggests, the possibility of reading the change logs, comparing between commits, and seeing a graph of all commits, branches, and merges.
  • Git Lens which adds code lens features (so small overlay next to lines of code showing when and by whom it was changed) and much more.
git ,vs code ,web dev

Published at DZone with permission of Simone Chiaretta , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}