VSCode の Live Share プラグインを使ってペアプログラミングする

AWS運用自動化サービス「Cloud Automator」

こんにちは、技術1課の加藤です。
みなさん、エディタは何を使っていますか。

ぼくは最近導入した VSCode の使い勝手の良さに、惚れ惚れしております。

今回はVSCode布教活動「VSCode プラグインの使い方」第2弾!
(前回記事: VSCode の Remote – SSH 機能を使って EC2 上で開発する)

Live Share プラグインをご紹介します。これを使って、お手軽にペアプログラミングしちゃいましょう。

概要

Live Share は 簡単な設定で複数人による共同ファイル編集が行える VSCode のプラグインです。
前回紹介した Remote – SSH と同じく、こちらも VSCode の開発元である Microsoft が開発しているプラグインとなります。

 

Live Share を導入することで、 自分の編集画面を他の人に共有したり、一緒にファイルの編集をしたりすることができるようになります。
「リモートでペア / モブプログラミングをしたい!」という方におすすめです!

手順

0. VSCode をインストール

まだ VSCode をインストールしていない方は、こちらからダウンロードしてインストールしてください。

Visual Studio Code – コード エディター | Microsoft Azure

1. VSCode にプラグインをインストール

メニュー の [Extensions] からlive と検索し、 Live Share を選択します。
(※ Liveshare とつなげて書くと表示されないのでフルネームで検索する場合は live と share の間を開けてください)

表示される Install ボタンを押しインストールします。

左側のメニューに下のような [Live Share] アイコンが表示されていれば OK です。

2. Live Share を開始する

では早速プラグインを使って Live Share をしてみましょう。
まずは [Live Share] アイコンをクリックし、表示される中から [Start Collaboration Session…] を選択しましょう。

初回利用時には Microsoft または GitHub アカウントでの認証を求められます。
(画像では GitHub アカウントを利用しています)

認証が完了すると、VSCode に戻ってきます。
下のようなモーダルが表示されていれば、セッションの作成が完了しており、セッションに参加するためのリンクがクリップボードにコピーされた状態になっています。

コラボレーションしたい相手にリンクをシェアして、セッションに入ってもらいましょう。
[Session Details] の Participants に相手の名前が表示されます。

あとはファイルを編集するだけです。
相手のカーソル位置が表示され、編集がリアルタイムで反映されていきます。

Live Share の便利機能

Live Share にはファイルの共同編集機能だけでなく、いくつかの便利な機能があります。
そのうちいくつかを抜粋してご紹介します。

1. Shared Server 機能

Web アプリケーションの開発を行なっていると、ローカルで立ち上げている開発サーバーをシェアして見た目の確認を行いたい場面が出てきます。
そんな時に使えるのがこの機能です。

ローカルで立ち上げた開発サーバーを、 Live Share している相手にシェアすることができます。

2. Shared Terminal 機能

こちらはターミナルをシェアする機能です。
Read-Only または Read/Write の設定ができ、自分が叩いているコマンドを相手に見せたり、相手にコマンドを叩かせたりすることができます。

ただしシェアされるターミナルは セッションを開始した人のターミナル となりますので、 Write 権限をシェアする際はご注意ください。

AWS運用自動化サービス「Cloud Automator」