VisualStudioとVSCodeのLiveShare機能について紹介

2023.01.12 開発環境／ツール

ブログ

Visual Studio

1. はじめに

こんにちは、エンジニアの末武です。
今回は業務で試してみたVisualStudioのLiveShare機能がとても便利だと感じたため紹介させていただきます。

LiveShare機能は、VisualStudio及びVisualStudioCodeで使用可能なコードの共同編集機能です。
一つのソードコードを複数人で閲覧・編集し、デバッグ操作等も可能なのでペアプログラミングやコードレビューに便利な機能となっています。

必要実行環境は以下になります。

その他利用のためにはMicorosoftアカウントもしくはgithubアカウントが必要になります。
VisualStudio2019には標準で機能が搭載されていますが、VisualStudio2017とVSCodeで使用するためには拡張機能のインストールが必要になります。

※本記事では、全てVSCodeとVisualStudio2019での動作において解説していきます。弊社の開発環境にないVisualStudio2017での紹介は行いません。予めご了承ください。

※VSCode拡張機能

_{・VisualStudio}の場合
共有したいプロジェクトを開き、画面右上にある「Live Share」ボタンを押す。
※Microsoftアカウントでログインしていない場合はアカウントへのログインを促されます。

アカウントへのサインインが完了するとLiveShareセッションが開始され、招待用のリンクがクリップボードにコピーされます。

セッション開始後は、LiveShareウィンドウから参加者の確認やセッションの終了などの操作ができます。

・VSCodeの場合
LivaShare拡張機能をインストールしてあると、VSCodeの左下のステータスバーに「Live Share」ボタンが表示される。

LiveShareボタンを押下すると、MicrosoftアカウントもしくはGitHubアカウントでのサインインを求められます。

セッション開始後は、LiveShareウィンドウから参加者の確認やセッションの終了などの操作ができます。

ホストからLiveShareへのリンクを送ってもらい、ブラウザでリンクを開くとLiveShareを開くアプリケーションを選択できます。VisualStudioもしくはVSCodeが選択可能です。

どちらか選択するとアプリケーションが起動し、サインインしていない場合はアカウントサインインを促されてからLiveShareセッションへ参加できます。
※ゲストの環境がVSCodeもしくはVisualStudio2017の場合は拡張機能をインストールする必要があります。

以降の画像は左のウィンドウがVSCodeで、右のウィンドウがVisualStudioになっています。
※今回は、それぞれ別アカウントでサインインすることで、LiveShareセッションに参加しています。

・コード共有
LiveShareセッションに参加すると、各参加者のエディターにおけるカーソルの位置が表示されます。

<img src="http://www.w2solution.co.jp/tech/wp-content/uploads/2021/04/DisplayFirst-2.gif">

・他の参加者の追跡
LiveShareウィンドウの参加者一覧から参加者名をクリックすると、自動追跡がONになり他の参加者のカーソルを自動で追跡することができます。

<img src="https://www.w2solution.co.jp/tech/wp-content/uploads/2021/04/trace.gif">

・コードの共同編集
共有しているソースコードは参加者それぞれで編集を行うことができます。

<img src="https://www.w2solution.co.jp/tech/wp-content/uploads/2021/04/edit-2.gif">

・デバッグ
デバッグ操作の共有を実施し、参加者がそれぞれステップインやステップオーバー操作を行うことができます（。）

<img src="https://www.w2solution.co.jp/tech/wp-content/uploads/2021/04/debug.gif">

いかがだったでしょうか。
withコロナ時代では、リモート作業が一般的になってきました。今回紹介したようなリモート作業を助けてくれる機能は、今後うまく使っていくことで作業効率の大幅な向上を期待することができるでしょう！
興味をお持ちになった方はぜひ試してみてください！