VSCodeのSSH接続機能で、RaspberryPi内のコードを編集してデバッグ

# VSCodeとは？
マイクロソフトが開発したソースコードエディタ「Visual Studio Code」の略です。
無料・軽量・多機能の三拍子揃ったエディタとして、急速に支持を広げているそうです。

2019/10版より、RaspberryPi（ARM v8）へのSSH接続機能が公式サポートされたので、
RaspberryPi内のPythonコード遠隔編集を試した結果を記事にしました。

**結論から言うと、ブレークポイント付きのデバッグが実現できたりと、快適な遠隔開発環境を実現できました！**

### ※SSHでなく直接RaspberryPiでVSCodeを使用したいとき
2021/4に、VSCodeがRaspberryPi OSに正式対応しました。[こちらの記事が参考になるかと思います](https://qiita.com/karaage0703/items/fb50b6ac5c175b9b1045)

# 必要なもの
・RaspberryPi (本例ではRaspberryPi3 ModelB)
・上記と同じネットワークにつながったPC (本例ではWindows10)
・Visual Studio Code 1.39.2以降（上記PCにインストール、本例では1.44.2使用）

# 手順
下記記事を参考にさせて頂きました
https://qiita.com/hukatama024e/items/9f96730381f0a34c6da6
## ①SSH接続の設定と、configファイルの保存
[本記事「公開鍵認証の場合」](https://qiita.com/c60evaporator/items/2384416f1122ae124f50#%E5%85%AC%E9%96%8B%E9%8D%B5%E8%AA%8D%E8%A8%BC%E3%81%AE%E5%A0%B4%E5%90%88%E6%89%8B%E9%A0%86)を参考に、SSH公開鍵認証の確立とconfigファイルの保存を実施してください。

なお、configファイルはPC内の下記フォルダに保存してください
C:\Users\\[ユーザー名]\\.ssh

## ②VSCodeのインストール
**PC側**にVSCodeをインストールしてください

参考記事
https://qiita.com/psychoroid/items/7d85ae6bade4a67aedb1

## ③Remote Developmentのインストール
VSCodeを起動し、下記の手順でRemote Developmentをインストールしてください
![remotedevelopment.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/f60c57e5-bd5b-8110-5e07-8bb8c290d245.png)
※Remote - SSHなど必要な関連ツールも、Remote Developmentをインストールすると同時にインストールされます。

## ④RaspberryPiに接続
下図の手順で、接続するSSHサーバ = RaspberryPiを選んでください（下図の場合「raspi」）
![sshtargets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/3ad3e06a-441f-15d3-d768-bad3b0340978.png)

新たにウインドウが開き、プラットフォーム選択を求められるので、Linuxを選ぶ
![selectplatform.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/ef148c34-de02-3384-1546-2c1f9a3b8736.png)

公開鍵認証のパスワードを求められるので、入力してEnterを押す
![sshkey.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/bd70c7ed-7861-4826-95a1-1d4c85a59d91.png)

初回接続は時間が掛かるので、しばらく待つ。
成功すると、下図の赤枠をクリックしてRaspberryPi内のファイルにアクセスできる
![home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/70ce76e5-4e79-fde7-e792-628173a0eea3.png)

## ⑤RaspberryPi内にコードを作成
ここから先はコンソールでも良いですが、GUIで操作する前提で記載を進めます。

**・空ファイルの作成**
「File」→「New File」で空のファイルを作成します
![makenewfile.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/ca9957c0-39d9-90b7-0576-c6ed56c194ca.png)

**・コード内容の記載**
例えば、以下のようなPythonコードを記載します（numpyで標準偏差を求めて表示）
![pythontestcode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/36971cd5-0585-0206-d447-6a90a73f7fb6.png)

**・コードの保存**
「File」→「SaveAs」→保存パスを指定→「OK」
![filesave.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/6c8a6c2b-adb6-dd95-a869-8c9712d04c2b.png)
![savepython.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/026d4c21-91e9-22d3-8344-d9974a826cd7.png)

**・コンソールから実行してみる**
「Terminal」→「New Terminal」でコンソールを開き
![openterminal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/5de27ff9-a05b-9b6d-16ee-5de2f335b240.png)
コードのあるフォルダに移動し、

```
python3 test.py
```
でPythonコードを実行
![runconsole.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/82788dcb-58bf-49a1-1993-b2383b2a2d2e.png)
正常に結果がコンソール出力されていることが分かります。


## ⑥作成したコードをデバッグ実行
なんとVSCodeのGUIで、コードのデバッグまで出来てしまいます。
ブレークポイントで停止もできるので、開発効率が上がること間違いなしです！

**・Pythonリンターのインストール**
既にPCローカルでインストールしている場合も、「install in SSH:[ホスト名]」をクリックしてRaspberry Pi内にもPythonリンタをインストールします。
![installpythonlinter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/0ceb8678-faae-fe51-81f4-d3102b895402.png)

インストールが終わると「Reload Required」と出てくるので、クリックして再起動
![reloadrequired.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/4cd56786-0a40-1941-73f8-2d00149c27fd.png)

**・作業用フォルダ（通常はコードのあるフォルダ）を開く**
![openfolder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/57847971-0abe-67ae-d79e-8e35dd64ab47.png)

**・デバッグの実行**
デバッグしたいコードを開いたのち、下記の操作を実行
![runanddebug.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/2cece44f-d705-3622-0c47-47ffa63d5359.png)

コンソールが開き、デバッグが実行されます
![debugconsole.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/d0b8c812-dc3d-8fe8-bc85-ee0c832b7945.png)

**・ブレークポイントの動作確認**
下図のようにブレークポイントで処理を止め、変数内容の確認も可能です。
![debugbreakpoint.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/c94c7fc9-2f62-be0e-4c74-0305d36fb24c.png)

以上で、VSCodeでRaspberryPi内のコードを遠隔デバッグすることができました。
**GUIでサクサク開発できる環境が整い、個人的には満足の結果です！**

# 追記：pipでインストールしたライブラリのimport時にエラーが出るとき

RaspberryPi側にpyenvで環境構築した場合、
pipでインストールしたライブラリのimport時に下記エラーが出ます。

エラー内容：Unable to import 'bluepy' pylint(import-error)
![unableimport.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/38470257-dd13-b41e-e888-a6ef6d5068ce.png)

### 原因
[こちら](https://qiita.com/dynamonda/items/5a8129cd6e9cc139d94a)に記載されているように、
VSCodeでデバッグ時に参照するPythonと、pyenvのPythonの場所が違うことが原因と思われます

### 対処法
/home/[ユーザ名]/.vscode-server/extensions/ms-python.python-‥/pythonFiles/.vscode
にある
**settings.json**
を開き、下記最後の1行を追加

```settings.json
{
    //
    //元々の記載
    //
    "python.pythonPath": "[pyenvのPythonの場所]"
}
```
※pyenvのPythonの場所は、デフォルトでは
/home/[ユーザ名]/.pyenv/shims/python
のはずです
※既にpython.pythonPathが記載されていた場合、コメントアウトして新たに1行追加してください

### それでもエラーが出る場合
⑥で開いた作業用フォルダ内に「.vscode」フォルダを作り、
フォルダ内に下記settings.jsonファイルを作成

```settings.json
{
    "python.pythonPath": "[pyenvのPythonの場所]"
}
```
これで強制的にpyenvのPythonが実行されるはずです