🎉

気持ちよくLive Shareを使うために

2020/11/26に公開

VS Code

liveshare

tech

コロナ禍の昨今、リモートワークも当たり前になってきたと思いますが、リモートでペアプロやモブプロを行うときに便利なのが、VSCode + Live Share です。

VSCode + LiveShare はとても便利ですが、いくつか問題点もあるため LiveShare では設定が重要です。

VSCode は必ず最新版を使って！！！！

VSCode は常に最新版にアップデートしておきましょう。画面左下の設定アイコンにバッヂが表示されていたら、アップデートが必要な合図です。

VSCode は未保存の編集中データを含めた、全データがディスク上に保存されているため、編集中のファイルなどがあっても、再起動をした場合、前の状態を復元してくれます。

なので、安心してアップデートしてください。

また VSCode 拡張も、自動アップデートしてくれますが、ときどきリロードが必要なものがあります。拡張タブを開いたときに、Reload みたいにかかれているものがある場合はそれをクリックするとリロードしてくれるのでリロードしておきましょう。

バージョンが古いと思わぬトラブルになりがちです。VSCode を使う人は、Live Share 関係なく、常にアップデートを心がけてください。ときどきユーザーインターフェースの変更などが行われる場合もありますが、どうせアップデートしないといけないので、早めに移行しておくべきです。

Live Share だとバージョンミスマッチは不要なトラブルになりがちです。ご注意を。

フォーマッタを設定しておく（ホストの人向け）

言語に合わせた formatter のプラグインを導入しておく
- JavaScript なら prettier
- 複数のフォーマッタがインストールされているとかち合うので、デフォルトのフォーマッタを選ぶ必要があるかもしれないので、いちど F1 のコマンドパレットで Format Document を実行して、対象のファイルがちゃんとフォーマットされるか確認しておきましょう。必要に応じてデフォルトフォーマッタの設定もしましょう。
設定で、format on save を有効にする

モブプロやペアプロをしているときに、手動で書式整形をするのはとても、体験を悪くするため、Live Share ホストをする人は、必ずこれらの設定をしておきましょう。

必要に応じて `.vsls.json` を設定する（ホストの人向け）

VSCode Live Share は .gitignore に設定されたファイルを、リモートには表示しません。たいていの場合は困らないのですが、特定のケースで困ることがあります。

困ったときには、プロジェクトのルートに .vsls.json という JSON ファイルを置くことで、その問題を回避できます。

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

詳しい設定は、https://docs.microsoft.com/ja-jp/visualstudio/liveshare/reference/security#properties を御覧ください。細かい設定が可能です。

セッションの始め方

ステータスバーの左下に Live Share の文字が見えると思いますが、この状態では、Live Share にサインインができていません。

ホストとしてコラボレーションセッションを開始する

ホストとしてセッションを開始する場合は、このLive Shareをクリックすると、Microsoft か GitHub にサインインを促されます。

GitHub 経由でサインインする人が大半だとは思いますが、Microsoft か GitHub お好きな方でサインインしてください。どちらの場合でも、いったんウェブブラウザ上でサインインを促されますので、指示通りにサインインをして VSCode に戻ってきてください。

変なマークに挟まれて、自分がサインインしている名前と、セッションの参加人数が表示されています。

この状態でクリップボードに、セッション用の URL がコピーされている状態なので、何かしらの方法でセッション参加者に、URL を教えてあげてください。もし、何かのミスで URL が消えてしまったら Copy again ボタンを押すか、F1 を押してコマンドパレットを出してから Live Share: Copy Collaboration Link を実行してください。

参加者としてコラボレーションに参加する

参加する側の人は教えてもらった URL にアクセスするか、Live Share タブで Join をします。

Join をクリックすると、右下に Sign in with VS Live Share to join a collaboration session. と出てくるので Sign In しましょう。ここで Continue as anonymous を選ぶ必要があることはまずないはずです。

セッションホストと同様に、ブラウザ上で Microsoft か GitHub 経由でサインインをしてから VSCode に戻ってくるはずです。

Enter the URL....... と言われるので、先程の URL をここで入力すればブラウザを経由せずにセッションに参加できます。

どちらでもかまいません。

よくあるトラブル

VSCode で動きがないなーと思ったら、ウィンドウが出てないか？ブラウザでサインインしようとしていないか確認してください。

また、ステータスバーに、Microsoft か GitHub の ID が表示されていなければ、サインインできていません。