Getting Started with Live Coding in Visual Studio Code w/ Live Share

Celý článek

Live Share for Visual Studio Code is HOT OFF THE PRESS and publically available as of May 7th 2018! What? You've been living under a rock and haven't heard of it? Don't worry, let me fill you in.

Live Share is an extension for VS Code that enables real-time collaboration between developers.

Live Share is an extension for VS Code that enables real-time collaboration between developers. As you'll see in a second, you'll have the ability to share a "session" with someone else, allowing them to edit code as well as share a sever and debugging session. I've seen real-time collaboration in action with Cloud 9 before, but to have this now be a part of my favorite text editor is extremely exciting! So, let's go ahead and take a look at how it works.

TLDR: How do I set up Live Share in 4 steps?

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

Keep in mind that 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, I'll refer to person who sends the session invite and the person who accepts the invite as the the inviter and invitee respectively.

Downloading the Extension

The very first step to taking advantage of Live Share is to install it just like any other 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 login with a Microsoft account or Github. Because I needed two computers, I logged in with Microsoft on one and Github on the other.

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

Sharing and Joining a Session

After you're all signed in, you're ready to create a session to share with others. One thing to keep in mind when doing so is 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.

Only share live sessions with people you trust!

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.

To invite someone to your session, all you need to do is share this link with them. You can text, email, or read it verbatim over the phone... whatever works for you.

From the invitee point of you, 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 ( CMD + SHIFT + P on Mac, CTRL + SHIFT + P on Windows) and type "Join Collaborative 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, on joining a session the invitee will automatically follow the inviter as he/she navigates 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.

One neat trick is to select a piece of code for it to be highlighted on the other's computer as well. You can use this to draw their attention to a section of code for example.

Limiting Collaborators

By default, when sharing a session with someone, they will have access to edit all of the files within the workspace. Obviously, this may not be ideal. It's one thing to trust someone to edit a few files, but opening up your entire workspace to them might be a little nerve-racking. Thankfully, Live Share gives you the ability to limit what files collaborators can view and edit.

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

To limit collaborators, create a .vsls.json file. 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". EcludeFiles is an array of file names that you don't want users to ever have access too. They will not be able to view those files ever. HideFiles is very similar except collaborators will be able to see "hidden" files under certain circumstances. Click here for more details about security.

Share a Server

If you've ever tried, you know it's challenging to share with others when working on an application locally. Sure, 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. Wouldn't it be amazing if you could start the server locally and magically the other person gets access to the same running application?! Well, now you can.

As the inviter, start your server as normal (ex. nodemon server.js). 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 the correct local host url. In my case, I'm running my sample application, VSC Snippets (GUI for creating Code Snippets for VS Code), at port 3000.

How incredible is that? Don't ask me how it works because, honestly, I have no idea, but it's super cool!

Share a Terminal

Imagine a scenario where you're trying to teach someone commands in the terminal. You know, navigating the file system, working with npm, starting your dev server, etc. As with the features above, this becomes much more complicated when doing remotely. Good thing Live Share decided to throw the feature to share a terminal in for good measure.

Sharing a terminal is similar to sharing your server. We've been through this before, so just find the option "Share Terminal" and click it. Then, you'll need to choose between read only and read/write permissions for collaborators.

You can share a terminal granting either read only or read/write access to collaborators

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.

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.

Shared Debugging

One last thing you can do with this awesome extension is share a debugging session, providing yet another amazing way to teach someone. Honestly, debugging is not necessarily something that can be memorized. You get just better from experience. So, the idea of walking through a debugging session with someone more junior is a great opportunity. Just talking through your thought process as you go could be invaluable to someone looking to learn.

To share a debug session, you'll first need to start a debug session. Makes sense, right. I'll cover the basic idea but refer you to the VS Code docs for further reference.

I am going to be debugging a Node App using the "Attach to Process Id" configuration. This means that after running my server, I then run the debug configuration that will connect to the existing running application.

After starting the application and then starting the debug configuration, below you can see I hit a breakpoint in my code.

The cool thing about sharing debugging is that it happens automatically. After the debugging session is started on the inviter side, the invitee will then automatically be a part of the same session.

Recap

Man, that was a lot. There's a lot of great features included in this extension that you should be really excited about. With Visual Studio Code quickly becoming the de factor editor for Web Developers, this extension potentially change the way we approach teaching, mentoring, collaboration, debugging, etc. I'm super excited to take advantage of all of these features, and I hope you are too!

As you get started and give it a try, let me know how you like it, cool things you are doing, etc. You can find me on twitter, @jamesqquick.