マイクロソフトがVS Codeでペアプログラミング環境を構築できる拡張機能をパブリックベータ開始を発表した。

リモート環境同士のコードの同時編集にはこれまで、Cloud9がAWS化したり、PaizaCloudなどのIDEが登場していたが、VisualStudio Code上で利用できるこの機能拡張の登場でより強力なIDEがリモート学習などのシーンでも活躍することが容易に想像できる。

インストール方法

VisualStudio Codeの拡張機能タブで検索窓に「Visual Studio Live Share」と入力すると「VS Live Share」と表示されるので、インストールをクリックする。

※今回検証のため、手元の二台のPC上のVS Code両方に拡張機能をインストールしました。

再読み込みをクリックした後、ステータスバーの「Sign in」をクリックしてログインする。

Microsoftアカウントか、Githubアカウントを利用できる。

コラボレートする準備ができました。

ログイン後、コラボ元のVS Codeからステータスバーの「Share」をクリックしてセッションを作成する。

「Share」クリック直後、InfomationメッセージとしてFirewallを超えて自動で接続する旨のメッセージが表示されるので「OK」をクリック。

その直後に、接続元のVS Code側にクリップボードに招待リンクを含んだURLがコピーされたことを知らせるメッセージが表示されます。

以下のようなURLがコピーされているので、Slackやメールなどで、コピーされたURLを接続先のPCに送りましょう。

「https://insiders.liveshare.vsengsaas.visualstudio.com/join?xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx」

このURLをブラウザで開くと、コラボレーションのためのセッションに参加した旨が表示され、VS Codeが自動で開きます。

開いた後は、同じコードを開いてどこに相手のカーソルがあるかわかるので、同時に同じ行を編集することもできる。

▲kenta fujiwara アカウントによる編集行を、▼ fk_2000 アカウントによって追記している様子。※ステータスバーには自身のアカウントが表示されているので、相手が何を書いているかリアルタイムで把握できる様子がわかる。

また、VS Live Shareには、相手PCに自PCのポートを共有させる「Share Server」の機能が備わっている。すなわち、一緒に編集したコードを接続元のローカルWebとしてブラウザで参照できるので、開発環境として同じPCのWebサーバを使ったデバッグが可能となっている。

ステータスバーの自身のアカウント名をクリックすると、接続中のコラボレーターに対して何を行うかのメニューが現れる。

その中から「Share Server」をクリックすると自PCのデバック用のWebアドレスの入力が求められる。（ここでは仮に「localhost:80」を入力した）

入力後、Enterを押すと、コラボレーションセッションにローカルTCPが公開された旨を示すメッセージが表示され、接続先から接続元のWebサーバに接続でき、あたかもローカルWebを表示するようにデバッグできる。

他にも、ターミナルを共有したり、3人以上招待したるすることもできるが、ここでは省略する。

まとめ

接続元のVS Codeでワークスペースにフォルダを追加しておくことで、Share時にワークスペースごと共有することとなるが、接続元のワークスペースから削除すると下記のメッセージが表示され、コラボレーションのセッションごと切断される。チャットツールなどで連絡しながら作業を行っていれば突然切断となっても対処にしようがあるが、編集中の状態が保障できな状態にもなりかねないので、コラボ接続中のワークスペースの取扱いには注意したい。