Real-time collaboration made easy with VS Live Share

Written by grgur | Published 2018/06/28
Tech Story Tags: javascript | visual-studio-code | remote-working | vs-live-share | collaboration

TLDRvia the TL;DR App

Remote pair programming made easy with VSCode Live Share

Visual Studio Live Share makes real-time collaborative editing and debugging easier than ever. Distributed and co-located teams now enjoy a fast, feature-packed experience of:

  • Pair programming
  • Remote debugging
  • Training
  • Small workshops
  • Interviewing job candidates
  • Onboarding team members

Setting up Visual Studio Live Share

Visual Studio Code is one of the most popular open source projects on GitHub. The Live Share extension brings remote collaboration to the IDE and its huge user base.

Setting up VS Live Share is as simple as installing any other Visual Studio or VS Code extension. The installation process prompts users to sign in using their Microsoft or GitHub credentials in order to properly identify participants.

There are two types of users in all collaboration activities when using Live Share: a host and one or more guests. The ability to connect more than two parties in a single collaboration session is especially remarkable.

All sessions get an easy-to-share link

Live Share sessions are identified with a unique ID. The host can send the ID or a generated link to the clients. By default, anyone with the link or ID can connect to the session. VS Code sports a handy configuration option that lets the host approve every connected guest.

"liveshare.guestApprovalRequired": true

The host can control who connects to the session

Once guests are allowed in, the host can see active guests together with the files they are working on at the moment.

List of active guests shows what they are editing

Protip: While the host can see the list of all connected guests, it’s not possible to remove a specific guest once they were allowed at this time.

Users can be rejected from joining, but cannot be disconnected during a session

Centralized code sharing

The host shares the codebase with guests in real-time. There’s no need to give access to the code repository since files are accessed directly from the host’s machine.

Centralized code sharing unlocks many benefits of VS Live Share. It allows almost instantaneous access to the project while maintaining a working setup and environmental settings.

Guests keep all of their IDE settings, including extensions and syntax highlighting. There are virtually no prerequisites that guests would have to meet. Yes, that means no need to have a specific version of Node installed, a database spun up with seed data or a set of Docker containers running on the guest’s computer. The goal is to share, and Live Share delivers precisely that!

Interaction during active sessions

Teams of two or more can work on the same file or can choose to navigate the file and folder structure independently. If they are in the same file, Live Share makes it easy to follow the cursor of other participants.

It’s easy to see what collaborators are working on

Participants have the option to request other parties to focus on them. Focusing is a useful feature that brings all participants to a targeted file.

Once two or more participants are in the same file, they can Follow one another. Following means that the observer’s editor mirrors the followed user’s IDE. It comes in handy with larger files where it makes it easy to follow scrolling and changes in real-time.

Team members can request others to follow their work

Interaction in the form of text messages or voice communication is currently unavailable. While there are plenty of standalone applications made for remote communication, it would be helpful to have a lightweight chat client during a Live Share session.

Secure file sharing in Live Share

Sometimes we want to keep sensitive files away from the guests. You can exclude and include content by adding a .vsls.json file.

Here’s an example .vsls.json file:

{"$schema": "http://json.schemastore.org/vsls","gitignore":"exclude","excludeFiles":[".env",".vscode","!node_modules"],"hideFiles": ["build","node_modules"]}

The excludeFiles property lets you list all the files or folders that you don’t want guests to access. hideFiles is less strict and merely hides that file or folders from the navigation tree. The difference between hiding and excluding is in the ability to see a hidden file’s content when an action like Follow is used. The excluded files always show as blank even when the host wants guests to Follow.

Protip: It’s easy to forget which files are excluded. In an event of having the guests Follow the host on an excluded file, the guests will see a blank file, but will still be able to type in it. The typed text will end up prepended to the excluded document, which only the host will see.

Make sure you have a look at the official security guide before you start your first session.

Live debugging

Remote debugging works perfectly in Live Share. Since the host centrally shares all of the code and the environment, sharing debugging resources is made simple. The same debugging workflow Visual Studio users are already familiar with applies to all participants of a Live Share session.

While being able to debug a remotely running application is nothing short of magical, the real beauty comes from the realization that guests do not have to install anything to enjoy a fully-featured debugging session.

Terminal Sharing

Sharing terminal is undoubtedly one of the most exciting features of Live Share. Hosts can share their terminal in read-only or read-write mode. The shared terminal contains all of the host’s settings, such as zsh customizations or history.

Terminal sharing is one of the most thrilling Live Share features

As exciting as this feature is, it comes with a great deal of risk, especially if enabling read-write access. Nothing can prevent a malicious user from executing a dangerous terminal command, which is something hosts need to know before giving the write permission.

Shared terminals stack up

Protip: Since all participants share terminal instances, the read-write mode will allow everyone to type in the same line. There are no cursor marks in the terminal so it’s impossible to tell who wrote a command. See issue #596.

When the host decides to share terminal, the IDE creates a new instance. The takeaway with this behavior is that switching from a read-write to a read-only terminal is not possible. Since Visual Studio creates a new instance each time, guests can switch back to a previous terminal instance and continue using it with the original privileges.

Protip: Trash a shared terminal window when you no longer need it.

We created a couple of issues to help secure shared terminal session. See issues #600 and #601.

Connectivity

VS Live Share uses RPC communication via a direct peer-to-peer connection. Cloud relay serves as a fallback when a direct connection fails.

In real life, a Modus Create team tested Live Share with 4 simultaneous users on three continents, and we could barely notice any latency.

Protip: Live share currently supports up to 5 simultaneous participants for performance reasons

Rely on Source Control Management

Frequent saving and code commits are very important during a Live Share session because Live Share’s undo functionality is unreliable. With multiple users writing code and their IDE extensions and customizations, it’s easy to end up with an awkwardly formatted code, or unsatisfactory changes. Cmd+Z (or Ctrl+Z) for undo is likely to fail as Live Share doesn’t track combined change history for users in a session.

Protip: participants may want to disable auto-formatting extensions as they may conflict with another participant’s settings. No one wants an infinite auto-formatting loop. See issue #568.

The goal of Live Share is to solve immediate issues or transfer knowledge. Working on features with team members is still best done using the proven workflows such as committing code to the repository. That’s why quirky undo functionality shouldn’t be a show stopper.

Team reactions

The Modus team is very excited about Live Share. It’s a fantastic tool for pair programming & debugging, walkthroughs with customers, onboarding new team members, interviewing, and even light training.

Live Share makes pair programming with junior developers 10x easier AND more productive (Lucas S.)

There have been other cloud pairing IDEs, but now I can use my favorite editor, my color scheme, and all the plugins that I love (Akash A.)

Summary

Live Share brings remote teams together with a set of features that every developer can appreciate:

  • An easy way to connect remote team members
  • A good set of options to configure security
  • Fully-featured remote debugging capabilities
  • Terminal sharing

Definitely give Live Share a try. When you do, make sure you:

  • Trash shared terminal sessions when they are no longer necessary
  • Don’t rely on undo functionality
  • Read up on security before starting your first session
  • Configure Visual Studio to prompt the host to allow connecting guests

Working in distributed environments is in Modus’ DNA. We have the luxury of working with the best talent no matter their location on the planet. Live Share is a powerful utility in our toolkit for 7th hour-295 a successful distributed culture. Try it out and give back your own Protips.


Published by HackerNoon on 2018/06/28