【Insider版】VS CodeのRemote DevelopmentでRaspberry Pi内のファイルを編集する

はじめに

Raspberry PiでRemote Developmentを動作させる方法について記載します。
接続先のRaspberry Piを「リモート先」と記載しています。

また、正式リリース版(Insiderではない方)は以下に記載しましたのでこちらを参照お願いします。
https://qiita.com/hukatama024e/items/9f96730381f0a34c6da6

動作環境

• Visual Studio Code - Insiders
  

• Raspberry Pi 3(armv7)

• Raspbian 8.0

• Remote Development 0.15.0

• Remote - SSH(Nightly) 2019.6.39966

Remote Developmentとは

リモート先のファイルを編集するVS Code公式の拡張機能です。2019/6/11にarmv7のRaspberry Piに対応されました(2019/6/30時点ではVS Code Insidersのみ)。
https://twitter.com/joaomoreno/status/1138379435839754240

以下のようにRaspberry Pi内のファイルを編集できます。

※VS Codeの拡張機能で「Remote VSCode」もありますが別物です。

準備

SSH configファイルを用意

Remote DevelopmentにはRaspberry Piと接続するためのSSH configファイルが必要です。
私は以下のURLを参考にSSH環境及びSSH configファイルを作成しました。
https://tool-lab.com/2013/11/raspi-key-authentication-over-ssh/

Windows環境では以下のパスのconfigファイルをRemote Developmentが参照します。

• C:\Users\(ユーザー名)\.ssh\config
• C:\ProgramData\ssh\ssh_config

VS Code Insidersをインストール

以下URLからVS Code Insidersをインストールします。
https://code.visualstudio.com/insiders/

拡張機能のインストール

VS Code Insidersに以下の拡張機能をインストールします。

• Remote Development
• Remote SSH(Nightly)

Remote SSH(Nightlyではない方)のアンインストール

既にRemote SSHがインストールされている場合はアンインストールする必要があります。

Remote Developmentを動かしてみる

1. VS CodeからSSH接続する

左端に追加されたモニターと><が表示されたアイコンをクリックして接続したいsshのと右側に出るアイコンをクリックします(またはコマンドパレットから「Remote-SSH: Connect to host..」を実行します)。

その後、初回などの場合はvscode-serverがインストールされるのでしばらく待ちます。

2. リモート先のディレクトリを開く

Open Folderボタンを押下して、開きたいリモート先のディレクトリを選択してOKを押下します。

3. ファイル編集

通常のVS Codeのようにファイルやディレクトリを作成をしたり開いたりできます。
編集して保存した時にリモート先のファイルに編集内容が反映されます。
また、下のウィンドウの「2:SSH Tunnel」をクリックして別のターミナルを選択することでリモート先のターミナル操作も出来ます。

トラブルシューティング

個人的に詰まった点とその対応について記載します。
GitHubのissuesの内容を確認して解決したため、ここに上がってない箇所についてはissuesを確認してみるといいかもしれません。

「Downloading VS Code Server failed」というエラーが出て接続出来ない

接続時にVS Code Serverのダウンロードを失敗しています。
VS Code InsidersのRemote Developmentを使用していない可能性があります(VS Codeの場合はここで失敗します)。その場合はVS Code InsidersのRemote Developmentを使用するようにします。

「Unauthorized client refused」というエラーが出て接続出来ない

まず、リモート先の.vscode-server-insiders直下にある.(VS Code InsidersのコミットID(SHA-1ハッシュ)).logを確認します(今回の場合は.fe0c3e785c22c3ed2d5caa7178488c92d62bdb08.log)。
内容は以下のようになります。

*
* Visual Studio Code Server
*
* Reminder: You may only use this software with Visual Studio family products,
* as described in the license https://aka.ms/vscode-remote/license
*


{ errorCode: 'load',
  moduleId: 'spdlog',
  neededBy: [ '===anonymous3===' ],
  detail:
   Error: /usr/lib/arm-linux-gnueabihf/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by /home/pi/.vscode-server-insiders/bin/fe0c3e785c22c3ed2d5caa7178488c92d62bdb08/node_modules/spdlog/build/Release/spdlog.node)
(中略)
Unauthorized client refused.
Unauthorized client refused.

私の場合はgccのバージョンが古いことによりCXXABI_1.3.9が存在していなかったためにエラーが出ていました。
以下を参考にgcc6を入れたところ解決しました。

参考

https://www.hanselman.com/blog/VisualStudioCodeRemoteDevelopmentOverSSHToARaspberryPiIsButter.aspx
https://github.com/microsoft/vscode-remote-release/issues/13
https://github.com/microsoft/vscode-remote-release/issues/103#issuecomment-497118857