--- title: "VSCode Live Share : A Great Way to Collaborate with Your Team" description: "Learn how your team can collaborate with your projects in real-time with VSCode Live Share in this tutorial!" canonical: "https://adamtheautomator.com/vscode-live-share/" --- # VSCode Live Share : A Great Way to Collaborate with Your Team > Learn how your team can collaborate with your projects in real-time with VSCode Live Share in this tutorial! Source: https://adamtheautomator.com/vscode-live-share/ --- ATA Learning Tap to hide [ ATA Learning ](/) * [Home](/) * [Tutorials](/tutorials/) * [Instructors](/author/) * [Advertising](/advertising/) * [Recommended Resources](/resources/) * [About Adam](/about-adam/) Search for: * [](https://twitter.com/adbertram) * [](https://github.com/Adam-the-Automator) * [](https://www.linkedin.com/company/adam-the-automator-llc) * [](/feed/) ![VSCode Live Share : A Great Way to Collaborate with Your Team](https://adamtheautomator.com/wp-content/uploads/2022/03/Team-Coding-Collaboration-with-VSCode-Live-Share.jpg) # VSCode Live Share : A Great Way to Collaborate with Your Team [![](https://secure.gravatar.com/avatar/2788bb1a3f735603f81eca51d68daec56a9d97e805a10268fb2c20afcc76b81b?s=192&d=mm&r=g)Nicholas Xuan Nguyen](https://adamtheautomator.com/author/nicholas-xuan-nguyen/)30 March 20227 min. read Categories: [DevOps](/category/devops/) Tags:[Visual Studio Code](/tag/visual-studio-code/) Table of Contents * [Prerequisites](#prerequisites) * [Downloading and Installing the VSCode Live Share Extension](#downloading-and-installing-the-vscode-live-share-extension) * [Collaborating in a Session Chat Room](#collaborating-in-a-session-chat-room) * [Sharing a Terminal](#sharing-a-terminal) * [Sharing a Server](#sharing-a-server) * [Conclusion](#conclusion) Are you looking for a way to collaborate with your team more effectively? [Visual Studio Code (VSCode) Live Share](https://code.visualstudio.com/blogs/2017/11/15/live-share) can help and is just around the corner! VSCode Live Share is a real-time collaboration tool that allows you to share your code and collaborate on coding projects. In this tutorial, you’ll learn how to set up VSCode Live Share and how real-time team coding collaborations work. Check out VSCode Live Share and see how productive your daily routine can get! ## **Prerequisites** This tutorial will be a hands-on demonstration. If you’d like to follow along, be sure you have the following. * Two Windows 10 machines, either physical or virtual – This tutorial uses one VM (guest) and one physical machine (host) to test the live share feature. * [Visual Studio Code IDE installed](https://code.visualstudio.com/docs/setup/windows) on both host and guest machines. Related:[What You Need to Know about Visual Studio Code: A Tutorial](https://adamtheautomator.com/visual-studio-code-tutorial/) * A project opened in Visual Studio Code that you’d like to collaborate on with your guest. Related:[A Beginner’s Guide to Visual Studio Code and Git](https://adamtheautomator.com/visual-studio-code-git/) * A [GitHub account](https://github.com/join). ## Downloading and Installing the VSCode Live Share Extension The VSCode Live Share extension lets you and others edit the same file, debug the same app, and even run commands in the same console simultaneously. So whether you’re working on a small project or a large one, VSCode Live Share can make your life easier and get the job done faster. You and your teammates will need to install the extension first to start collaborating. You’ll download the VSCode [Live Share extension](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) pack from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/). 1\. On your host machine, launch the **Visual Studio Code** in administrator mode. Some features, such as port forwarding, might require administrator privileges. ![Launching Visual Studio IDE as Administrator](https://adamtheautomator.com/wp-content/uploads/2022/03/image-497.png) Launching Visual Studio IDE as Administrator 2\. Next, on VSCode’s window, install the Live Share extension with the following: * Click the Extensions icon from the left navigation panel, as shown below, to access the extensions marketplace. * Type **Live Share** in the search bar and look for **Live Share** from **Microsoft**. * Click **Install** at the bottom-right of the **Live Share** extension to install the extension. ![Downloading and Installing the VSCode Live Share Extension](https://adamtheautomator.com/wp-content/uploads/2022/03/image-498.png) Downloading and Installing the VSCode Live Share Extension 3\. Close and restart VSCode after installing the extension. When VSCode opens up again, you’ll get the Live Share extension tab below, which confirms the Live Share extension is now available in VSCode. ![Viewing the Live Share Tab](https://adamtheautomator.com/wp-content/uploads/2022/03/image-499.png) Viewing the Live Share Tab 4\. Now, click on the avatar icon at the bottom left and choose **Sign in with GitHub**. A browser tab will open and redirects to [_GitHub.com_](http://github.com/) (step five), where you’ll sign in to your GitHub account. You need to sign in to GitHub to use the Live Share extension. Live Share depends on the GitHub repository hosting service to provide user authentication and authorization. > _For collaborators to share and join a session, you and your guest must be signed in to a valid GitHub account._ ![Signing in with GitHub](https://adamtheautomator.com/wp-content/uploads/2022/03/image-500.png) Signing in with GitHub 5\. Click on **Continue** and follow the on-screen instructions to sign in to your GitHub account. After signing in, the browser window will close, and you’ll be redirected back to VSCode. ![Authorizing VSCode Access to GitHub](https://adamtheautomator.com/wp-content/uploads/2022/03/image-501.png) Authorizing VSCode Access to GitHub 6\. Next, click on the avatar icon again to verify that you are signed in, as shown below. The panel will display your GitHub user name (**ata-aws-iam**). If not, re-sign in following the previous steps four to five. ![Verifying Signed-in GitHub Account](https://adamtheautomator.com/wp-content/uploads/2022/03/image-502.png) Verifying Signed-in GitHub Account 7\. Lastly, repeat steps one to six on your guest machine to install the Live Share extension and sign in to GitHub. # **Sharing a Project and Joining a Collaboration Session** Now that you and your guest have the required tools installed, you’re ready to start a collaboration session by sharing a project. 1\. On the host machine, start a collaboration session with the following: * Press CTRL+SHIFT+P in VSCode to open the [command palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette), as shown below. * Enter **Start Collaboration Session** and select **liveshare**.**start** from the list. * Click **OK** when you get a pop-up message to accept unblocking ports on your firewall. Doing so enables VSCode to interact with your guest machine in real-time. By default, both participants in the collaboration session will have editor rights and can make changes to the same file. ![Starting a Collaboration Session](https://adamtheautomator.com/wp-content/uploads/2022/03/image-8.gif) Starting a Collaboration Session 2\. Next, set your collaborator’s access permission and generate an invitation link to the collaboration session: * Click on **Make read-only** mode at the bottom right, as shown below, to restrict your collaborator with read-only access. Doing so enables the collaborator to only view the contents of the files and not make any changes. * Click **Copy again** to copy the invitation link to your clipboard. * Send the invitation link to your guest. You can use an email or a chat tool such as Slack or Discord. ![Copying the Collaboration Session’s Invitation Link ](https://adamtheautomator.com/wp-content/uploads/2022/03/image-503.png) Copying the Collaboration Session’s Invitation Link > _Only share projects with people you trust, as they will have access to your code and can see or make changes to your code._ 3\. Switch to your guest machine, and click on the invitation link sent from the host machine. As your guest machine joins the collaboration session, you’ll see a notification (bottom-right), like the one below. ![Joining a Session](https://adamtheautomator.com/wp-content/uploads/2022/03/image-504.png) Joining a Session If joining the session was a success, you’ll see your guest machine’s name (**ata-dotcom**) on your host machine’s VSCode window (bottom-right), as shown below. At this point, you’re ready to start collaborating on code with your guest. ![Verifying Joining a Session](https://adamtheautomator.com/wp-content/uploads/2022/03/image-505.png) Verifying Joining a Session 4\. Lastly, make any changes to your project from the host machine. Doing so lets you see the changes reflect real-time on the guest machine, as shown below. ![Viewing Changes Reflecting in Real-time ](https://adamtheautomator.com/wp-content/uploads/2022/03/image-9.gif) Viewing Changes Reflecting in Real-time Below, you can see that even highlighting a code block reflects real-time. This behavior comes in handy when explaining a certain code block to your guest. ![Highlighting a Block of Code](https://adamtheautomator.com/wp-content/uploads/2022/03/image-10.gif) Highlighting a Block of Code ## Collaborating in a Session Chat Room Apart from seeing changes in real-time, VSCode Live Share also has a built-in chat feature that you can use to communicate with your guest. This feature is useful when asking your guests a question without interrupting their flow. Or when you’re discussing possible solutions to a problem. Click on **Session Chat** at the bottom left corner of the **Live Share** panel to start chatting with your guest, as shown below. You’ll see a chat panel open on the right side of the VSCode window. Now, type your message in the text box at the bottom, and hit enter. The message will be delivered to your guest in real-time. ![Opening a Session Chat](https://adamtheautomator.com/wp-content/uploads/2022/03/image-506.png) Opening a Session Chat ## **Sharing a Terminal** The terminal is one of the most critical tools for system administrators and developers. But there are times when demonstrating what’s going on in the terminal gets challenging as you troubleshoot a problem. For example, your npm install is not working because you don’t have the correct permissions. Luckily, VSCode has a built-in feature that allows you to share your terminal with your guest. With this feature, your guest gets to see what you’re doing and help you troubleshoot the problem in real-time To share your Terminal with your guest: 1\. Open the command palette again, and type **Share Terminal**, as shown below. Select **Live Share: Share Terminal** from the drop-down menu, and you’ll choose the permission to give your guest (step two). ![Sharing Terminal](https://adamtheautomator.com/wp-content/uploads/2022/03/image-507.png) Sharing Terminal 2\. Choose **Read-only** or **Read/write** mode for your guest in the drop-down menu below, and a shared terminal opens up on the guest machine. The guest machine will be in the same directory as your host machine. ![Choosing Permission for the Guest Machine’s Terminal](https://adamtheautomator.com/wp-content/uploads/2022/03/image-508.png) Choosing Permission for the Guest Machine’s Terminal Related:[Enhance your Console Experience with Windows Terminal](https://adamtheautomator.com/new-windows-terminal/) 3\. Finally, run the below `ls` command to list the contents of the working directory. This action lets you test if the guest’s terminal shows the same output as the host’s terminal. You’ll see the same output on your guest machine’s terminal below. Since your terminal is shared with your guest, you can troubleshoot any problem that may occur in real-time. ```bash ls ``` ![Listing Contents of the Working Directory](https://adamtheautomator.com/wp-content/uploads/2022/03/image-11.gif) Listing Contents of the Working Directory ## Sharing a Server Sharing a server sounds impossible, right? But wait until you see how VSCode makes it possible to share a server. For example, you’re working on a web app, and you want to let your guest see the changes you made in real-time. Without having to rebuild and redeploy the app every time you make a change, VSCode enables you to share your web server with your guest in real-time. To share your server with your guest: 1\. Open the command palette, and type **Live Share: Share Server**. Select **Live Share: Share Server** from the drop-down menu, as shown below, to share your server. > _Sharing a server is useful when showing your guest a website or a web application you’re working on. The best part is that your guest doesn’t need to install anything other than a browser._ ![Sharing a Server](https://adamtheautomator.com/wp-content/uploads/2022/03/image-509.png) Sharing a Server 2\. On the next screen, provide a port number for your guest to access the server, then press ENTER to start sharing the server. The port number can be anything you want, but it’s ideal to choose any unused port number or above 3000. And don’t worry, the connection is secure as it’s established on an SSH or SSL tunnel basis by default. ![Providing a Port Number for the Guest](https://adamtheautomator.com/wp-content/uploads/2022/03/image-510.png) Providing a Port Number for the Guest 3\. Switch back to your guest machine and see a server running at **http://localhost:3000** shared by the host, as shown below. ![viewing a shared server](https://adamtheautomator.com/wp-content/uploads/2022/03/image-511.png) viewing a shared server 4\. Finally, open your preferred web browser, and navigate to _http://localhost:3000_ to access the host server. Like the one below, you’ll see the same website or web app that the host is working on in real-time. And since both the host and the guest share the same server, you can now troubleshoot problems while still working on the code. ![Viewing the Shared Host Server on the Guest Machine](https://adamtheautomator.com/wp-content/uploads/2022/03/image-512.png) Viewing the Shared Host Server on the Guest Machine ## Conclusion In this tutorial, you’ve looked at the VSCode Live Share extension and how it can help share your terminal and server with a guest in real-time. Give it a try and be more productive when working on projects. VSCode has many valuable features that can help be more productive when working on a project. Now, why not try [remote coding on a GitHub project](https://www.infoworld.com/article/3533970/remote-coding-with-visual-studio-live-share-and-github.html)? Share this article [Share on X](https://twitter.com/intent/tweet?url=https%3A%2F%2Fadamtheautomator.com%2Fvscode-live-share%2F&text=VSCode%20Live%20Share%20%3A%20A%20Great%20Way%20to%20Collaborate%20with%20Your%20Team)[Share on Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fadamtheautomator.com%2Fvscode-live-share%2F)[Share on LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fadamtheautomator.com%2Fvscode-live-share%2F) ## Related Posts ![](https://adamtheautomator.com/wp-content/uploads/2021/02/A-Beginners-Guide-to-Visual-Studio-Code-and-Git.jpg) ### [A Beginner’s Guide to Visual Studio Code and Git](/visual-studio-code-git/) Learn how to edit code, create snippets and work with Visual Studio Code’s Git feature to commit code to a Git repo in this example-driven tutorial! ![](https://adamtheautomator.com/wp-content/uploads/2021/02/What-You-Need-to-Know-about-Visual-Studio-Code_-A-Tutorial-1.jpg) ### [The Visual Studio Code Tutorial Worth Learning](/visual-studio-code-tutorial/) In this handy, in-depth Visual Studio Code tutorial, learn how to get started using this powerful code editor! ![](https://adamtheautomator.com/wp-content/uploads/2026/08/featured_image-6.webp) ### [Automate Terraform with Azure DevOps](/automate-terraform-azure-devops/) Automate Terraform with Azure DevOps Pipelines: structure a multi-environment repo, store remote state in Azure Storage with locking, and deploy through ## Categories * [IT Ops](/category/it-ops/) * [Cloud](/category/cloud/) * [DevOps](/category/devops/) * [Home Ops](/category/home-ops/) * [Information Security](/category/infosec/) * [Software Development](/category/software-development/) ## Site * [Home](/) * [Tutorials](/tutorials/) * [Instructors](/author/) * [Advertising](/advertising/) * [Recommended Resources](/resources/) * [About Adam](/about-adam/) Copyright 2026© ATA Learning | [Privacy Policy](/privacy/)