Home

VSCode 拡張機能で始めるWeb開発 - Live Share編

Live Shareの使用

Live Shareは、VSCodeの拡張機能で、リアルタイムでコードを共有し、共同作業を行うことができます。

目次

1.Live Shareのインストール

  1. VSCodeを開きます。
  2. 左側の拡張機能アイコンをクリックします。
  3. "Live Share"と検索し、インストールします。
    4. Live Share

2.使用方法-ホスト側

  1. Live Shareを開始するには、左のLive Shareアイコンをクリックします。
    2. 拡張機能アイコンの画像
  2. ホストを開始するには、"Share(Read/Write)"をクリックします。
    3. Live Share
  3. invite participationを選択するとコピーされるリンクを参加者に共有
  4. ここで live Serverという部分も確認しておきましょう。参加者に共有できているはずです。
    5. Live Share
  5. 参加者が参加したらこんな表示が出てきます。Read-Whiteを許可しましょう
    6. Live Share
  6. ホスト側の操作はこれで終了です。
  7. ホストを終了するには、Stop Collaboration Sessionボタンを押します。
    8. Live Share

3.使用方法-ゲスト側

  1. ホストから送信されたリンクをクリックします。
  2. VSCodeを開き、joinしましょう
    3. ※人によって挙動が違う可能性があります。
    Live Share
  3. ホストの承認を待ちます...
  4. 承認されるとホストのコードが表示され、リアルタイムで編集できます。
    5. ※ホストの挙動を追ってしまっている場合は下記のどちらかで対処しましょう。
    Live Share
  5. ゲスト側が live-serverのプレビューを参照したい場合は、ホストがserverを利用していることを確認して、Shared ServerからLive Serverにアクセスします。
    6. Live Share
  6. ゲスト側もこれにて操作は終了です

これで、リアルタイムでコードを共有しながら共同作業ができます。

まとめ

Live Shareを使用することで、リアルタイムでコードを共有し、共同作業を行うことができます。これにより、リモートでのコラボレーションが容易になります。 このマニュアルを参考にして、Live Shareを活用してみてください。 ※この使用方法は一例です。自身が使いやすいような共有方法を調べながら試してみましょう。