Using Git In Visual Studio

Posted on by



View a Git Graph of your repository, and easily perform Git actions from the graph. Configurable to look the way you want!

Features

  • Git Graph View:
    • Display:
      • Local & Remote Branches
      • Local Refs: Heads, Tags & Remotes
      • Uncommitted Changes
    • Perform Git Actions (available by right clicking on a commit / branch / tag):
      • Create, Checkout, Delete, Fetch, Merge, Pull, Push, Rebase, Rename & Reset Branches
      • Add, Delete & Push Tags
      • Checkout, Cherry Pick, Drop, Merge & Revert Commits
      • Clean, Reset & Stash Uncommitted Changes
      • Apply, Create Branch From, Drop & Pop Stashes
      • View annotated tag details (name, email, date and message)
      • Copy commit hashes, and branch, stash & tag names to the clipboard
    • View commit details and file changes by clicking on a commit. On the Commit Details View you can:
      • View the Visual Studio Code Diff of any file change by clicking on it.
      • Open the current version of any file that was affected in the commit.
      • Copy the path of any file that was affected in the commit to the clipboard.
      • Click on any HTTP/HTTPS url in the commit body to open it in your default web browser.
    • Compare any two commits by clicking on a commit, and then CTRL/CMD clicking on another commit. On the Commit Comparison View you can:
      • View the Visual Studio Code Diff of any file change between the selected commits by clicking on it.
      • Open the current version of any file that was affected between the selected commits.
      • Copy the path of any file that was affected between the selected commits to the clipboard.
    • Code Review - Keep track of which files you have reviewed in the Commit Details & Comparison Views.
      • Code Review's can be performed on any commit, or between any two commits (not on Uncommitted Changes).
      • When a Code Review is started, all files needing to be reviewed are bolded. When you view the diff / open a file, it will then be un-bolded.
      • Code Reviews persist across Visual Studio Code sessions. They are automatically closed after 90 days of inactivity.
    • View uncommitted changes, and compare the uncommitted changes with any commit.
    • Hover over any commit vertex on the graph to see a tooltip indicating:
      • Whether the commit is included in the HEAD.
      • Which branches, tags and stashes include the commit.
    • Filter the branches shown in Git Graph using the 'Branches' dropdown menu. The options for filtering the branches are:
      • Show All branches
      • Select one or more branches to be viewed
      • Select from a user predefined array of custom glob patterns (by setting git-graph.customBranchGlobPatterns)
    • Fetch from Remote(s) (available on the top control bar)
    • Find Widget allows you to quickly find one or more commits containing a specific phrase (in the commit message / date / author / hash, branch or tag names).
    • Repository Settings Widget:
      • Allows you to view, add, edit, delete, fetch & prune remotes of the repository.
      • Configure 'Issue Linking' - Converts issue numbers in commit messages into hyperlinks, that open the issue in your issue tracking system.
      • Configure 'Pull Request Creation' - Automates the opening and pre-filling of a Pull Request form, directly from a branches context menu.
        • Support for the publicly hosted Bitbucket, GitHub and GitLab Pull Request providers is built-in.
        • Custom Pull Request providers can be configured using the Extension Setting git-graph.customPullRequestProviders (e.g. for use with privately hosted Pull Request providers). Information on how to configure custom providers is available here.
      • Export your Git Graph Repository Configuration to a file that can be committed in the repository. It allows others working in the same repository to automatically use the same Git Graph configuration.
    • Keyboard Shortcuts (available in the Git Graph View):
      • CTRL/CMD + F: Open the Find Widget.
      • CTRL/CMD + H: Scrolls the Git Graph View to be centered on the commit referenced by HEAD.
      • CTRL/CMD + R: Refresh the Git Graph View.
      • CTRL/CMD + S: Scrolls the Git Graph View to the first (or next) stash in the loaded commits.
      • CTRL/CMD + SHIFT + S: Scrolls the Git Graph View to the last (or previous) stash in the loaded commits.
      • When the Commit Details View is open on a commit:
        • Up / Down: The Commit Details View will be opened on the commit directly above or below it on the Git Graph View.
        • CTRL/CMD + Up / CTRL/CMD + Down: The Commit Details View will be opened on its child or parent commit on the same branch.
          • If the Shift Key is also pressed (i.e. CTRL/CMD + SHIFT + Up / CTRL/CMD + SHIFT + Down), when branches or merges are encountered the alternative branch is followed.
      • Enter: If a dialog is open, pressing enter submits the dialog, taking the primary (left) action.
      • Escape: Closes the active dialog, context menu or the Commit Details View.
    • Resize the width of each column, and show/hide the Date, Author & Commit columns.
    • Common Emoji Shortcodes are automatically replaced with the corresponding emoji in commit messages (including all gitmoji). Custom Emoji Shortcode mappings can be defined in git-graph.customEmojiShortcodeMappings.
  • A broad range of configurable settings (e.g. graph style, branch colours, and more...). See the 'Extension Settings' section below for more information.
  • 'Git Graph' launch button in the Status Bar
  • 'Git Graph: View Git Graph' launch command in the Command Palette

