11-14-2018, 07:42 AM
VS Code Live Share plugin
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/vs-code-live-share-plugin.gif" width="919" height="850" title="" alt="" /></div><div><p>Contributing to Open Source projects leads to collaborating with people around the world this is traditionally done via emails or instant messages. But with the rise of extreme programing practices like pair programing being able to remotely share a code editor is a great feature. VS Code has a plugin Live Share that does just that.</p>
<p><span id="more-22550"></span></p>
<h2>Getting Started with Live Share</h2>
<p>If you do not have VS Code already installed, you can read our previous article to get started.</p>
<blockquote class="wp-embedded-content">
<p><a href="https://fedoramagazine.org/using-visual-studio-code-fedora/">Using Visual Studio Code on Fedora</a></p>
</blockquote>
<h3>Installing the Live Share plugin</h3>
<p>First let’s install the dependencies the Live Share plugin requires.</p>
<pre>$ sudo dnf install openssl-libs krb5-libs libicu zlib gnome-keyring libsecret desktop-file-utils xorg-x11-utils</pre>
<p>Once the installation completes, the Live Share plugin is ready to be installed from the Extensions marketplace.</p>
<p>More details on the role of each dependency can be found in the <a href="https://docs.microsoft.com/en-us/visualstudio/liveshare/reference/linux#install-prerequisites-manually">Documentation</a>.</p>
<p><img class="aligncenter size-full wp-image-22971" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/vs-code-live-share-plugin.gif" alt="" width="919" height="850" /></p>
<p>Finally reload VS Code to activate the new plugin.</p>
<h3>Start a Collaboration Session</h3>
<p>To start a new collaboration session, it requires a project to be open in VS Code, so let’s clone the following git repository and open it.</p>
<pre>$ git clone https://github.com/cverna/rss_feed_notifier.git</pre>
<p>This repository contains the source code of the following Magazine article.</p>
<blockquote class="wp-embedded-content">
<p><a href="https://fedoramagazine.org/never-miss-magazines-article-build-rss-notification-system/">Never miss a Magazine article — build your own RSS notification system</a></p>
</blockquote>
<p>In VS Code, use the <strong>[Ctrl+K, Ctrl+O] </strong>combination to select and open the git repository.</p>
<p>Then from the Live Share extension menu start a collaboration session.</p>
<p><img class="aligncenter size-full wp-image-23011" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/vs-code-live-share-plugin-1.gif" alt="" width="728" height="343" /></p>
<p>Live Share requires its user to sign in so that it can display the identity of the session participants. You can easily sign in using a GitHub account for example.</p>
<h3>Ready to collaborate</h3>
<p>To start collaborating Live Share provides a link that can be shared with others. You can get this link in you clipboard by clicking on the <em>Invite paticipants … </em>text<em>.</em></p>
<p><img class="aligncenter size-full wp-image-23014" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/vs-code-live-share-plugin-2.gif" alt="" width="397" height="311" /></p>
<p>Once one or more participant have joined the session you can start collaborating.</p>
<h3>Sharing Code</h3>
<p>This is where Live Share really shines as it shows clearly which participant is currently editing the file.</p>
<p><img class="aligncenter size-full wp-image-23015" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/vs-code-live-share-plugin-3.gif" alt="" width="886" height="412" /></p>
<p>It is also possible to follow a participant. This has for effect to open in your editor all the files that the participant you are following opens.</p>
<p><img class="aligncenter size-full wp-image-23016" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/vs-code-live-share-plugin-4.gif" alt="" width="741" height="267" /></p>
<h3>Sharing Resources</h3>
<p>Another feature of Live Share is to share resources like a server, a terminal or even a debugger session. For example it is very easy to share a terminal session and help a participant setting up a development environment, another example would be to share a database server and to inspect the content of a table.</p>
<h3>Connectivity</h3>
<p>By default the Live Share connection automatically checks if the host machine and the guest machine can communicate directly, if not Live Share uses a relay hosted in the Azure cloud.</p>
<p>It is possible to configure Live Share to use only direct connection between the host and the guest. For that the host machine needs to open a port in the 5990-5999 range and accept inbound local network connections. The guest needs a network route and outbound access to the host on the same port.</p>
<p>Finally set the connection mode to <em>direct</em> in the Live Share settings.</p>
<p><img class="aligncenter size-full wp-image-23018" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/vs-code-live-share-plugin-5.gif" alt="" width="961" height="640" /></p>
<p>The <a href="https://docs.microsoft.com/en-us/visualstudio/liveshare/reference/connectivity">documentation</a> provides more details on the connectivity options.</p>
<p>Please note that the Live Share extension is available as <em>Public </em><em>Preview</em>. The extension source code is currently not open source but this should change once the extension is generally available.</p>
</div>
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/vs-code-live-share-plugin.gif" width="919" height="850" title="" alt="" /></div><div><p>Contributing to Open Source projects leads to collaborating with people around the world this is traditionally done via emails or instant messages. But with the rise of extreme programing practices like pair programing being able to remotely share a code editor is a great feature. VS Code has a plugin Live Share that does just that.</p>
<p><span id="more-22550"></span></p>
<h2>Getting Started with Live Share</h2>
<p>If you do not have VS Code already installed, you can read our previous article to get started.</p>
<blockquote class="wp-embedded-content">
<p><a href="https://fedoramagazine.org/using-visual-studio-code-fedora/">Using Visual Studio Code on Fedora</a></p>
</blockquote>
<h3>Installing the Live Share plugin</h3>
<p>First let’s install the dependencies the Live Share plugin requires.</p>
<pre>$ sudo dnf install openssl-libs krb5-libs libicu zlib gnome-keyring libsecret desktop-file-utils xorg-x11-utils</pre>
<p>Once the installation completes, the Live Share plugin is ready to be installed from the Extensions marketplace.</p>
<p>More details on the role of each dependency can be found in the <a href="https://docs.microsoft.com/en-us/visualstudio/liveshare/reference/linux#install-prerequisites-manually">Documentation</a>.</p>
<p><img class="aligncenter size-full wp-image-22971" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/vs-code-live-share-plugin.gif" alt="" width="919" height="850" /></p>
<p>Finally reload VS Code to activate the new plugin.</p>
<h3>Start a Collaboration Session</h3>
<p>To start a new collaboration session, it requires a project to be open in VS Code, so let’s clone the following git repository and open it.</p>
<pre>$ git clone https://github.com/cverna/rss_feed_notifier.git</pre>
<p>This repository contains the source code of the following Magazine article.</p>
<blockquote class="wp-embedded-content">
<p><a href="https://fedoramagazine.org/never-miss-magazines-article-build-rss-notification-system/">Never miss a Magazine article — build your own RSS notification system</a></p>
</blockquote>
<p>In VS Code, use the <strong>[Ctrl+K, Ctrl+O] </strong>combination to select and open the git repository.</p>
<p>Then from the Live Share extension menu start a collaboration session.</p>
<p><img class="aligncenter size-full wp-image-23011" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/vs-code-live-share-plugin-1.gif" alt="" width="728" height="343" /></p>
<p>Live Share requires its user to sign in so that it can display the identity of the session participants. You can easily sign in using a GitHub account for example.</p>
<h3>Ready to collaborate</h3>
<p>To start collaborating Live Share provides a link that can be shared with others. You can get this link in you clipboard by clicking on the <em>Invite paticipants … </em>text<em>.</em></p>
<p><img class="aligncenter size-full wp-image-23014" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/vs-code-live-share-plugin-2.gif" alt="" width="397" height="311" /></p>
<p>Once one or more participant have joined the session you can start collaborating.</p>
<h3>Sharing Code</h3>
<p>This is where Live Share really shines as it shows clearly which participant is currently editing the file.</p>
<p><img class="aligncenter size-full wp-image-23015" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/vs-code-live-share-plugin-3.gif" alt="" width="886" height="412" /></p>
<p>It is also possible to follow a participant. This has for effect to open in your editor all the files that the participant you are following opens.</p>
<p><img class="aligncenter size-full wp-image-23016" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/vs-code-live-share-plugin-4.gif" alt="" width="741" height="267" /></p>
<h3>Sharing Resources</h3>
<p>Another feature of Live Share is to share resources like a server, a terminal or even a debugger session. For example it is very easy to share a terminal session and help a participant setting up a development environment, another example would be to share a database server and to inspect the content of a table.</p>
<h3>Connectivity</h3>
<p>By default the Live Share connection automatically checks if the host machine and the guest machine can communicate directly, if not Live Share uses a relay hosted in the Azure cloud.</p>
<p>It is possible to configure Live Share to use only direct connection between the host and the guest. For that the host machine needs to open a port in the 5990-5999 range and accept inbound local network connections. The guest needs a network route and outbound access to the host on the same port.</p>
<p>Finally set the connection mode to <em>direct</em> in the Live Share settings.</p>
<p><img class="aligncenter size-full wp-image-23018" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/vs-code-live-share-plugin-5.gif" alt="" width="961" height="640" /></p>
<p>The <a href="https://docs.microsoft.com/en-us/visualstudio/liveshare/reference/connectivity">documentation</a> provides more details on the connectivity options.</p>
<p>Please note that the Live Share extension is available as <em>Public </em><em>Preview</em>. The extension source code is currently not open source but this should change once the extension is generally available.</p>
</div>