Visual Studio Codeの使い方 ラズパイ(SSH)・ESP32で使えるようにする

PHPやJavascript、ラズパイにSSH接続にVisual Studio Codeを使っているついでに、そろそろArduino IDEを卒業して代わりにVSCodeにPlatformIO IDEを導入して使ってみることにします。

最近はM5StackやM5Paperが増えたので、ESP32やマイコンボードをVisual Studio Codeで使うためのインストール・設定を解説していきます。

最後の項目で、Visual Studio CodeとPlatformIO IDEでArduino.hが無いエラーになったので、その回避方法も説明していきます。

目次

Visual Studio Code イントールと日本語表示

Visual Studio Codeとは?

Microsoftの高速オープンソースコードエディターで、コーディング(プログラムを書く)からデバッグ(プログラムを実行してバグを発見する)・デプロイ(開発したプログラムを本番環境で使えるようにする)までトータルな作業がVisual Studio Code一つでできます。

また、拡張機能をインストールすればできることがさらに広がります。

使いやすいのでかなり流行っているようで、自分も遅ればせながらWeb開発で使わせてもらっています。コレ便利です。

Visual Studio Codeでできること

最近はVisual Studio Codeが流行っているようで、PHP・HTML・JSなど、Web系の開発はもちろん、プラグインのPlatformIOを入れればArduino IDEの代わりとしても使えて、バージョン管理もできてかなり便利。

さらにVimも使えて、もうWindowsだけあればLinuxのテスト環境もいらないんですね・・・時代は変わってプログラムの世界もどんどん便利になります♪

自分もVisual Studio Codeはあまり使ったことが無いので、初心者向けに詳しく説明していきます。

Visual Studio Code インストール

まずは、こちらのページからVisual Studio Codeをダウンロード・インストールしていきます。

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code edit...

Visual Studio Code

適当にお使いのOSをクリックするとダウンロードが始まって、DL完了後にダブルクリックで起動させてインストールしてください。

Visual Studio Codeを日本語表示にする

インストールが完了したらVisual Studio Codeを起動すると↓英語表示になっていますので、まずは日本語表示にするととっつきやすくなりますので、設定をしていきましょう。

View > Command Paletteを選択↓

Visual Studio Code 日本語

現在英語(en)になっているので、下のInstall additional languages...を選択↓

Visual Studio Code 日本語

Configure Display Languageを探します。↓

Visual Studio Code 日本語

すると以下のように日本語が表示されるのでInstallボタンを押す。↓

Visual Studio Code 日本語

最後に右下のRestart Nowを押して再起動すると日本語表示になりました♪

これで、Visual Studio Codeの最初の設定は終わり、

おまけ、テキストエディタVim(ヴィム)もあるヨ

拡張機能にはマウスを使わずにキーボードが高速入力可能なテキストエディタVim(ヴィム)もあります。(正確にはGVim(ジーヴィム)なのかな?)

CUI(キャラクターユーザーインターフェース)が好きなLinuxユーザーでVim操作が好きな方には最適ですね。

VIM

拡張機能のブロックアイコンで「Vim」と検索すると出てきます。

インストールすると右窓のエディタ部分がVim操作できるようになります。

Vimの拡張機能で「無効にする」を押すとVimが無効になって、普通のエディタに変わりすので、Vimを練習したい場合にも最適。

PlatformIO IDE 拡張機能インストール

続いてVisual Studio CodeにPlatformIOをインストールしていきます。

PlatformIOはESP32やESP8266、M5Stack、Arduino UNOなどのマイコンやフレームワークに対応したVisual Studio Codeプラグインの組み込み用IDEで、マイコンボードをArduino IDEの代わりにかなり便利に開発可能。

まぁ、いろいろと出来ますが説明が難しくなるので、Visual Studio Codeにプラグインとして追加すれば、Arduino IDEの代わりに便利に使えますということです。

ちなみに、Arduino IDEを別途インストールしたり、Visual Studio Codeの拡張機能のArduino IDEをインストールする必要はありません。

拡張機能PlatformIO IDEインストール

左下の①ブロックアイコン(機能拡張アイコン)を押して②「PlatformIO」と検索すると、③「PlatformIO IDE」が出てくるのでインストールしましょう。

Visual Studio Code 日本語

PlatformIO IDEユーザー登録