Extension Settings

Detailed information of all Git Graph settings is available here, including: descriptions, screenshots, default values and types.

A summary of the Git Graph extension settings are:

  • Commit Details View:
    • Auto Center: Automatically center the Commit Details View when it is opened.
    • File View:
      • File Tree:
        • Compact Folders: Render the File Tree in the Commit Details View in a compacted form, such that folders with a single child folder are compressed into a single combined folder element.
      • Type: Sets the default type of File View used in the Commit Details View.
    • Location: Specifies where the Commit Details View is rendered in the Git Graph View.
  • Context Menu Actions Visibility: Customise which context menu actions are visible. For more information, see the documentation here.
  • Custom Branch Glob Patterns: An array of Custom Glob Patterns to be shown in the 'Branches' dropdown. Example: [{'name':'Feature Requests', 'glob':'heads/feature/*'}]
  • Custom Emoji Shortcode Mappings: An array of custom Emoji Shortcode mappings. Example: [{'shortcode': ':sparkles:', 'emoji':'✨'}]
  • Custom Pull Request Providers: An array of custom Pull Request providers that can be used in the 'Pull Request Creation' Integration. For information on how to configure this setting, see the documentation here.
  • Date:
    • Format: Specifies the date format to be used in the 'Date' column on the Git Graph View.
    • Type: Specifies the date type to be displayed in the 'Date' column on the Git Graph View, either the author or commit date.
  • Default Column Visibility: An object specifying the default visibility of the Date, Author & Commit columns. Example: {'Date': true, 'Author': true, 'Commit': true}
  • Dialog > *: Set the default options on the following dialogs: Add Tag, Apply Stash, Cherry Pick, Create Branch, Delete Branch, Fetch into Local Branch, Fetch Remote, Merge, Pop Stash, Pull Branch, Rebase, Reset, and Stash Uncommitted Changes
  • Enhanced Accessibility: Visual file change A|M|D|R|U indicators in the Commit Details View for users with colour blindness. In the future, this setting will enable any additional accessibility related features of Git Graph that aren't enabled by default.
  • File Encoding: The character set encoding used when retrieving a specific version of repository files (e.g. in the Diff View). A list of all supported encodings can be found here.
  • Graph:
    • Colours: Specifies the colours used on the graph.
    • Style: Specifies the style of the graph.
    • Uncommitted Changes: Specifies how the Uncommitted Changes are displayed on the graph.
  • Integrated Terminal Shell: Specifies the path and filename of the Shell executable to be used by the Visual Studio Code Integrated Terminal, when it is opened by Git Graph.
  • Keyboard Shortcut > *: Configures the keybindings used for all keyboard shortcuts in the Git Graph View.
  • Markdown: Parse and render a frequently used subset of inline Markdown formatting rules in commit messages and tag details (bold, italics, bold & italics, and inline code blocks).
  • Max Depth Of Repo Search: Specifies the maximum depth of subfolders to search when discovering repositories in the workspace.
  • Open New Tab Editor Group: Specifies the Editor Group where Git Graph should open new tabs, when performing the following actions from the Git Graph View: Viewing the Visual Studio Code Diff View, Opening a File, Viewing a File at a Specific Revision.
  • Open to the Repo of the Active Text Editor Document: Open the Git Graph View to the repository containing the active Text Editor document.
  • Reference Labels:
    • Alignment: Specifies how branch and tag reference labels are aligned for each commit.
    • Combine Local and Remote Branch Labels: Combine local and remote branch labels if they refer to the same branch, and are on the same commit.
  • Repository:
    • Commits:
      • Fetch Avatars: Fetch avatars of commit authors and committers.
      • Initial Load: Specifies the number of commits to initially load.
      • Load More: Specifies the number of additional commits to load when the 'Load More Commits' button is pressed, or more commits are automatically loaded.
      • Load More Automatically: When the view has been scrolled to the bottom, automatically load more commits if they exist (instead of having to press the 'Load More Commits' button).
      • Mute:
        • Commits that are not ancestors of HEAD: Display commits that aren't ancestors of the checked-out branch / commit with a muted text color.
        • Merge Commits: Display merge commits with a muted text color.
      • Order: Specifies the order of commits on the Git Graph View. See git log for more information on each order option.
      • Show Signature Status: Show the commit's signature status to the right of the Committer in the Commit Details View (only for signed commits). Hovering over the signature icon displays a tooltip with the signature details.
    • Fetch and Prune: Before fetching from remote(s) using the Fetch button on the Git Graph View Control Bar, remove any remote-tracking references that no longer exist on the remote(s).
    • Fetch And Prune Tags: Before fetching from remote(s) using the Fetch button on the Git Graph View Control Bar, remove any local tags that no longer exist on the remote(s).
    • Include Commits Mentioned By Reflogs: Include commits only mentioned by reflogs in the Git Graph View (only applies when showing all branches).
    • On Load:
      • Scroll To Head: Automatically scroll the Git Graph View to be centered on the commit referenced by HEAD.
      • Show Checked Out Branch: Show the checked out branch when a repository is loaded in the Git Graph View.
      • Show Specific Branches: Show specific branches when a repository is loaded in the Git Graph View.
    • Only Follow First Parent: Only follow the first parent of commits when discovering the commits to load in the Git Graph View. See --first-parent to find out more about this setting.
    • Show Commits Only Referenced By Tags: Show Commits that are only referenced by tags in Git Graph.
    • Show Remote Branches: Show Remote Branches in Git Graph by default.
    • Show Remote Heads: Show Remote HEAD Symbolic References in Git Graph.
    • Show Stashes: Show Stashes in Git Graph by default.
    • Show Tags: Show Tags in Git Graph by default.
    • Show Uncommitted Changes: Show uncommitted changes. If you work on large repositories, disabling this setting can reduce the load time of the Git Graph View.
    • Show Untracked Files: Show untracked files when viewing the uncommitted changes. If you work on large repositories, disabling this setting can reduce the load time of the Git Graph View.
    • Sign:
      • Commits: Enables commit signing with GPG or X.509.
      • Tags: Enables tag signing with GPG or X.509.
    • Use Mailmap: Respect .mailmap files when displaying author & committer names and email addresses.
  • Repository Dropdown Order: Specifies the order that repositories are sorted in the repository dropdown on the Git Graph View (only visible when more than one repository exists in the current Visual Studio Code Workspace).
  • Retain Context When Hidden: Specifies if the Git Graph view Visual Studio Code context is kept when the panel is no longer visible (e.g. moved to background tab). Enabling this setting will make Git Graph load significantly faster when switching back to the Git Graph tab, however has a higher memory overhead.
  • Show Status Bar Item: Show a Status Bar Item that opens the Git Graph View when clicked.
  • Source Code Provider Integration Location: Specifies where the 'View Git Graph' action appears on the title of SCM Providers.
  • Tab Icon Colour Theme: Specifies the colour theme of the icon displayed on the Git Graph tab.

