開発者ドキュメント

VisualStudioCodeでLiveShareを使用する方法

序章

Live Share は、開発者間のリアルタイムコラボレーションを可能にするVisualStudioCodeの拡張機能です。 これにより、ユーザーはセッションを他の人と共有できるようになり、コードを編集したり、サーバーやデバッグセッションを共有したりできるようになります。

この記事を読み進めると、2台の異なるコンピューターのスクリーンショットが表示され、LiveShareがどのように機能するかを示す実例が示されます。

わかりやすくするために、このチュートリアルでは、セッションの招待状を送信する人を招待者と呼び、招待を受け入れる人を招待者と呼びます。

前提条件

このガイドを開始する前に、次のものが必要です。

ステップ1—拡張機能をダウンロードする

注: Visual Studio Codeの最新バージョンには、デフォルトでLiveShareが含まれるようになりました。 LiveShareとLiveShareAudio拡張機能を組み合わせたLiveShare ExtensionPackもあります。 このチュートリアルでは、LiveShare拡張機能に焦点を当てます。

Live Share を利用するための最初のステップは、拡張機能としてインストールすることです。 VS Codeでは、 extends タブを開き、Live Shareを検索し、[install]をクリックして、インストールが完了したらリロードすることができます。

その後、サインインする必要があります。 現在のところ、MicrosoftまたはGitHubアカウントでログインすることを選択できます。

サインインするには、下部のステータスバーにあるサインインボタンと人物アイコンを使用します。

ステップ2—セッションの共有と参加

すべてのサインインが完了すると、他のユーザーと共有するセッションを作成する準備が整います。 信頼できる人とのみライブセッションを共有するようにしてください。 ご覧のとおり、誤って使用すると有害になる可能性のある特定のアクセスをユーザーに許可します。

下部のステータスバーでユーザー名をクリックして開始し、使用可能なオプションからコラボレーションセッションの開始を選択します。 または、コマンドパレットを開くこともできます(CMD+SHIFT+P Macでは、 CTRL+SHIFT+P Windowsの場合)と入力します Start Collaboration Session

招待リンクがクリップボードにコピーされたことが通知されます。

このリンクを誰かと共有して、セッションに招待してください。

招待者の観点から、招待を受け入れるには、下部のステータスバーでユーザー名をクリックし、コラボレーションセッションに参加を選択します。 または、コマンドパレットを開いて、次のように入力することもできます。 Join Collabation Session.

プロンプトが表示されたら、招待者から送信された共同セッションリンクを入力します。 招待者は、誰かがセッションに参加したときに通知されます。

デフォルトでは、セッションに参加すると、招待者がコードをナビゲートするときに招待者の後に自動的に続きます。 これは、招待者が自分で移動するまで発生します。 そこから、どちらの側も自由にナビゲートして編集できます。 さらに、ここに示すように、両側にもう一方のエディターがどこにあるかを示すマーカーが表示されます。

他のユーザーのコンピューターで強調表示するコードを選択することもできます。 これを使用して、たとえばコードのセクションに注意を引くことができます。

ステップ3—共同作業者を制限する

デフォルトでは、誰かとセッションを共有する場合、その人はワークスペース内のすべてのファイルを編集するためのアクセス権を持ちます。 特定のファイルを編集する人を信頼することは1つのことですが、ワークスペース全体をその人に開放することは好ましくない場合があります。

ありがたいことに、Live Shareを使用すると、共同編集者が表示および編集できるファイルを制限できます。

作成する .vsls.json 共同編集者を制限するファイル。 基本的な構成は次のようになります。

.vsls.json
{
    "$schema": "http://json.schemastore.org/vsls",
    "gitignore": "none",
    "excludeFiles": [],
    "hideFiles": []
}

私たちが最も気にかけている2つの鍵は excludeFileshideFiles. excludeFiles ユーザーにアクセスさせたくないファイル名の配列です。 hideFiles 共同編集者が特定の状況下で隠しファイルを見ることができることを除いて、同様です。 セキュリティの詳細については、ファイルアクセスと可視性の制御に関するドキュメントをお読みください。

ステップ4—サーバーを共有する

ローカルでアプリケーションを操作する場合、他のユーザーと共有するのは難しい場合があります。 コードをGitHubにチェックインして、他の人にクローンを作成させることもできますが、それでも、依存関係をインストールしてサーバーを自分で起動する必要があります。 Live Shareを使用すると、サーバーをローカルで起動し、他のユーザーが同じ実行中のアプリケーションにアクセスできます。

招待者として、通常どおりサーバーを起動します。 次に、下部のステータスバーでユーザー名をクリックし、共有サーバーを選択します。 または、コマンドパレットを開いて、次のように入力します Share Server.

招待者として、次の場所に移動できます localhost サーバーを表示するための適切なポートで。

ステップ5—端末を共有する

ファイルシステムをナビゲートする方法など、ターミナルで誰かにコマンドを教えたいシナリオがあるかもしれません。 npm、開発サーバーの起動など。 以前の機能と同様に、これはリモートで行うのが複雑になる可能性があります。 Live Shareには、この問題を解決するための端末共有機能も含まれています。

端末の共有は、サーバーの共有に似ています。 他の機能と同様に、共有端末オプションを選択します。 その後、どちらかを選択します read only また read/write 共同編集者の権限。

端末が共有されると、共同編集者は端末を表示(および該当する場合は編集)できるようになります。 このスクリーンショットは、招待者が画面にメッセージをエコーした後の端末の招待者ビューを示しています。

ここから、招待者に、開発サーバーの起動方法、システムのビルド方法、または関連する可能性のあるその他の方法を示すことができます。

結論

この拡張機能には、多くの便利な機能が含まれています。 Visual Studio CodeがすぐにWeb開発者のお気に入りのエディターになると、この拡張機能は、教育、メンタリング、コラボレーション、デバッグなどへのアプローチ方法を変える可能性があります。

モバイルバージョンを終了