M5Stack開発環境構築　(VSCodeにArduino機能拡張導入)

Windows10でM5Stack開発環境構築を行った際の手順を記載します。
VSCodeにArduino機能拡張を導入します。
(Arduino IDE導入＆VSCode導入は完了しているものとします。VSCode ver1.57.1)
(2021/6/21時点)

#1. Arduino for Visual Studio Code をインストール
「Extensions」を選択し、検索窓に"arduino" と入力し、
Microsoft社のArduinoを選択してインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665304/4fc1f336-3708-086d-e542-727ecbd7ae20.png)

#2. Arduino for Visual Studio Code初期設定
* 2-1.Path設定<br>
 [ファイル]→[ユーザ設定]→[設定] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665304/d2973eb9-75ca-4042-1f96-c67215240b30.png)
 * [拡張機能]→[Arduino configuration] から Arduino:Path を探す
 * Arduinoがインストールされているパス(C:\Program Files (x86)\Arduino)を指定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665304/7c2492ae-9ea8-b758-58da-9b71d1cc5ca0.png)
* 2-2.IntelliSense (C/C++ 拡張機能)の初期設定
 * 2-1.設定の検索窓に”IntelliSense engine” と入力
 * 「Default」→「Tag Parser」へ変更します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665304/43a9a5ac-cb4e-7b2b-4c8b-92f307cf35bf.png)
* 2-3.ターミナルのコンパイル出力文字化け対策<br>
以下のJavaScriptファイルを編集します<br>
C:\Users\username\\.vscode\extensions\vsciot-vscode.vscode-arduino-0.4.3\out\src\common\util.js

(208行目をコメントアウトする)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665304/7dad1e72-fb1c-1a1c-842e-f62dab1f79b5.png)

#3. Arduinoプロジェクト作成
* 3-1. プロジェクトフォルダ作成
 * [ファイル]→[フォルダを開く] から、任意のフォルダを新規作成し、開きます。
 * 今回は"Sample"フォルダとしました。
`C:\Users\username\Documents\Arduino\Sample`
 * その中にスケッチファイル"Sample.ino"を作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665304/2bdf63b6-3fe4-94b0-7d43-1babe850698e.png)
(Sample.inoにスケッチ例HelloWorldの内容を記載してみました)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665304/709d2ded-7fd8-57b1-4079-e365227918b1.png)

* 3-2. ボード種類選択
 * 「Ctrl+Shift+P」でコマンドパレットを開いて
 * Arduino : Board Config を選択します
 * Selected Board で「M5Stack-Core-ESP32(esp32)」を指定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665304/79cb30b6-8930-dcd0-6f26-c9618d702079.png)
その後、”Flash Mode”等の項目が自動で設定されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665304/244a26ad-f475-ba62-316a-02494c738b81.png)
* 3-3. C/C++拡張機能のパス追加
 * 「Ctrl+Shift+P」 で、コマンドパレットを開いて
 * 「C/Cpp: Edit configurations...」を選択します
 * 「.vscode」 フォルダの中に 「c_cpp_properties.json」 ファイルが作成される
 * M5Stack.h利用のため、「c_cpp_properties.json」の"includePath"に下記のパスを追加します
`C:\Users\username\Documents\Arduino\libraries\\**`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665304/13b50ab8-d4c5-799b-779e-238ca1a8b64b.png)

#4. M5Stack への書き込み
* 4-1. シリアルポートの設定
 * M5StackをUSB接続する
 * Ctrl+Shift+P にて、「Arduino : Select Serial Port」 を選択する
 * Silicon Labsを認識しているCOMポートを選択する
* 4-2. コンパイル実施
 * 「Verify」アイコンを選択してコンパイル開始する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665304/cebcc73a-4668-4af5-bdd3-7e2ad3bc0002.png)
 (コンパイルに時間かかります・・・）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665304/6571e512-c204-460a-bc43-e86dbc250b8e.png)
（やっと完了です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665304/941c0199-a425-e314-79dd-2cfe34285464.png)


* 4-3. M5Stackへ書き込み
 * 「Upload」ボタンを選択して書き込み開始します
 (書き込みも時間かかります・・・)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665304/8c868dfa-3f44-2623-e6ee-f2315532387e.png)

M5Stackの液晶画面に`Hello World`が表示されれば成功です！