This extension consumes the following settings:

  • git.path: Specifies the path and filename of a portable Git installation.

Extension Commands

This extension contributes the following commands:

  • git-graph.view: Git Graph: View Git Graph
  • git-graph.addGitRepository: Git Graph: Add Git Repository... (used to add sub-repos to Git Graph)
  • git-graph.clearAvatarCache: Git Graph: Clear Avatar Cache
  • git-graph.endAllWorkspaceCodeReviews: Git Graph: End All Code Reviews in Workspace
  • git-graph.endSpecificWorkspaceCodeReview: Git Graph: End a specific Code Review in Workspace... (used to end a specific Code Review without having to first open it in the Git Graph View)
  • git-graph.fetch: Git Graph: Fetch from Remote(s) (used to open the Git Graph View and immediately run 'Fetch from Remote(s)')
  • git-graph.removeGitRepository: Git Graph: Remove Git Repository... (used to remove repositories from Git Graph)
  • git-graph.resumeWorkspaceCodeReview: Git Graph: Resume a specific Code Review in Workspace... (used to open the Git Graph View to a Code Review that is already in progress)
  • git-graph.version: Git Graph: Get Version Information

Release Notes

Detailed Release Notes are available here.

Visual Studio Marketplace

This extension is available on the Visual Studio Marketplace for Visual Studio Code.

Acknowledgements

Thank you to all of the contributors that help with the development of Git Graph!

Some of the icons used in Git Graph are from the following sources, please support them for their excellent work!

  • GitHub Octicons (License)
  • Icons8 (License)

