M5StickCの開発環境をVS Codeに移す方法

Arduino IDEでプログラミングするのがツラいので、VS CodeのArduino Extensionを使ってみました
以下にその手順を載せておきます
※Windows7でしか試していません

Visual Studio Codeのインストール

System Installer 64 bit を選択
(私は VSCodeSetup-x64-1.35.1.exe を使いました)

Arduinoのインストール

Windows ZIP file for non admin install を選択
(私は arduino-1.8.9-windows.zip を使いました)
適当な場所に解凍して"arduino-1.8.9"を"arduino"にリネーム

VS Codeの設定

"EXTENSIONS" から"Arduino"を選択してインストール
"C/C++"もインストールされます

[File]->[Preferences]->[Settings]メニューを選択
"Extensions"->"Arduino Configuration"メニューを選択
最初の項目の”Edit in settings.json”を選択して、以下を追加入力

   "arduino.path": "[Arduinoを解凍した場所]",
   "arduino.commandPath": "arduino_debug.exe",
   "arduino.logLevel": "info",
   "arduino.enableUSBDetection": true,
   "arduino.disableTestingOpen": false,
   "arduino.skipHeaderProvider": false,
   "arduino.additionalUrls": [
       "https://dl.espressif.com/dl/package_esp32_index.json"
   ],
   "arduino.defaultBaudRate": 1500000

ショートカットキーCtrl+Shift+Pでコマンドパレットを呼び出し、以下を選択

>Arduino: Board Manager

最下部の"esp32"をインストール ※文字化けする場合は末尾参照

次に以下を選択

>Arduino: Library Manager

"M5StickC"をインストール("m5stick"と入力してフィルタリングすると出てきます)

スケッチの作り方

[File]->[Open Folder]メニューを選択して適当な場所にフォルダーを作成後、"フォルダーの選択"ボタンを押します

コマンドパレット(Ctrl+Shift+P)で以下を選択

>Arduino: Initialize

スケッチ(.inoファイル)がないので作成しますか?と聞かれるので"app.ino"ファイルを作成します

スケッチの設定

次の1, 2, 3は、VS Code下部のステータスバーから設定できます

1. <Select Board Type>
クリックするとタブが表示されるので"M5Stick-C"を選択します
設定項目が出ますが、デフォルトで大丈夫です

2. <Select Serial Port>
クリックするとコマンドパレットに候補となるシリアルポートが表示されます
M5StickCをUSB接続してWindowsのデバイスマネージャに追加されたデバイスを選択します(私の環境ではCOM4がM5StickCです)

3. <Select Programmer>
M5StickCでは設定しません

4. M5StickC用ライブラリのインクルードパス設定
コマンドパレットで"Arduino: Library Manager"を呼び出し、"M5StickC"メニューの"Include Library"ボタンを押します
app.ino にヘッダーが追加され、.vscode/c_cpp_properties.json の "includePath"に以下が追加されます

"[M5StickC用ライブラリのインストール先]\\M5StickC\\src"

スケッチの例

app.inoのsetupを以下のように編集します

void setup()
{
    M5.begin();
    M5.Lcd.println("Hello World.");
}

スケッチのアップロード

コマンドパレットで以下を選択

>Arduino: Upload

"OUTPUT"タブに”[Done] Uploaded the sketch: app.ino”が出力されればアップロード成功です
M5StickC実機にもディスプレイ上部に"Hello World."が表示されていると思います

[TIPS] OUTPUTの文字化け対策

VS Codeの”OUTPUT"タブに出力される文字列が化ける場合は、以下のファイルを編集してください。
"C:\Users\[ユーザー名]\AppData\Local\Arduino15\preferences.txt"

[修正前]
editor.languages.current=
[修正後]
editor.languages.current=en

メモ

- IntelliSense最高!
- PlatformIOというフレームワークを使った方法もあるみたい
- [TODO] Board Manager / Library Managerで追加したファイルのポータブル化
- [TODO] Output pathの設定

いいなと思ったら応援しよう!