特にユーザー登録する必要はなさそうですが、PlatformIOにユーザー登録しないと新しいProjectを作成できないようだった?(勘違いでした。ユーザー登録しないでもプロジェクト作成できます。)登録したらプロジェクト作成できるようになりました。

M5Paper

自分はメンドウなのでGithubのIDでPlatformIOを登録しました。

M5Paper

ユーザー名・メルアド・姓・名の登録が必要で、アクティベーションのメールが届きます。

もし、PlatformIOでプロジェクトを作れないようでしたら登録作業をしてみてください。

PlatformIOで新しいプロジェクト作成

プロジェクトが作成できるようになったら、PlatformIOのHOME↓の右側に「New Project」が表示されるので新しいプロジェクトを作ってみましょう。

PlatformIO

↑数字の順番にクリックすれば新しいプロジェクトを作れます。

今回は、PlatformIOがうまく使えるかテストするためにESP32マイコンボードの内蔵LEDをLチカさせてみましょう。

使うのは↓ESP-WROOM-32で青LEDはLED_PIN 2を指定すると使えます。

プロジェクトウィザードが表示↓されるので、NameとBoardを選択します。

PlatformIO

Boardは大量のマイコンボード名がリストになりますのでESP32と入力すると探しやすいです。

  • Name:プロジェクト名(なんでもOK)
  • Board:ESP32を入力して「Espressif ESP32 Dev Module」を選ぶ
  • Framework:Arduino(Boardを選ぶと自動で表示されるので、いじらない)
  • Location:チェックを外すと好きなフォルダに保存可能。

Locationにチェックを入れておいたままプロジェクトを作ると以下のフォルダに保存されます。

C:\Users\<ユーザー名>\Documents\PlatformIO\Projects\<プロジェクト名>

main.cppを編集

プロジェクトができたら左上のファイルアイコンのsrcにあるmain.cppがボードのプログラムを書くファイルになります。

main.cppを編集していきましょう。

例としてLチカするのにブレッドボードや抵抗・LEDを接続するのがメンドウなので・・・ボードに付いている青LEDを点滅Lチカする実験をしてみます。

Lチカ

ソースは以下、コレを main.cppにコピーします。

#include <arduino.h>

#define LED_PIN   2

void setup() {
  Serial.begin(115200);
  delay(100);
  Serial.printf("%s - run\n",__func__);
  pinMode(LED_PIN, OUTPUT);
}

void loop() {
  digitalWrite(LED_PIN, HIGH);
  Serial.printf("%s - LED_PIN - HIGH\n",__func__);
  delay(1000);
  digitalWrite(LED_PIN, LOW);
  Serial.printf("%s - LED_PIN - LOW\n",__func__);
  delay(1000);
}

プログラムできたらビルドしてみる

ビルドは簡単に言うとプログラムにバグがないかチェックして、問題なければ実行できるものに変換する作業。

Arduino IDEでは左上のほうにチェックアイコンのコンパイル↓がありました。

PlatformIO

このコンパイルとほぼ同じ役割ですね。

PlatformIOのビルドは↓下左のほうにあるチェックアイコンを押します。

PlatformIO

ビルドに成功すると↓SUCCESSの表示になります。失敗はFAILED表示になる。

PlatformIO

ビルドがうまくいかなくてFAILEDになった場合は下のPlatformIOのエラーの項目をご覧ください。

デバイスのポートを確認する

ポートはPlatformIOが自動的に検出して選んでくれるので、特に選択する必要はありません。

もし必要であればplatformio.iniにupload_port=14(←ポート番号)を追加して指定すればOK

PlatformIO

シリアルモニタ

シリアルモニタはデフォルトでの速度を設定していきましょう。

PlatformIO

シリアルモニタの速度を115200にする場合は以下の行を追加します。

monitor_speed = 115200

ボードに書き込んだあとのシリアルモニタはコンセントアイコンをクリックすると表示されます。次の項目で説明しますね。

ESP32ボードにアップロード

ここまでうまくいったらESP32に書き込んでみましょう。

画面下左のほうの「→」右矢印アイコンを押すと書き込みが始まります。

ターミナルの表示が「........_____..........._____.」の表示になったらESP32ボードのBootボタンを押すと書き込みが始まります。

PlatformIO

上記のようにSUCCESSが表示されたら成功です♪

ESP32ボードに書き込んだあとに↓コンセントアイコンをクリックすると、ターミナルのタブにSerial.printfが「loop - LED_PIN - HIGH」などと出力されます。

