M5StickC を VSCode で hello world する

M5StickC を購入したので、Visual Studio Code の開発環境を整えようとしたのですが、
けっこうはまったので他の人の助力になればのメモです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/e24e7402-d736-d991-721e-a85e99c21568.jpeg" width="320dp" />


# 前提
名称                   | バージョン      | 備考
-----------------------|----------------|---------------------
Windows                | 10             | 64bit
[M5StickC](https://www.switch-science.com/catalog/5517/?gclid=Cj0KCQiA6t6ABhDMARIsAONIYyys-wRFC2cZgTZYSVjzzOW2dvEfKht_9C_OYkw8r2QdGmWUR5rFPToaAlKXEALw_wcB) | - | 
Arduino                | 1.18.13        |
Visual Studio Code     | 1.52.1         |
Arduino                | 0.3.4          | Visual Studio Code のアドオン
C/C++                  | 1.1.3         | Visual Studio Code のアドオン

# 大まかな流れ
1. ドライバのインストール
2. M5StickC を刺して稼働確認
3. Aruduino SDK インストール
4. Aruduino SDK の M5StickC の開発環境を整備して hello wolrd
5. Visual Studio Code インストール
6. Visual Studio Code の M5StickC の開発環境整備を整備して hello wolrd

# 作業手順
## 1. ドライバのインストール
[注意] こちらの[サイト](https://raspberrypi.mongonta.com/howto-start-m5stack-arduinoide/)の ↓↓↓ 文言に助けてもらいました。
![bandicam 2021-01-31 14-14-15-674.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/69bad882-0345-0ef2-6c01-460b9f0f31ed.jpeg)

[こちらURL](https://ftdichip.com/drivers/vcp-drivers/) の `setup executable` からダウンロードして実行すればOK。（※1 一番下にあります）

## 2. M5StickC を刺して稼働確認
1. PC に M5StickC を接続します
2. 正常に動作していれば、ポート（COMとLPT）のところに以下のように表示されます。（※2）
![bandicam 2021-02-02 02-03-14-460.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/b644686a-b39a-1c62-1214-d74da1387340.jpeg)

※2 環境によってCOMxの値は変わります。上記例はCOM3ですが、COM7とかそういうことがありえます。

## 3. Aruduino SDK インストール
[こちら](https://haratta-tech-lab.com/m5stack-intro-arduino-vscode/) の `1-1 Arduino IDE の インストール` がわかりやすいです。

## 4. Aruduino SDK の M5StickC の開発環境を整備して hello wolrd
1. [こちら](https://haratta-tech-lab.com/m5stack-intro-arduino-vscode/) の `1-3 ESP32マイコンのボード情報を取得` を実施。`1-3-3 ボードの種類を設定` のときに M5StickC を選びましょう！
2. [こちら](https://haratta-tech-lab.com/m5stack-intro-arduino-vscode/) の `1-4 M5Stack Library をインストール` を実施。`1-4-2 M5Stack Library をインストール` のときに、M5StickC Library をインストールしましょう！
3.  hello world を M5StickC で表示します。コードを書いて、左上の `→` を押せば M5StickC に書き込まれます。
![Inkedbandicam 2021-02-02 02-16-17-943_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/d7163706-4209-c11f-4f90-6e750d7e69c4.jpeg)

### 参考のコード
```c
#include <M5StickC.h>

void setup(){
    M5.begin();
    Serial.begin(115200);
    M5.Lcd.setTextSize(2);
}

void loop(){    
    M5.Lcd.println("hello world"); //画面表示
    delay(3000);
}
```

## 5. Visual Studio Code インストール
[こちら](https://haratta-tech-lab.com/m5stack-intro-arduino-vscode/) の `2-1. Visual Studio Code のインストール` がわかりやすいです。

## 6. Visual Studio Code の M5StickC の開発環境を整備して hello wolrd
1. `Arduiono: Command Path` に `arduino_debug.exe` を設定します。
![bandicam 2021-02-02 02-26-47-818.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/d9b523fc-8849-6f1d-a105-31a90d534dba.jpeg)

2. `Arduino: Path` にさっきインストールしたフォルダを設定します。
![bandicam 2021-02-02 02-27-41-364.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/56ed4187-ea17-4a7d-a1a5-58ecd234b7b8.jpeg)

3. コマンドパレットを呼び出し（Ctrl + Shift + p）て、ボードの選択（`Arduino: Board Configuration`）で　M5Stick-C を選択します。
4. コマンドパレットを呼び出し（Ctrl + Shift + p）て、ライブラリ（`Arduino: Library Manager`）に M5StickC がインストールされていることを確認します。（Arduino SDK で入れているので入っているはず）
5. 後は Arduino SDK と同じく hello world してみましょう！（同じコードでいけるはずです）

# おまけ
Visual Studio Code を設定していたはまったところです。
# 1. M5StickC.h が include できない
設定不足。

## 対応方法
`6. Visual Studio Code の M5StickC の開発環境整備` の 1, 2 が設定されているか確認してみてください。

# 2. M5Display.h が include できない
どうやら依存関係にある avr32/io.h が読み込めていないらしいのだが、
それが C/C++ のアドオンの設定がダメだからという理由らしい。。。

## エラーメッセージ
```
ソース ファイルを開けません "avr32/io.h" (dependency of "M5Display.h")C/C++(1696)
```

## 対応方法
1. Ctrl + , 押して設定画面を開く
2. `intell isense engine` を検索
3. `C_Cpp: Intelli Sense Engine` に `Tag Parser` を設定する
![bandicam 2021-02-02 01-50-02-175.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/85822c07-7d31-4c1b-638b-bea48fbd3926.jpeg)

# ※1 ドライバの話
後々[本家](https://docs.m5stack.com/#/en/arduino/arduino_development)のドキュメントを探し当てれてみたら、ドライバ不要とありました。。。

```
Note: M5StickC /M5StickC PLUS / M5StickT / ATOM Matrix / ATOM Lite support can be used without driver, 
users can skip this driver installation step.
```

CP210X を入れて刺したら正常に認識されなかったんだけどな。CP210Xを入れていたからダメだったのだろうか。もし普通に刺しても認識されないようでしたら、上記手順に沿ってドライバ入れてもらったほうが無難かもしれません。