Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?
@hukatama024e

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

More than 1 year has passed since last update.

はじめに

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

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

動作環境

  • Visual Studio Code - Insiders
    vscode_insiders_env.PNG

  • 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内のファイルを編集できます。
remote_develop_raspi_ex1.PNG

※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 SSH(Nightlyではない方)のアンインストール

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

Remote Developmentを動かしてみる

1. VS CodeからSSH接続する

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

remote_develop_raspi_ex2.PNG

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

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

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

3. ファイル編集

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

remote_develop_raspi_ex4.PNG

トラブルシューティング

個人的に詰まった点とその対応について記載します。
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

8
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
hukatama024e
組込み系プログラマ

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
8
Help us understand the problem. What is going on with this article?