VSCode で M5シリーズ開発時のメモ

#はじめに
AruinoIDEに代わってVSCodeでM5シリーズの開発をやってみようとしたメモ。
あくまで私の環境で、十分な検証を行っておらず、メモとして記述したものなので間違いや理解不足が含まれていると思う。もし参考にされる方がいれば注意してください。
また、間違いがあれば教えていただけると嬉しいです。

##プロジェクトの新規作成
プロジェクトはフォルダ単位で扱われる。ArduinoIDEでもソースファイルを作ればフォルダも同時に作られた。

VSCodeではソースファイル保存時にフォルダが自動では作成されないので、まずはフォルダを作る。
「フォルダーを開く」コマンドしかないので、ここからスタートする。
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646821/551f71d1-d541-8ca8-cec0-29168eabfbc8.png)

ベーシックなフォルダーを開くダイアログが出るので、任意のフォルダまで移動したら、右クリックの新規作成からフォルダーを選び、任意の名前でフォルダーを作ってしまえばOK。
続けてその画面から、「フォルダーの選択」ボタンで今作ったフォルダを開いていしまえば、これがプロジェクトフォルダとなる。![fsfaf.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646821/8320b1db-e27d-bdfc-62db-a72910b8a888.png)


##ソースファイル作成
「開始」のところやツールバーから「新しいファイル」コマンドがあり、そこから新規ファイルを作成することができる。
ただし、こちらから新規ファイル作成を行うと、Untitledという名前でエディタが開く。この時には開いただけでは保存されず、改めて名前を付けて「保存」が必要になる。
よって左のプロジェクトフォルダ名の横（下図の矢印先の赤丸部）からの方がおすすめ。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646821/7e1406e2-1976-64d0-acd9-0665610ab243.png)

これを押すとすぐ下にファイル名を入力するテキストボックスがでる。
これにファイル名を入れれば、すぐにファイルが作成される。拡張子を inoにするのを忘れずに。

##ボードの指定
続いてボードを指定する。
コマンドパレットを開く方法もあるが、一番下の青いところを押すのが一番はやい。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646821/26b52e39-25b8-13cb-39ee-68cb617aa9f7.png)
ボードを選択すると、プロジェクトフォルダ内に .vscodeフォルダが作られ、arduino.jsonファイルも作られる。
動作周波数などの設定項目はボード選択後にでるが、更新まで少し時間がかかるので少し待つ。たいてい数秒から30秒以内ぐらいか。

##ベリファイの実行
ソースファイルが空っぽでも一度ベリファイの実行をすることで c_cpp_properties.jsonファイルが作成される。 c_cpp_properties.jsonファイルができたことで、インテリセンスが働くようになるが、ソースが空っぽの状態で作成すると、ボード情報に関連するライブラリが登録されるのみ。

よってこの状態でライブラリのインクルード、例えば
`#include <M5Stack.h>`
を記述すると
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646821/c42ec8b3-13c6-9704-8f69-843a40b62804.png)
上記のようにライブラリを参照できておらず、インテリセンスが働かない。

この状態でベリファイを再度実行すると、記述したヘッダファイルの場所が includePathに自動的に追加され、上記のエラーも消えインテリセンスも有効になる。

ベリファイなしでインクルードするライブラリのインテリセンスを有効にしたければ、c_cpp_properties.jsonの "includePath"の部分にライブラリフォルダを追加する。
``"C:\\Program Files (x86)\\arduino-1.8.15\\add\\libraries\\",``
パスはそれぞれの環境によって異なるが、私の場合はライブラリマネージャから落としたりしたライブラリはすべて上記ホルダにまとめてあるので、これを追加するとこのフォルダ以下すべてについて参照されようになる。

ベリファイするとc_cpp_properties.jsonが更新され、上記フォルダの中の使用されているヘッダファイルのあるパスが"includePath"に登録される。
今回の例でいうと下記のフォルダパスが追加された。
```"C:\\Program Files (x86)\\arduino-1.8.15\\add\\libraries\\M5Stack\\src",```
そして、追加したlibrariesまでの上記パスは消されてしまう。記述したパスの直下にはヘッダファイルがないためだろう。

この辺りはどうするのが一番使いやすいのか・・・。

##COMポートの選択
プログラムを書き込みたいデバイスをつないで、COMポートを選択する。
コマンドパレットから選択してもいいし、下記場所から選択も可能。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646821/173fc472-85b4-1669-4467-667b976c9f48.png)

##アップロード
ここまでくれば　下記ボタンからアップロード。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646821/ade1b355-ecb8-bb1c-54e6-0da054ccb208.png)

出力に[Done] Uploading sketch と出ればアップロード完了。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646821/d785e44d-97b6-5926-cbb2-05626418c0e1.png)
ちなみにタブが「出力」であっても右の赤丸矢印部分が「Arduino」になっていないと、Arduino IDEからの出力は表示されないので注意。

##シリアルモニタ
右下のコンセントマークを押すとシリアルモニタが開く。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646821/2a7bf11f-3a7b-03ed-f3d3-9c11e138726e.png)
下図のようにコンセントマークが　「×」に変わり、赤丸矢印部が「Serial Monitor」に変わる。
「×」の左側の数字がボーレートを示しているので、変更が必要であればここから変更できる。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646821/7353e16c-4712-8675-a1a6-c9aaacaa72a5.png)
Arduino IDEのシリアルモニタと一番大きく異なるのは、VSCodeでシリアルモニタを開くとデバイス側が再起動される。

##まとめ
とりあえず、開発の流れを書いてみた。
いまいち、c_cpp_properties.jsonの更新ルールなど、理解しきれていないところがあり、
いろいろ使い倒してみないとです。