はじめに
ArduinoやM5シリーズの開発にArduinoIDEを使ってきたが、VSCodeも使えるということを知ったので導入してみた記録とメモ。(2021/05)
Visual Studio Code Extension for Arduino
マイクロソフトから出ており、2017年 7/6にオープンソース化をしたことの記事があった。
Microsoft、“Arduino”向けの「Visual Studio Code」拡張機能をオープンソース化
スケッチのシンタックスハイライトをはじめとする開発補助機能を組み込む
http://forest.watch.impress.co.jp/docs/news/1069233.html
この拡張機能を導入することで VSCodeを利用して Arduinoスケッチのコーディング、ビルド、デバック、デプロイができる。
当時の記事では 下記の注意事項があった。
- ArduinoIDE(v1.6.0)以降が必要。
- Arduino公式サイトからインストーラー版かZIP版をダウンロード・インストールする必要がある。
- Microsoftストアで配布されているAPP版は対応していない。
今回はこのVisual Studio Code Extension for Arduinoを導入していくことにする。
PlatformIO IDE
Visual Studio Code Extension for Arduinoではなく、PlatformIO IDEを導入することでも同じことができるとのこと。
PlatformIO IDEもVSCodeの拡張機能として提供されている。
今回は導入も利用もしていないので、使い勝手などの比較は行っていない。
ArduinoIDEの導入
すでにArduinoIDEは導入済みであったためこのあたりのことは割愛。
これからやる人でも一度はArduinoIDEで開発できる環境を整えてからVSCodeに移行するなど、順番を踏んだ方がいいと思う。
注意すべきは上記にある通り、APP版はVSCodeに対応していないこと。
私は最近、パソコンを新しくした都合でAPP版を入れてしまっていたため、アンインストールしてZIP版を入れなおした。
M5シリーズ用 シリアル通信ドライバ
これもArduinoIDEでM5シリーズを扱ったことあればすでに導入済みのはず。
ドライバの入手先をメモ。
M5シリーズプログラム書き込み用シリアル通信ドライバ
CP2104 ドライバ
https://m5stack.com/pages/download
ArduinoIDEでの設定（ボード、ライブラリ）
コーディング環境をVSCodeに移したとしてもボード情報やライブラリの追加でArduinoIDEを使う必要がある場面もある。
このあたりもすでにArduinoIDEを使用していれば、新たに何かする必要はない。
改めて導入するとき用に忘れやすいところをメモ。
ESP32マイコンのボード情報の入手
「追加のボードマネージャのURL」に下記URLを追加
https://dl.espressif.com/dl/package_esp32_index.json
これでボードマネージャからESP32マイコンのボード情報を取得できるようになる。
ライブラリはライブラリマネージャからか、直にライブラリフォルダに展開して使用。
ちなみに環境設定にもある「スケッチブックの保存場所」というのが追加ライブラリの保存場所になる。
この指定したフォルダの中に「libraries」とフォルダが作られて、その中に自分でインストールしたライブラリがあるはず。
デフォルトではユーザーアカウントに影響される場所なので、状況に応じて変えことをお勧め。
ArduinoIDEでの動作確認
最低限ArduinoIDEでビルドや書き込みできることを確認しておけば、VSCodeで何かあってもこっちでやれるので安心。
Visual Studi Code の導入
基本的には下記の記事を参考にさせてもらった。
【丁寧に解説】M5Stack 開発環境構築 〜Arduino IDE から VSCodeのArduino拡張機能 導入 まで〜
https://haratta-tech-lab.com/m5stack-intro-arduino-vscode/#toc10
断然上記サイト様の方が丁寧にわかりやすい。
VSCodeのダウンロードとインストール
下記URLから使用環境にあったものをダウンロード。
- 使用許諾契約書の同意
- インストール先の指定
- プログラムグループの指定
- 追加タスクの選択
- インストール
としていけばインストールは完了。
日本語化
VSCodeを起動すると一番左に5つのアイコンが並ぶ。
- エクスプローラー
- 検索
- ソース管理
- 実行とデバッグ
- 拡張機能
となっており、5番目の拡張機能を選択。検索欄にjapaneseと入力し
「Japanese Language Pack For Visual Studio Code」をインストールする。
再起動を忘れずに。
Arduino拡張機能の導入
拡張機能の検索欄から Arduino を検索。
Microsoft の Arduino for Visual Studio Code をインストール。
ちなみに上記でちょっと触れたPlatformIOをあります。
設定
フォルダパスの指定
[ファイル]→[設定]→[拡張機能]→[Arduino configuration]を開く。
Arduino:Path の項目に Arduinoの実行ファイルが入っているフォルダを指定
インテリセンスの設定
上記に続いて[C/C++] の中の C_Cpp:IntelliSense engine の項目を探す。
上部から設定項目の検索もできるので、そこにC_Cpp:IntelliSense engineを検索したほうが早い。
みつけたらこの項目を「Default」→「Tag Parser」に変更。
文字化けの対応
このままだとターミナルの出力が文字化けするようで、その修正を行う。
C:\Users\usernameの中の下記ファイルを見つけて開く。
.vscode\extensions\vsciot-vscode.vscode-arduino-0.3.0\out\src\common\util.js
200行過ぎたあたりにある下記コードをコメントアウト。
codepage = chcp.toString().split(":").pop().trim();
バージョンによって記述されている行が異なるようだ。
動作確認
既存ファイルを開いてみる
[ファイル][フォルダーを開く]から既存のファイルを開いてみる。
私の環境ではこの時点でライブラリが認識されておらず、すべてのヘッダファイルが見つからないエラーが出ていた。
とりあえずそれは置いといて順番に見ていこう。
ボードの選択
[表示][コマンドパレット][Arduino:Board Config]を選択し、ボードを選択。
選んだボードによって、Flash Mode や Frequency などがさらに選択できるようになるドロップダウンリストがでる。このタイミングで開いたフォルダ内に「.vscode」というフォルダが作れ、ボード情報などが記載されたファイルが作られる。
その関係か、ボードを選択しても、それ以外の項目がすぐに出てこないことがある。
もう一度コマンドパレットから開きなおしたりすれば表示されるので慌てずに。
今回私はM5Stack-Grayでテストする予定だったので、ボードはM5Stack-Core-ESP32(esp32)を選択
ベリファイの実行
先に「インクルードファイルがない」とエラーが出ていると書いたが、ここで構わず一度ベリファイを実行。
右上がベリファイボタンで、実行中は左下にメッセージがでている。
一度ベリファイすることでプロジェクトの.vscodeフォルダの中に「c_cpp_properties.json」ファイルが作れらる。私の環境ではベリファイ前に見つからないと言われていたヘッダファイルが一度ベリファイすることで自動で追加された。
シリアルポートの設定
対象のマイコンを接続後、コマンドパレットの[Arduino:Select Serial Port]を選択して、出てくるリストの名から接続されているシリアルポートを選択。
書き込み
上記で書いたベリファイの左にアップロードボタンがあるので、これを押せば書き込み開始。
しばし待てば書き込みが完了。
終わりに
とりあえず、導入は完了し、実際にマイコンへの書き込みまでは確認。
細かいところは ？？？ の部分もあって、のちのち補完していきたいとおもう。