VSCodeでM5stack開発環境構築（後編）

# VSCodeでM5stack開発環境構築（後編）

この記事では`VSCode`で`M5Stack`開発環境構築を行った手順を示します．

前編は[こちら](https://qiita.com/HorimotoHiroto/items/7e47ccab7774ff1c48a2)
中編は[こちら](https://qiita.com/HorimotoHiroto/items/08d9acfbcfffd3cf715c)

## 動作環境
Windows 11
M5Stack BASIC

## 4. Visual Studio Code の導入

+ この[ページ](https://code.visualstudio.com/download)から**Visual Studio Code**をインストールしてください．
![image9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706668/64a7ebf0-d68c-0bf0-e3f0-1c74df400fd3.png)
+ `Installer`がダウンロードされたら，起動して特に何もいじらず`Next`等を選択してインストールを完了させてください．
その後，必要であれば日本語に変更したり，配色テーマを変更したりしてください．

## 5. Arduino機能の拡張

+ 「拡張機能」を選択し、**arduino**と検索します．そしてインストールしてください．
![image10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706668/d8b92a4c-485f-6480-5cd8-5a66346301ef.png)

+ 「ファイル→ユーザ設定→設定」を選択してください．そして，設定から「拡張機能→Arduino configuration」から**Arduino:Path**を探してください．そこに`Arduino`がインストールされているパス[C:\Program Files (x86)\Arduino]を指定します．念のため`PC`のエクスプローラーにそのフォルダが存在するか確認することを勧めます．さらに，**Arduino:Command Path**探して[arduino_debug.exe]を指定します．
![image10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706668/3c423b37-26c3-261c-a754-50b867f89a45.png)
![image11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706668/dc3b764a-8dc8-1608-98f6-baaff7e5a12a.png)


+ 先ほどの設定の検索窓に**IntelliSense engine**と入力してください．そして，`IntelliSense`の設定を`Default`から`Tag Parser`へ変更します.
![image12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706668/5f6b0285-ce28-fa72-7fc0-75ff6f3c88a0.png)

+ `VSCode`の`IntelliSense`を機能させるためには，利用するインクルードパスを指定する必要があります．中編の[Arduino IDEの設定](https://qiita.com/HorimotoHiroto/items/08d9acfbcfffd3cf715c#3-arduino-ide%E3%81%AE%E8%A8%AD%E5%AE%9A)で確認したンストールしたライブラリの場所と他のパスを`json`ファイルに追記する必要があります．**settings.jsonで編集**を選択して以下のパスを追加してください．
```json
"C_Cpp.default.includePath": [
    "C:\\Program Files (x86)\\Arduino\\libraries",
    "C:\\Program Files (x86)\\Arduino\\hardware",
    "C:\\Program Files (x86)\\Arduino\\tools",
    "C:\\Users\\user_name\\Documents\\Arduino\\libraries"
]
```
![image13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706668/bab9b1e3-717a-58da-57c7-a5e833c149c4.png)
![image14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706668/2f00bcaa-86c3-040b-1f4d-fcba49c461a4.png)

+ ターミナルのコンパイル出力文字化け対策のために特定の`JavaScript`をコメントアウトします．そのファイルが保存されているパス[C:\Users\user_name\.vscode\extensions\vsciot-vscode.vscode-arduino-0.4.12\out\src\common]に移動して**util.js**をエディタで開いてください．その中の以下のコードをコメントアウトしてください．
```diff_javascript
- codepage = chcp.toString().split(":").pop().trim();
+ // codepage = chcp.toString().split(":").pop().trim();
```

## 5. サンプルプログラムを実行する

**M5Stackをお使いのPCに接続してください．**

+ 以下のコマンドで適当な場所にパッケージをクローンしてください．（フォルダとファイルを自作しても可）
```shell
$ git clone https://github.com/HHorimoto/hello_arduino_m5stack.git
```

+ 「Ctrl+Shift+P」で検索欄を開き**Arduino: Board Config**を選択してください．そして「Selected Board:」の<strong>M5Stack-Core-ESP32 (M5Stack)</strong>を選択して少し待つと`Flash Mode`や`Flash Frequency`等の項目が自動で設定されます．
![image15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706668/22e20906-1726-8063-ed57-f9b50e0d6ad9.png)

+ 同じく「Ctrl+Shift+P」で検索欄を開き**Arduino: Select Serial Port**を選択してください．そして，前編の[シリアル通信のドライバインストール](https://qiita.com/HorimotoHiroto/items/7e47ccab7774ff1c48a2#2-%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%AB%E9%80%9A%E4%BF%A1%E3%81%AE%E3%83%89%E3%83%A9%E3%82%A4%E3%83%90%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)のところでタスクマネージャーで確認したポート番号を選択してください．
![image16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706668/eac1305f-89be-a1a4-aa43-ddd73cbf7489.png)

+ `M5Stack`に書き込みます．**Verify**アイコンを選択するとコンパイルが始まります．また，**Upload**ボタンを選択すると書き込みが行われます．
![image17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706668/1c195e27-196a-7078-e458-4f551caa9208.png)
![image18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706668/45a6dbd1-47c1-419a-07ae-3244171e1470.png)

+ `M5Stack`の画面上に**Hello World**と表示されたら成功です．お疲れ様でした．