While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

Introduction

Live Share is an extension for VS 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 sever and debugging session.

Getting Started

  1. Install the Live Share extension
  2. Open the command palette
  3. Start Live Share
  4. Share Link

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 person who sends the session invite and the person who accepts the invite as the the inviter and invitee, respectively.

Step 1 — Downloading the Extension

The very 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.

VS Code extension tab

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

Starting a collaboration session

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

Notification of link being copied to 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 Collaborative Session. Alternatively, as above, you can open the Command Palette and type Join Collaborative Session.

Join collaborative session drop-down menu

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

Notification that someone has joined 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.

Cursors where both editors are

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.

Highlighted code from the other user

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 a few 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:

.vsls.json
{
    "$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 very similar except collaborators will be able to see hidden files under certain circumstances. Click here 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.

Share server drop down

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

Shared server page on localhost

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 features above, 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.

Share terminal window

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

Text echoed on the shared terminal window

From here, as mentioned above, 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 change the way we approach teaching, mentoring, collaboration, debugging, etc.

0 Comments

Creative Commons License