How to Program Collaboratively Using Visual Studio Code’s Live Share
Whatsapp Pinterest
Advertisement

Whether you are learning the first steps of a programming language or you are a seasoned coder, collaboration is key to improving. Concepts like pair programming are prevalent in modern companies, but what options are there for collaboration in the home?

Many teams use tools like Slack and Discord to stay in touch as a group. Version control allows people to collaborate on a project and sync it to the same online repository.

These tools are fantastic, but what if there was a way to combine these concepts in an IDE? Microsoft has the answer in Live Share for Visual Studio (VS) Code and Visual Studio. Today’s guide will focus on VS Code.

What Is VS Live Share?

VS Live Share allows two or more people to collaborate on code in real time using either Microsoft or GitHub accounts. Standard Live Share sessions support up to five concurrent users, though this extends to 30 by changing settings. While only signed in users can contribute to the code, guests can watch the session and take part in the live chat.

The VS Live Share Extension pack includes audio, allowing users to share a call, and integrations for Slack and Discord. Alongside the clear benefits for remote workers, Live Share is also an educational tool. Shareable terminals and servers make Live Share the perfect classroom teaching aid.

Setting Up Visual Studio Code for Collaboration

VS Code is free, and available for Windows, macOS and Linux. If you are not already a VS Code user, download and install it before continuing.

To install VS Live Share, open VS Code and open the Extensions tab on the left toolbar. Alternatively you can use the keyboard shortcut Ctrl-Shift-X. Search for VS Live Share in the search bar.

VS Code Extensions Panel
Alongside VS Live Share, Microsoft released extra tools for communication through external software and audio. Install VS Live Share along with the VS Live Share Extension Pack. Once installed, click reload under any of the extensions in the list to reload visual studio code and activate them.

New Logos appear in the side panel

On reload you will notice a couple of new icons in the toolbar, a hash symbol denoting the Slack and Discord integration panel, and an arrow symbol for the Live Share panel.

Setting Up a Sharing Session in VS Code

visual studio code live share session details

Setting up a sharing session is fairly simple. Open the VS Live Share tab on the left toolbar. The Session Details window gives three options for code sharing:

  • Join collaboration session: Use this to join someone else’s session provided they have given you a URL.
  • Start collaboration session: Use this to create your own collaboration session where other users can edit code.
  • Start read-only collaboration session: Use this to create a collaboration session where users can view, but not edit code.

Clicking any one of these will prompt you to sign into your Microsoft or GitHub accounts and redirect you to the browser. To set up a basic session, select Start collaboration session and select a working directory when prompted. Sign in, and you will be redirected back to VS Code and prompted to allow firewall permission.

This isn’t essential, though recommended for speed and connection stability.

Firewall prompt to allow fast live connection

An information window in the bottom right corner will contain your collaboration link, along with options to make the room read-only and a link to more information about the sharing process.

Live Share Session sharing context window

Copy your link to the clipboard and give it to a friend or colleague who also has VS Live Share installed and you’re good to go!

Basic Code Collaboration in VS Code

Code collaboration doesn’t change your coding experience. Instead, it adds a layer on top. Creating a Live Share session opens a chat window. This is accessible to all users whether signed in or read only.

A read-only guest called Jimmy joins the chat

At any time during collaboration, you can reopen the chat window, get the sharing URL, or end the session using the Live Share panel.

Live Share in progress window
Now, open any file you wish to collaborate on and start coding as usual. Participants working on the same script as you each have a colored cursor showing where they are working. As well as seeing them work in real time, highlighting is also shared making it easy to point out errors and suggested changes.

Remote participant text highlighting
Collaboration can take place across any files in the project directory, and you can see which script everyone is working on in the Live Share panel. You can also share the VS Code terminal in read-only and read/write modes, and a local server for working on JavaScript or other web projects.

Following and Focusing Collaborators

Sometimes you will want to explain something that requires moving beyond one script. Users can follow one another by clicking on their name in the Live Share panel. Now, no matter where they go in the project, you will be pulled with them to see what they do.

The Follow option lets you see someone else work through a project.

Similarly, clicking the small megaphone in the Session Details panel Focuses participants to your current view.

The megaphone focuses all participants to your view
This is handy for when you need to draw everyone’s attention to a specific part of the project quickly. Focused participants have the option to continue following you from this point on.

Using Audio in VS Live Share

The VS Live Share Extension Pack includes integration for Audio. Beginning a session adds a new room. To enter the room, click Join audio call under the Audio tab of the Live Share panel.

Joining an audio call in Live Share
All collaborators and guests have access to the call, making it perfect for both collaborating, teaching, or presenting to a group how a project is coming along. Settings for the call can be accessed by right-clicking on an active call or clicking the cog wheel.

Clicking the red disconnection symbol leaves the chat room, though it will remain accessible as long as the session remains active.

Slack Integration With VS Code

Setting up Slack in VS Code is simple. Click on the Slack logo on the left panel, and select Setup Slack. This will take you to a browser window to authorize VS Code accessing the workspace.

Authorizing the app with Slack

You will need to be an admin to authorize the VS Code Slack app. Once it is linked, the Slack workspace will show as another tab in VS Code.

Slack chats work well in a Live Share window.
Discord setup is a similar process, though it is worth noting that it appears that currently only one of the services can be integrated at a time.

Security and Privacy in VS Live Share

VS Live Share is a fantastic tool for coders of all types, but it does come with some security considerations. The open nature of the extension combined with the ease of sharing your code can be abused.

Since even read-only guests can talk in chat, there is the potential for inappropriate behavior from people who shouldn’t have got the shared link.

Live Share also allows sharing of the terminal in read/write mode. This poses a significant security risk in the wrong hands.

Sharing access to your terminal can be risky business.
In short, be careful who you share your Live Share link with, and think carefully before allowing editing and terminal privileges to people.

Collaboration Is Progress in Visual Studio Code

These extensions are examples of basic integrations with VS Code. Seasoned users will already be aware of many more which help with code completion, linting, and testing. Live Share also enables people to learn both in the classroom and remotely—however self-study with an excellent online course 11 Best Sites for Free Online Computer Programming Courses 11 Best Sites for Free Online Computer Programming Courses These days, you can become a master coder without picking up a traditional computer science degree. Where are all of these excellent learning resources, you ask? Great question. Keep reading and we'll show you. Read More is still important.

Explore more about: Collaboration Tools, Visual Studio Code.

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

Your email address will not be published. Required fields are marked *