シリアルプリント

Lチカできました❤

PlatformIO

これでArduino IDEを卒業してVisual Studio Code+PlatformIO IDEでESP32などのボードを書き込みできるようになりました。

プログラムを手軽にダウンロードできるようにGitをインストールする

Visual Studio CodeはGitを使うことで、プログラムをダウンロードできるようになります。

Gitとは?

ここで簡単にGitを説明します。

Gitは分散型バージョン管理システム(VCS)で、おおざっぱに言うとプログラムのソースコードの変更履歴を記録します。

Gitを使うとプログラムを書いているときに、前の状態に戻りたい時に、簡単に戻れることを可能にします。

一人で開発している場合にも、以前のコードが必要になる場合があるのでプログラマーにとってバージョン管理はけっこう重要になってきます。

今回は、プログラムをダウンロードして利用するのみなので、Gitの詳細は理解する必要はありません。

誰かが書いたプログラムの最新バージョンや古いバージョンをダウンロードできるツール、くらいに理解しておけばいいでしょう。

GitHubとは?

GitとGitHubは違うもので、GitHubはプログラマが開発したプログラムを公開するサービス(サイト)。

たくさんのプログラマのGitリポジトリ(保管場所)が集まったものがGitHubになり、プログラマは必須ツールで、プログラマでない方も結構使う方はいるのではないでしょうか。

ESP32などマイコンボードのツールをダウンロードする時にも使いますね。

WindowsにGitインストールする

Gitのことがちょっとだけ分かったところでダウンロードしていきましょう。

Git ダウンロード

ダウンロードすると以下のようにインストーラができますのでダブルクリックして起動。

Git ダウンロード

あとは、インストーラの指示どおりにNextボタンを押していきまして、コマンドプロンプトなどでGitを単体で使う場合はエディターを自分の好みのものを選んだり設定も変えていけます。

Git

Visual Studio Codeで使うだけの場合は特に気にせずNextを押し続けてインストールすればよさそう。

Git単体ではコマンドプロンプト(Windowsの場合)を使って操作可能ですが、プログラマでない方はそこまでする必要はないかと思います。

Visual Studio CodeのなかでGitを使うとGUI(グラフィックユーザーインターフェース)で操作することができるので簡単便利です。

Visual Studio CodeのGit関連 拡張機能

Visual Studio CodeでGitをさらに使いやすくする拡張機能を備忘録的に紹介します。

GitLens

git blameの強化(プログラマの便利ツール)プログラムの変更を誰が・いつ・どの行を変更したのかをVisual Studio Codeで視覚的に確認可能。

GitLens

Git history

Gitのコミット履歴を表示してくれるツール

Git

M5PaperをPlatformIOで戻せるようにする

GitがVisual Studio Codeで使えるようになったところで、M5PaperのFactoryTestのリポジトリのクローン(プログラムの複製)をダウンロード・設定していきます。

M5Paperに別のプログラムを書き込んでも、元(工場出荷時)の状態に復旧できるようにしていきましょう。

GitHubにVisual Studio Codeからアクセス許可する

まずはGitHubからダウンロードしますので、VSCodeがGitHubにログインできるようにします。

リポジトリのクローン

自分はGithubのアカウントを使ってVSCodeがGitHubにアクセスできるように許可しました。

M5Paper関連のリポジトリのクローンを取ってくる

M5Paperに初期時に入っているプログラムはFactoryTestで、まずはこれをダウンロードしていきましょう。

以下のGitHubのページからダウンロード可能、Visual Studio Codeでダウンロードします。

Contribute to m5stack/M5Paper_FactoryTest development by creating an account on GitHub.

Visual Studio Codeのファイルアイコンを押してリポジトリをクローンするボタンを押します。

M5Paper_FactoryTest

右上のほうに「GitHubから複製」とURLを入力するフォームが表示されるので、「https://github.com/m5stack/M5Paper_FactoryTest」を入力・Enterしましょう。

 すると、FactoryTestのプログラムを保存するフォルダを聞かれるので、お好きな場所に保存します。

ダウンロードすると↓以下のようにM5Paper_FactoryTestフォルダの中にファイルが保存されます。

実行ファイルのmain.cppを開くとライブラリが足りないエラーになるので、このままではM5Paperに書き込みできない。

M5Paper_FactoryTest

