0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

VSCode Live Shareの使い方

Last updated at Posted at 2020-11-13

##まず初めに
テレワークに向けてリモートでのペア・プログラミング、コード・レビューを調べる機会があったので調べた内容、使い方などを書いていきます!
##Live Shareってなんだ?
使っているVSCodeに対応しているプログラミング言語ならなんでもリアルタイムで他の人と共有、編集、デバッグできるツールのこと!

##準備するもの

  • vscodeのダウンロードリンク
    https://code.visualstudio.com/download

  • どちらかのアカウントが必ず必要です。
    Microsoftアカウント
    GitHubアカウント
    ※初回の共有時にはサインインを求められます

##LiveShareのダウンロード
VSCodeのインストールが完了したら
1.左の欄の上から5つの目(拡張機能)をクリックorCtrl+Shift+Xで開く。
2.左上の検索欄からLive Shareと検索
3.検索したら画像のようにでてくるので一番上をインストール。
キャプチャ.PNG

##手順(共有する側)
1.ダウンロードが完了したらまずはファイルから共有したいフォルダを開いておこう。
image.png
2.読み取り/書き込みor読み取り専用
LiveShare2.PNG
※ 現状 読み取り/書き込みが相手からは読み取り専用で、読み取り専用が読み取り/書き込みになっていたので注意
※ 下記の画像はMake Read-only or Make red/writeクリックしてもいいですし、×を押して閉じてもOK
※ 上記の画像からの起動だとここはあまり意味ないですが、左下のLiveSharaをクリックして起動した場合は×ではなくMake Read-only or Make red/writeをクリックして起動してあげましょう。

LiveShare3.PNGLiveShare4.PNG
3.押した後に下記の画像がでてくるので左上の←をついているところをクリックします。
(コラボレーションリンクコピー(←マークのやつ)のとなりのコラボレーションセッションの停止(禁止マーク)でいつでも共有を止めることができます。)
そうするとURLをコピーされ連絡ツールで教えてあげましょう。
一度でもセッションに参加すると連絡先に追加されるのでそこで[この連絡先とのチャット]でURLを張ってあげても相手に知らせることができます。
image.png

##手順(参加する側)
1.参加をクリックします。
LiveShare2.PNG
2.相手から受け取ったURLをペースト。ブラウザから接続することも可能。
そうすることで自動的に相手との共有が開始されます。
image.png

##機能説明

image.png

  • Participants
    相手が現在共有されているフォルダー内で何を表示しているのかが出てきます。
    クリックすることで飛ぶことが可能です。
  • Shared Servers
    サーバーの共有
  • Shared Terminals
    VScodeのターミナルを共有
  • チェットチャンネル
    お互いに書き込むことが可能
0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?