Published on

Successfully Using Live Share Extension in VS Code

Last Modified on
Last modified on
Successfully Using Live Share Extension in VS Code
Photo by Roman Odintsov on Pexels

I have been wracking my brain lately as to how to engage team members more via live code collaboration. This extends to both the classroom and work.

The first thing you have to do is to install Live Share by Microsoft. Go to the extensions icon all the way to the left of the VS Code window and click on it. For me, it is six icons down from the top:

Screenshot of Live Share Icon in VS Code Window

If you hover over each icon, you will see what it is for.

When you click on the extensions icon, the following view will appear:

Screenshot of Expanded Live Share Icon View

Next, click on the first Live Share extension that appears at the top. It should look like this:

Live Share Extension View

Then click on the install button. After it has been installed, reload VS Code.

If you want to share a particular project with others, first you have to make sure that they have a Github account (that is the account we will be using to connect, not Microsoft).

When you restart VS Code, and are also already logged into Github, you should see the Live Share icon along with your others all the way to the left of the VS Code window instance. If you click on it, the following will appear:

Live Share Icon Now Appears in the Extensions VS Code Sidebar Menu

However, if you open the Command Palette by pressing the Shift key + Ctrl key + P key. And then type Live Share, you will have even more options available to you:

Command Palette Dropdown for Live Share

In the screenshot above, I was not able to show the complete list of options. You will see if the scroll bar for the Command Palette has any more scrolling to do, and you can check out the rest of the options available that way.

Next, you should see Live Share appear at the bottom of your VS Code window. Click on it. It will start a new session:

Live Share Appears at the Bottom of the VS Code Window

If you are part of a Discord Server (group) and would like to invite others from that group, you simply paste the link either in one of the Group channels or within a DM to particular people. When they click on the link, they will be prompted what to do. It is very important that you are actually in the folder you want to collaborate with others on inside of VS Code before you start a session, otherwise others will not be able to collaborate inside the folder. They will see nothing.

If you want to stop a session, click on your (Live Share) name located at the bottom the VS Code window instance, and the VS Code Command Palette will open. When it does, select Stop Collaboration Session.

To learn more about Live Share, please visit the Microsoft VS Code documentation: Microsoft VS Code Live Share Documentation

The only difference between the installation we will be using called Live Share and the Microsoft documentation in which they describe the Live Share Extension Pack (do not try to install it because the Audio portion does not work and will *result in a failed Live Share installation). Everything else is the same.

It is really worth getting to know this tool so that you all can collaborate live from within your VS Code text editors.