VS CodeのLiveShare機能でリモートワーク

プロジェクトにはよりますが、今回はLaravelのプロジェクトに参画することになったため、VS Codeを採用しました。会社ではRDP系のアプリとしてGoogle Remote Desktopが使われています。ただそれで操作する時に微妙に遅延がありました。それでその操作の遅延を対抗するために、もしかしたらLiveshareで繋ぐこともできるのではと、試してみました。

Liveshareでリモート操作する

この機能は通常チームの間の協力やコードレビューするときに使われるのです。ライブシェアは自宅のPCにファイルをコピーするのではなく、あくまでもリモート接続で、双方の承認がないとつながりません。なのでソースコードは会社のPCから持ち出さないため、そういうルールがある会社にも通用する手段になるかと。最も、使い慣れている環境で開発ができるメリットが大ですね。

ステップは以下のようになります。

• GithubまたはMicrosoftのアカウントを用意する
• 家のPC/Mac/LinuxのVSCodeにLiveshareをインストール
• 会社のPCのVS codeにもLiveshareをインストール
• 会社のPCでLiveshare要請を立ち上げる→ここはアカウントにログインしたら名前が参加者に見られるが、ログインしたくてもGuestとして請可能。
• 家のPCでLiveshare要請を受け入れる→ここはアカウントのログインが必須で、GithubもしくはMSでログインする。

アカウントについて、筆者は家でGithub、会社では会社のメールアドレスで作ったMSのアカウントでログインしています。要請を立ち上げる時にリンクが作られますのでそれを参加者側に送ればOK。一回連携を取ると、次からは連絡先から直接inviteできます。

また、シェアできるのがコードだけではなく、コマンドラインやローカルホストも参加者側のPCで開くことが可能。コマンドラインの場合はデフォルトとしてread onlyなので、要請側が右クリックでread/write権限を与えることが必要。もちろん、コードの編集などの操作はどちらからでも可能ですが、使うVSCodeの設定がそれぞれ違っても問題なく、それぞれの設定が適応されます（ただ一部のextensionがliveshareに適応できない）。

Gitの変更履歴に影響はあるかと最初思ったのですが、どうやらLiveshare経由で参加者側が変更しても、変更者が要請側で変わりはありません。コミットするのも、シェアされたコマンドラインを使うので、名前が要請側になります。

いくつかの問題点

Liveshareのおかげで入力上の遅延がなくなったし、慣れている環境で開発することも可能になりました。ただ100%ローカル環境通りに開発できるかどうかというと、そうでもありません。やく1ヶ月くらい使っていましたが、少なくとも以下の問題点がありました。

• code snippetによるコードの補完、テンプレート入力が遅くなる。ローカルの設定が適応されていればこんなことがなかろうと思ったのですが、なぜかよくわかりません。時に反応しないケースもありますが、ギリギリ許容範囲内の問題です。

• 言葉では伝わりにくいのですが、コマンドラインの幅と表示内容が乱れる問題(ここにも報告が)。例えばコードの改行の場合に中途半端なところで改行してしまう。家では32インチ4kのディスプレイを使っていて、会社では1080pのものでした。最初は会社側の解像度が低いため、コマンドラインの幅が足りないのが原因だと思いましたが(物理的に同じ幅であっても、解像度の差より、表示できる内容の量が違う)、どうやら幅は参加側で初回コマンドを実行する時に決める様子でした。参加者側でコマンドを実行するまえにいつもcmd+bでサイドメニューを閉じてからやっています。一応連携のコマンドラインの幅と高さの設定項目はありますが、設定が間違っているせいか、幅をデフォルトの120から150にしてもその効果があまり実感できていません。
  

• ときにliveshareセッションに接続できなくなる。基本的に一時的なもの。原因はあくまでも推測ですが、何かの理由で接続する側のvscodeのログインがログアウトされたかと。この問題を回避するために、今はいつも仕事が終わると、要請側でセッションをクローズします。次からは両方ともログインしている状態で（ログインすると連絡先に名前が現れる）、リンクコピーではなく直接要請を送信する。これで接続できない問題とあいませんでした。

• 一部のexstentionはliveshare環境に適応できない。beautify, prettifyといったフォーマット化ツールが適応できない模様。入力補完にtabinetを使っていますが、javascriptファイルでの入力補完がなぜか起動できず、括弧まで一々書くのが結構面倒でした。他にも色々とバーチャルワークスペースに適応できないものがあります。
  

• 場合によっては不便ですが、gitignoreファイルにあるフォルダー・ファイルは共有されません。例えば、.envファイルは参加側に見つからないはず（ただcmd+pで打てば開ける）、laravelのvendorフォルダーもシェアされません。.envファイルを編集して保存してみると保存できないこともあり、変更した内容が勝手に元に戻ってしまいます。これは確実に起こることではないが、一応注意する必要があると。

• 時にファイル衝突が発生すること。これにやられたことが一度あり、変更したのになぜか機能しない、訳わからんバグだと思いました。要請側と参加側のファイルがなんらかの理由で衝突になり、保存はできません。ただ、参加側では保存されているように見えてしまい、もし参加側だけでデバグすれば絶対分からない問題です。要請側のvscodeに、ファイル衝突のメッセージ通知が右下から浮かびますので、要請側で解決しなければならないと。

といった具合でした。

自分が自分にliveshareするのが、完璧なリモートコーディングの解決策ではありませんが、リモートデスクトップから操作することよりはだいぶ楽だと。もし1)vscodeを使っている、2)リモートデスクトップの操作遅延問題に悩まされている、のであれば、試してみる価値があると思います。