私とオンラインペアプロしよ？（VSCode : Live Share）

はじめに

• コロナの影響でリモートワークが主流となり、対面で相手のプログラムを自由に見ることが難しくなりました
  • レビュアー：git pushするには実装が中途半端で今はエラーで動かない。。。
  • レビューイ：zoom 等の画面共有だと全部口で指示を出さないと目的のファイルやメソッドが見られない。。。
• そんな時、友人に教えてもらった VSCode の拡張機能、Live Share で解決できます
  • [Microsoft]Live Share Microsoft 公式で安心！
  • [Visual Studio | Marketplace]Live Share

バージョン

• Windows10 Pro
  • 21H1
• VSCode
  • 1.55.0
• Live Share
  • 1.0.4070

拡張機能インストール手順

1. 拡張機能検索ボックスに「live share」を入力し、「インストール」ボタンをクリックします
   
2. インストール後、「Share now」ボタンをクリックします
   
3. GitHub か Microsoft か、連携するアカウントを選択します
   今回は Microsoft を選択
   
4. Live Share が Microsoft アカウントでサインインできるように「許可」ボタンをクリックします
   
5. ブラウザが立ち上がるので、Microsoft アカウントにログインします
   
6. ログイン後、この画面が出たらページを閉じます
   
7. VSCode で共有方法について説明ダイアログが表示されるので、内容を確認し「OK」を選択します
   
8. ファイアウォールにブロックされないよう、※「プライベートネットワーク」のみにチェックを入れ、「アクセスを許可する」ボタンをクリックします
   ※社内に会社PCがあり、ドメインに参加しているケースでは、「ドメインネットワーク」のみにチェックを入れます（そのほうが無難かと）
   
9. 下の画面になったら拡張機能のインストール完了です
   

• フッターに Live Share が表示されない場合は、以下のリンクの通り、Ctrl + p からの「Live Share: Repair Installation」を入力し、Enter することで、表示されます
  「ソースコード共有手順」のゲストで共有リンククリック時に初めて Live Share をインストールする際、うまくいかず、こちらの記事に助けられました

https://wonwon-eater.com/vscode-live-share-error/#outline__3

ソースコード共有手順

1. 【ホスト】「共有(読み取り/書き込み)」ボタンをクリックします
   
2. 【ホスト】クリップボードに共有用のリンクがコピーされるので、「×」ボタンをクリックします
   
3. 【ホスト】共有する相手に Ctrl + v で共有します（キャプチャは slack）
   
4. 【ゲスト】共有されたリンクをクリックし、立ち上がったブラウザのアラートの「Live Share for VS Code を開く」ボタンをクリックします
   
5. 【ゲスト】VSCode が立ち上がるので、ホストが許可するのを待ちます
   
6. 【ホスト】読み取りと書き込みを許可する場合は「Accept read-write」ボタンをクリックします
   読み取りのみ許可する場合は「Accept read-only」ボタンをクリックします
   
7. 【ホスト】左の「セッションの詳細」タブの Participants に共有相手の連絡先が表示されれば、共有成功です
   
8. 【ゲスト】ホスト側のソースコードが表示されれば、共有成功です
   

ソースコード共有停止

1. 左の「セッションの詳細」タブの停止アイコンをクリックすると共有を停止します
   

おわりに

• 共有相手のソースコードを直接編集できることに感動しました
• zoom しながら口頭で話しつつ、具体的にソースを見せることができるのは、効率的で相手も自分もすぐ理解でき、画期的な技術だと思います
• どんどん使い込みます！

引用URL元

• [won won eater]VSCode Live Shareで操作しても何も反応がないときにすること
  • https://wonwon-eater.com/vscode-live-share-error/