How To use Live Share with Visual Studio Code

Introduction

Live Share is an extension for Visual Studio Code that enables real-time collaboration between developers. It gives users the ability to share a session with someone else, allowing them to edit code as well as share a server and debugging session.

As you progress through this article you will see screenshots from two different computers to demonstrate a working example of how Live Share works.

For clarification purposes, this tutorial will refer to the person who sends the session invite as the inviter and the person who accepts the invite as the invitee.

Prerequisites

Before you begin this guide you’ll need the following:

• A Microsoft or GitHub account.
• Download and install the latest version of Visual Studio Code.

Step 1 — Downloading the Extension

The first step to taking advantage of Live Share is to install it as an extension. In VS Code, you can open up the extensions tab, search for Live Share, click install, and then reload when the install is finished.

After that, you’ll need to sign in. As of now, you can choose to log in with a Microsoft or GitHub account.

To sign in, use the Sign In button in the bottom status bar with the person icon.

Step 2 — Sharing and Joining a Session

After you’re all signed in, you’re ready to create a session to share with others. Be sure to only share live sessions with people you trust. As you’ll see, you will be granting users certain access that can be detrimental if used incorrectly.

Start by clicking your username in the bottom status bar and choose Start Collaboration Session from the available options. Alternatively, you can open the Command Palette (CMD+SHIFT+P on Mac, CTRL+SHIFT+P on Windows) and type Start Collaboration Session

You’ll be notified that your invite link has been copied to the clipboard.

Share this link with someone to invite them to your session.

From the invitee point of view, to accept an invite, click your username in the bottom status bar and choose Join Collaboration Session. Alternatively, you can open the Command Palette and type Join Collabation Session.

When prompted, enter the collaborative session link sent to you by the inviter. The inviter will be notified when someone joins the session.

By default, joining a session will automatically have the invitee follow the inviter as they navigate code. This will happen until the invitee makes a move themselves. From there, both sides are free to navigate and edit as they see fit. Additionally, both sides will see a marker showing where the other editor is as shown here.

You can also select a piece of code for it to be highlighted on the other user’s computer. You can use this to draw their attention to a section of code for example.

Step 3 — Limiting Collaborators

By default, when sharing a session with someone, they will have access to edit all of the files within the workspace. It’s one thing to trust someone to edit specific files, but opening up your entire workspace to them may not be preferred.

Thankfully, Live Share gives you the ability to limit what files collaborators can view and edit.

Create a .vsls.json file to limit collaborators. The basic configuration will look something like this:

{
    "$schema": "http://json.schemastore.org/vsls",
    "gitignore": "none",
    "excludeFiles": [],
    "hideFiles": []
}

The two keys we care most about are excludeFiles and hideFiles. excludeFiles is an array of file names that you don’t want users to have access to. hideFiles is similar except collaborators will be able to see hidden files under certain circumstances. Read the documentation on controlling file access and visibility for more details about security.

Step 4 — Sharing a Server

It can be challenging to share with others when working on an application locally. You could check the code into GitHub and have the other person clone, but then they still have to install dependencies and start the server themselves. With Live Share you can start the server locally and the other person can get access to the same running application.

As the inviter, start your server as normal. Then, click the username in the bottom status bar and choose Share Server. Alternatively, open the Command Palette and type Share Server.

As the invitee, you then can navigate to localhost on the proper port to see the server.

Step 5 — Sharing a Terminal

There may be a scenario where you’d like to teach someone commands in the terminal, such as how to navigate the file system, working with npm, starting your dev server, etc. As with the earlier features, this can be complicated to do remotely. Live Share also includes a terminal sharing feature to solve this problem.

Sharing a terminal is similar to sharing your server. Similar to the other features, select the Share Terminal option. After that, choose between read only or read/write permissions for collaborators.

After the terminal has been shared, collaborators will be able to view (and edit, if applicable) the terminal. This screenshot displays the invitees view of the terminal after the inviter echoed a message to the screen:

From here, you could show the invitee how to start a development server, build system, or anything else that might be relevant.

Conclusion

There are a lot of useful features included in this extension that. With Visual Studio Code quickly becoming a favorite editor for web developers, this extension potentially changes the way we approach teaching, mentoring, collaboration, debugging, etc.