M5Paper_FactoryTestをPlatformIOプロジェクトに登録

M5Stackライブラリを登録する前に、M5Paper_FactoryTestをPlatformIOのプロジェクトにする必要があります。

以下のように左下の①PlatformIOアイコン・②Projects・③Add ExisingM5Paper_FactoryTestのフォルダを選択・④Open "M5Paper_FactoryTest"ボタンを押す。

M5Paper_FactoryTest

M5Paper_FactoryTestフォルダーは先程GitHubからダウンロードした時に保存したフォルダーになります。(上の例ではC:\Users\<ユーザー名>\Dropbox\Code\M5Paper_FactoryTest)

これで、M5Paper_FactoryTestにライブラリを登録できるようになりました。

続いて不足しているM5Stackのライブラリを追加していきましょう。

M5EPDライブラリを登録

M5Paper_FactoryTestにM5EPDのライブラリを使えるように登録します。

Contribute to m5stack/M5EPD development by creating an account on GitHub.

ちなみにライブラリは、各プロジェクトごとに登録しないといけないようです。

①PlatformIOのPIO Homeを開いて②Librariesの③フォームに「M5EPD」と入力するとM5EPDが出てきます。

M5Paper_FactoryTest

注:ドジな自分は最初間違えてM5Stackのライブラリをいれてしまいました・・「M5EPD」と検索してM5Paper用のライブラリをインストールしましょう。

M5EPDの中程にあるAdd to Projectボタンを押します。

M5Paper_FactoryTest

先ほど作成したプロジェクト(M5Paper_FactoryTest)を選択してAddボタンを押す。

M5Paper_FactoryTest

余計なライブラリを誤ってインストールした場合

①PlatformIO・②Libraries・③Installedで削除したいライブラリをUninstallします。

M5Paper_FactoryTest

余計なライブラリが入っているとビルド失敗します。自分の場合はM5Stackを入れていたのでビルドエラーで終了してしまいました。

M5Paper_FactoryTestをビルドしてみる

準備ができたのでいよいよビルドしてみましょう。

M5Paper_FactoryTest

うまくいきました♪、これで心置きなくM5Paperにプログラムを書き込んで、元に戻したくなったら初期状態に戻せます。

M5Paperのページやプログラム

M5Paperの使用やExampleが載っている公式ページ。

The reference docs for M5Stack products. Quick start, get the detailed information or instructions such as IDE,UIFLOW,Arduino. The tutorials for M5Burner, Firmw...

今ページを見ながらM5Paperをちょっと改造してみます。

M5Paper ライブラリ

これが無いとArduino IDEでもVSCode+PlatformIOでもM5Paperに書き込めません。

Contribute to m5stack/M5EPD development by creating an account on GitHub.

サンプルプログラム

サンプルプログラムはカレンダーやTodoもあるので試してみます。

Contribute to m5stack/M5Paper_FactoryTest development by creating an account on GitHub.
Contribute to m5stack/M5EPD_Calculator development by creating an account on GitHub.
Contribute to m5stack/M5EPD_Todo development by creating an account on GitHub.
Contribute to m5stack/M5EPD_TTFExample development by creating an account on GitHub.

ローカルのLinux(ラズパイ)にSSH接続

ついでにラズパイやJetson nanoにVisual Studio CodeからSSH接続する設定もみていきましょう。

Remote Development インストール

必要な拡張機能はRemote Developmentです。

左下のほうにある①ブロックアイコン・②Remote Developmentと入力・③インストールの順にやってみます。

PlatformIO

すると、Remote - WSL・Remote - SSH・Remote -Containersも必要ということで自動でインストールされました。

Visual Studio Code

ラズパイに接続

拡張機能を

Visual Studio Code

左下のほうの①パソコンアイコン・②SSH Targets・③「+」ボタンを押して接続したラズパイの「ID@IPアドレス」を入力

リターンすると、Linux・Mac・Windowsの表示になりますのでLinuxを選ぶと↓以下のような画面になるので「Continue」↓を選ぶ。

Visual Studio Code

続いて、パスワードを入力する画面になるのでパスワードを入力すると接続完了。

接続したラズパイのファイルを開いてみましょう。

Visual Studio Code

フォルダを開いて、

Visual Studio Code

これでラズパイの中のファイルにアクセスできた。↓

Visual Studio Code

PythonファイルUTF-8 文字化け(未解決)

