App Development

Live Share in Visual Studio Code – a guide to collaborate for developers

Visual Studio Code by Microsoft is an exceptional tool which is used to “Build and debug modern web and cloud applications”. As remote work is the ultimate necessity in these times, organizations are striving to maintain productivity. Developers can leverage VS Code for maximizing remote collaboration — especially using the live sharing option.

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

Live Share offers the ability to “share a session” with someone else, allowing them to edit code as well as share a server and debugging session. It can be compared to collaborating in Google Docs, by the file sharing options — there are options to edit, comment and run the code written by teammates working on the same project. Users can link their Github account to VS code to start collaborating.

Four simple steps to real time project collaboration

1. Add Live Share to Visual Studio Code

Go to Extensions → Add extra package → Live share package → Install

download Live Share extension

Go to File → Add a Workspace → Add a folder from your system → Collab begins!

2. Authorizing Live Share sessions

Go to Live share → Session details →Click Start Collaboration Session or Join Collaboration Session

Session details — join / start a collab session

If you want to start a collaboration session, after clicking start — the invite link will be automatically linked to your clipboard. Just go ahead and share it with fellow team members to join your project. You will find a message shown below, go ahead and use the read-only or read and write option whichever you prefer. If you want to give access to your team to make edits, then stick to the read and write access.

Sharing options

Once you have access to the code, team mates can comment on the code, or directly edit the code. You will also be able to see in which line fellow collaborators are working on.

3. Share a Server

This is the best feature in VS Code Live Share — if you are a coder, you know how challenging it is to share a server with others while 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. In Live Share, you can start the server locally and the fellow collaborators will get access to the same running application. The output can be viewed in real-time on all the shared systems. This takes off the huge burden of code sharing in simultaneous development and debugging.

Ctrl + Shift + P → Type “Share Server” → Enter port number

share server option

Now by entering your server url / TCP port, it will be shared with all the fellow collaborators. Everyone in your team will be able to access your local host server and view real-time output. With the read and write access — collaborators can edit the code and run it. The output will be shown in the same local host url in their system.

Take this simple css code for example, after sharing my port with my collaborators — they can run and view the output from my local host url.

simple css code as an example
share the local host url with the team

fellow collaborators can now view the output from their systems

4. Share a Terminal

If you have tried to teach someone commands in the terminal, such as navigating the file system, working with npm, starting your dev server, etc — you know how complicated it is to do it when both are working remotely. Live Share has a cool feature to share a terminal, just find the Share Terminals option in the Session Details, you get to choose read only / read and write options for the shared terminals. You can now easily show how to start a development server, build system, or anything else that’s necessary.

share a terminal

After giving access, collaborators can type (with read and write access) commands in the terminal.

team members can now type in commands in your terminal

Ready to Collab?

In addition, to these features — there is a Share Debugging feature, where you can help a team member in the debugging process. A senior team member can help a junior one by talking through the thought process in debugging using the VS Code ‘Share Debugging” feature. This VS Code docs is the best reference to learn more about this feature.

Skill sharing is taken a notch up using VS Code, team members in a project need not be sitting across from each other to collaborate in coding and debugging. They can be working remotely, miles away from one another and efficiently collaborate by using VS Code Live Share feature.

Hope this blog was helpful, reach out to us if you have any questions.