We’re thrilled to welcome Visual Studio Code to the list of supported IDE’s! This marks a milestone in our journey to make code collaboration interoperable across IDE’s. Let us take a quick tour through the extension and its features.

Installation process

To install TeamHub in Visual Studio Code you simply need to bring up the extension view in VS Code by clicking on the Extension icon and searching for “TeamHub” in the search box.

Installation TeamHub in VSCode

After you have installed the extension, you will be asked to sign-in using your repository hosting service such as GitHub, Bitbucket or GitLab depending on where the project you have open is hosted. Additionally, if you are the repository admin, you’ll need to install TeamHub on the account or organization you want to collaborate on.

Once installed, your team members will be visible in your IDE. Simply click on the TeamHub icon in the side bar and you’ll see TeamHub’s Team View appear.

Feature overview

Let’s take a closer look at all the TeamHub features available to you and your team.

Team View

As mentioned, the TeamHub plugin adds the Team View to Visual Studio Code

Team View in VSCode

Icon Status
Icon in online state Online
Icon in away state Away
Icon in offline state Offline

The Team View allows you to see which of your teammates is online, away or offline. If you rollover a teammate’s name you’ll see a set of icons appear:

Icon Functionality
Watch Feature Watch your teammate code in real-time
Open Profile in GitHub Open Profile in GitHub
Open Profile in Bitbucket Open Profile in Bitbucket
Open Profile in GitLab Open Profile in GitLab

Watching a teammate will open their current file and show their caret as well as update the file in real-time as they type, scroll and select text. If they change files the new file will automatically open in VSCode.

Working copies

Expanding a teammate’s node will show their working copies

Working copy TeamHub

TeamHub displays all of your teammates’ working copies for the repositories that you share read access to. If your teammate is not active in a working copy, its last known state is still visible if it contains uncommitted changes.

Rolling over a working copy will show three icons:

Icon Functionality
Smiley face Compare your teammate’s branch to default branch
Smiley face Create a pull request
Smiley face Open branch in your repository hosting service

These will open the relevant page on your repository hosting service in the browser.

Changed Files

Expanding a working copy will show the changed files.

Changed Files in TeamHub

File-level presence shows your teammate’s current file (the one with the little white dot). As teammate’s change the active editor tab or IDE window their current file is instantly updated on TeamHub.

This comes in handy when your teammate asks you a question related to the code they’re currently working on and you want to take a look at the code before answering.

Fan of git diff --stat? The number of lines added and deleted (denoted by the + and - symbols) show beside each file. For those of you not acquainted with this git command, a changed line is denoted with both a + and - together.

To open a teammate’s file simply click on the file you’re interested in. You’ll also like the change markers that appear in the left gutter between line number and line start. They show the changes a teammate has made to a file which has not yet been committed.

Open File VSCode

In addition to simply opening a teammates’s file, rolling over a changed file in the Team View will show two icons:

Icon Functionality
Icon in online state Show diff
Icon in away state Open Profile in GitHub/GitLab/Bitbucket

Show Diff will open a live diff view, which updates in real-time as your teammate is typing:

Open Diff VSCode

Similar to working copies, you can also open files in your repository hosting service by clicking on Open in GitHub/Bibucket/GitLab.

Titlebar

To finish, let’s look at the functionalities contained in the titlebar.

Titlebar VSCode

If you don’t want your teammates to see what you’re working on (maybe while you’re experimenting) you can enable the incognito mode by clicking on the incognito mode in the title bar.

TeamHub automatically synchronizes your team and their repository access with your hosting service. There can be a delay in syncing so if you find you are missing a teammate or repository in the Team View, hit Sync in the title bar.

NOTE: As this is a major version update make sure your whole team upgrades, all team members need to use the same major version of the plugin otherwise you may find some features do not work correctly.

Let us know what you think about our VS Code plugin in the comments. We want to hear how we can make TeamHub better for you!

Joining our slack channel will also give you early access to the newest builds before they are released on the VS Code marketplace.