This sick Live Share extension is a blessing!
The grandmommy of all code collaboration babies is here
Code collaboration. You won’t get a thought to collaborate with others unless you’re really into something big. Being experimental though, I decided to test the latest offering available for my favorite code/IDE platform Visual Studio. Though I barely use the heavy-duty Visual Studio IDE, this time it was more about the testing the new live sharing feature. There’s not much to write here so let’s keep reading…
What is this extension❔
As you’ve already seen in the featured image, it’s called Visual Studio Live Share. If you’re a team of like-minded developers, use technologies like .NET/Angular/Flutter/Xamarin etc. then this service will make sure you and your partner rely on each other while at work. Yes, it’s a real-time collaboration tool.
What’s great❔
There are already many tools for collaboration for code editors. Some of them which I can remember (but never used) are Teletype for Atom, Multihack for Brackets, Unsung for Coda. You might be already thinking this VS extension is just another item in the above list, here you go then…what’s great and exciting to use VS Live Share is that there is no need sync your code or to configure the same development tools, settings, or environment for your friend to join.
Okay, tell me more 👀
When you’re in a collaborative session via Live Share, you not only get to see and edit the code of your teammate but also you can see the context of the partner’s workspace in his/her editor! How great is this. Below are some of the cool features of this extension:
- You teammate can do almost anything without cloning the repo.
- No need to install any dependency/plugin.
- You get those rich language features of VS like code navigation, Go to Definition and Peek Definition.
- You use your custom keybindings. No need to remember your partner’s!
- Changes done to the file/workspace are reflected instantly. You highlight, refactor or create a new file, the same will be reflected on the host’s window.
- Debugging in this collaboration takes this service to the next level. Both of you can independently use hovers or watches, track the stack trace or the debug console. Plus, setting breakpoints and then running the project is just a matter of a few clicks.
- You can share a local server through a port by opening up the command window, and then go for Live Share Local Servers.
- Plus, you can join your own collaboration session. This means that even if your mate is working on Visual Studio, then IDE he/she can collaborate with you even if you’re on VS Code, the editor. Hurrah! 🎉
There is a complete documentation of what all it can do here.
How to install and configure? 🛠
⚠️VS Live Share will only run on Visual Studio Code version 1.22.0 or higher and on Visual Studio 2017 version 15.6 or higher. If you’re running an earlier version, then it’s a great time to update! ⚠️
Install on VS Code 🔽
- Go to the Extensions tab.
- Search for ‘Live Share’ by Microsoft. Alternatively, visit the marketplace.
- Install and reload. Make sure you wait for the dependencies to load. (This can be seen in the status bar).
- For Linux users, you may need to install some libraries, enter password and then restart.
Install on Visual Studio 🔽
- Install a supported workload for ASP.NET or Node.js etc.
- Follow the steps 2 and 3 from the above section. (Also available via marketplace).
Start using Live Share ↪↩
Here’s a quick GIF which shows what to do after installation:
To start the collaborative session you need to watch the video embedded below:
Where to next? 🤔
At this point I think you’ll be quite impressed of what Microsoft has done. This packs in tonnes of features in a single extension. Of course, this can also be done cross-platform. Your workspace can be on Mac in VS Code and your buddy’s can be on Visual Studio running on a Windows machine! Here are some great resources to kick off your next collaborative session with Visual Studio Live Share:
Liked this story? Feel free to clap and motivate me to write more and better. Did I missed something? Any suggestions? The comment box below serves the exact purpose!
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
