Working in a remote capacity is becoming the new normal. While working remote comes challenges like collaboration and communication with fellow developers. When you are in an office, it's easy to roll a chair over to someone, sit next to them, and start working together. How can you solve that conundrum? With Visual Studio Code Live Share.
In this blog post you will take a hands-on approach to get Visual Studio Live Share installed and start working with the extension in Visual Studio Code. When working with the extension an authentication method is needed to invite collaborators so for that, you will use GitHub.
- Visual Studio Code (VS Code) installed which you can find here. For this demo I am using version 1.42.1.
- A free GitHub account which you can sign up for here.
Installing the Live Share Extension
Installing the Live Share extension is done within Visual Studio Code. Once the extension is installed you will be able to collaborate with peers to have a true pair-programming experience at home or anywhere.
Open up VS Code as shown in the screenshot below.
Click on the Extensions pane to start searching in the extensions menu.
The Extensions pane will now open and you can see various options. Search for Live Share in the searchbar and click the green Install button to install the Live Share extension in VS Code.
After the extension is installed, vsliveshare-welcome-page will show and you can start collaborating.
Signing into Visual Studio Live Share with GitHub
In the previous section you installed Visual Studio Live Share to start collaborating with peers to have a true pair-programming experience from anywhere. Now that Live Share is installed, you will need to authenticate to Live Share with GitHub. The authentication is so other developers can identify you.
Click on the blue Share now button to start the GitHub authentication process.
After clicking the blue Share button, you will be prompted with sign-in options for either a Microsoft account or GitHub. Choose the GitHub sign-in option for authenticating with GitHub.
A web browser will open with a green Authorize VisualStudioLiveShare button which you will need to click. Clicking the button will authorize Live Share to authenticate to the GitHub account. Please note that the account shown in the screenshot below will differ from what you see.
You will be prompted with a screen to open up VS Code. Click the Open Visual Studio Code button and you will be brought back to VS Code.
As shown in the screenshot below, you will now have a link to share with peers to collaborate together!
Accessing the Live Share Session
In the previous section you successfully authenticated to Live Share and are now ready to start collaborating with others. To start collaborating with others, you will need to send them the collaboration session URL.
Click on the blue Try joining yourself button.
Like in the screenshot below, a new VS Code window will appear showing the name of a collaborator and that the collaborator has successfully joined the session.
After successfully confirming that you can join as a collaborator, go back to the vsliveshare-welcome-page tab and click the blue Copy invite link and send it to a friend.
After the friend clicks the link, you will be presented with an accept or deny option in VS Code. Click the blue Accept button to allow the friend to join.
The friend now shows in the live session!
Congratulations! You have successfully set up a Live Share session.
in this blog post you took a hands-on approach for setting up Live Share in Visual Studio Code. You used GitHub as the authentication method and successfully created a Live Share session for you and your friend.
For your next challenge, try joining a Live Share session.