ラズパイのファイルを起動すると、日本語が文字化けするので直していきます。

まずは、ファイル > ユーザー設定 >設定を開く

文字化け

Encoding

エンコーディングがUTF-8になってないんじゃない?と思って、テキストエディター > ファイル > Encodingをチェックすると、ちゃんとUTF-8になってる。

UTF-8

これはユーザー・リモート・ワークスペースの全てUTF-8になっている。

AutoGuessEncoding

テキストエディター > ファイルにあるAutoGuessEncodingもユーザー・リモート・ワークスペースの全てにチェックを入れた。

文字化け

これでも文字化け治らない。

ソースコードの文字設定

右下のほうにある文字設定が「ISO 8859-2」だから文字化けしてるのかと思って変更してみた。

文字化け

UTF-8に変更・・・

文字化け

したけどまだ文字化けする。ううん・・・ダメだ。

未解決。

PlatformIOのエラー Arduino.hが無い!と言われる

ここからは自分がハマったトラブル回避法を説明していきます。

Visual Studio Codeに拡張機能や設定などを加えていったあとにPlatformIOをインストールしして、main.cppを開いたらArduino.hが無い!と言われる、エラーになった。↓

M5Paper

PHPやSSHで使ってました

もともとVisual Studio CodeはPHP言語で使っていて、ラズパイにSSHで接続していたので、そのあたりの設定が邪魔したのかもしれません。

試しに他のパソコンにVisual Studio CodeとPlatformIOだけを新規インストールして、試したところ、Arduino.hが無いエラーにはならなかったので、なにかが邪魔するかコンフリクトしているような気がする。

いろいろと原因を調べたり、.vscod/c_cpp_properties.jsonファイルにパスを追加したりしたけどエラーはずっと出てコンパイルも不可。

なので、全ての設定を初期状態にすることにした。

Visual Studio Code 全ての設定を削除して初期化

Visual Studio CodeとPlatformIOを初期化するために削除するもの一覧

  • C:\Users\<ユーザー名>\AppData\Roaming/Code/User/settings.json
  • C:\Users\<ユーザー名>\.vscode
  • C:\Users\<ユーザー名>\.platformio
  • C:\Users\<ユーザー名>\Documents\PlatformIO(Project作った場合のみ)

その他のVSCodeの設定フォルダ

  • C:\Users\<ユーザー名>\AppData\Local\Programs\Microsoft VS Code

WindowsのVisual Studio Codeの設定ファイルを削除

WindowsのVisual Studio Codeの設定は↓

%APPDATA%/Code/User/settings.json

ちなみに%APPDATA%はデフォルトで以下のパスになります。

C:\Users\<ユーザー名>\AppData\Roaming

Visual Studio Codeの設定を全て削除

C:\Users\<ユーザー名>\.vscode

PlatformIO IDEの設定を全て削除

C:\Users\<ユーザー名>\.platformio

PlatformIO IDEのプロジェクトを削除

PlatformIO IDEで新しいプロジェクトを作った時に「Use default location」にチェックを入れた場合ここに保存される。

C:\Users\<ユーザー名>\Documents\PlatformIO

これでVisual Studio CodeとPlatformIOともに初期の状態に戻りました。

再起動してPlatformIOを再度インストール・プロジェクトを作成するとmain.cppのArduino.hが無いエラーが消えました。

ふぅ、これでやっとスタート地点に立てて、Visual Studio Code+PlatformIOでマイコンボードの開発ができるぞ!

正常時の.vscod/c_cpp_properties.jsonの状態

正常時にはincludePathにたくさんのパスが追加されていますが、エラーになる場合は3行ほどしかパスが追加されていませんでした。

リポジトリのクローン

何回か実行してErrorで5回ほど実行でやっとSuccessになる

#include <Arduino.h>は無事パスが通ったようで、エラーにはならなくなりました。

試しにESP32のマイコンボードに付いているLEDをLチカさせるためにコンパイルしてみましたが、今度はビルドするとまた違うファイルが無いようでエラーを繰り返す・・・↓

PlatformIO

ただ、しつこくビルドを繰り返すと↓なぜかビルド成功しちゃった。

PlatformIO

なぜうまくいったかは不明。何回か繰り返すと自動的にパスが通るようになっているのかな?

分かりません。(わかったら追記していきます。)

とりあえずうまく行ったのでESP32やM5Stackで遊んでみます。

スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。