Using Version Control in VS Code. Visual Studio Code has integrated source control management (SCM) and includes Git support in-the-box. Many other source control providers are available through extensions on the VS Code Marketplace. I finally managed to make it work, using PuTTY's Pageant authentication agent instead of ssh-agent, and following the steps mentioned here (it's for Visual Studio Code, but works for Visual Studio 2017 and I guess it should work for any application that uses the 'official' Git for Windows). This will make Visual Studio essentially a Git-only tool. If you want to open code files, then you can load the solution or folder later. Preference to load code when opening repositories. Pending changes. The Changes button in the status bar shows the number of changed files that haven’t been committed yet. It provides a shortcut to open the.

Disclaimer: I’m not a Git guru, so information in this post might not be the most accurate, it just works on my machine and wanted to share my experience.

I take for granted that you are a Visual Studio user, that you use Git using the Visual Studio plugin and, like me, have the need to work on projects where you need to share code hosted in its own separate repository among different solutions.
I know that there are several solutions for this, as example using Nuget packages for shared code, but none of them reaches the flexibility that using source code offers, both in terms of debugging and real time bug fixing.
Ok, not ‘technically correct’ I know, but it works, and I love things that works and make my life easier.
Since I’m not the only one with this need I checked online and found that, among different alternatives, the most voted one (with also several opponents indeed) is to use Git SubModules that, to make it simple, are nothing more than repositories embedded inside a main repository.
In this case, the submodule repository is copied into a subfolder of main one, and information about the original module are also added to main repository this means that when you clone the main project also all submodules are cloned.

Using Git In Visual Studio

Submodules in action
Let’s create our fist project that uses a git submodule, fasten your seat belt and enjoy the journey.

I’ve created two UWP projects (but you can use any kind of project of course…) a main UWP application SubModulesApp and a UWP library named SubModulesLib, each one has its own repository hosted on github.com.
I now have the need that SubModulesApp must use some services contained inside SubModules lib and once I start using the lib, is evident that both repos will have a string relationship so, even if i could keep them separated and just reference local SubModulesLib project from main app, the best solution is to create a submodule, this also gives us the benefit to keep submodule on a different commit compared to the ‘master’ one in case we need it.

Let’s start and open our empty app in Visual Studio:

Now open a Visual Studio command prompt at solution folder, if you use Visual Studio PowerCommands, just right click the solution node and select Power Command –> Open Command Prompt.
Let now type: git submodule add <Path to your git repository> <foldername> and your project will be cloned into <foldername>

here’s an example of what I’ve got on my machine

and here’s project folder structure

Now you can add the Lib project inside MyAwesomeLib folder to SubModulesApp project

Consume the Lib services and push everything back to github.

Let’s now make an important test: What if lib author updates the code in SubModulesLib? will I get the changes if when I pull SubModulesApp?
To test it I’ve added a comment to MyCalculator.cs class and pushed the change back to original repository, I then pulled the SubModulesApp that uses the lib as submodules and, unfortunately, the change is not there so, it looks like that what we get here is a copy, or, to better say, something not pointing to the latest commit.
To see the changes we need to open the solution from inside our nested folder (in this case MyAwesomeLib) and pull the changes from there, totally annoying stuff that could be avoided if Git plugin for Visual Studio would support multiple repositories (please vote for this feature here: https://visualstudio.uservoice.com/forums/121579-visual-studio-ide/suggestions/8960629-allow-multiple-git-repositories-to-be-active-at-on)
What about the opposite? If I do a modification of code inside a submodule, will it be pushed back to the original repository? (in our case from inside SubModuleApp solution) unfortunately not, as before you need to push changes from the instance of Visual Studio that hosts the SubModuleLib residing inside MyAwesomeLib folder doing that properly aligns the original source repository.

All this works because we are working on the project where submodule was created, if someone else need to clone and work on the same project the following steps must be done:

Git For Visual Studio

1-Clone the project from Visual Studio (or manually if you’re an hypster…)
2-Open a VS Command Prompt at solution level and issue this command: git submodule update –init –recursive
3-Open each submodule under main solution, and checkout the associated branch using Visual Studio plugin (you will see that it results in detached state)

Visual Studio Git Repository Window

Now your cloned solution’s submodules are attached to original repositories and everything works as previously described.

Visual Studio Connect To Git

A bit tricky for sure, at least until Visual Studio Git plugin won’t support multiple repositories. but once project is properly initialized is just a matter of remembering to open the submodule project each time you need to interact with git.