ArduinoをVSCodeで使いたい！

# ArduinoをVScodeで使いたい！
　ArduinoのIDEはコードの補間機能がなくて使いにくい！と僕は思っています。
　コードの補間機能なしにプログラムを書くことは大変なので、いつも使ってるIDE、VSCodeでArduinoが使えるらしいので試してみました。
　以下のステップで使えるようになったのでまとめておきます。
　使えなかったら教えていただければ幸いです。

Step 1 Arduino IDEをインストール
Step2 VScodeをインストール
Step3 Arduino for Visual Studio Code[拡張機能]を入れる
Step4 settings.jsonの変更
Step5 動作確認して終わり！

## Step 1 Arduino IDEをインストール
　以下のリンク先から自分の環境にあったIDEをインストール。
　[Aeduino SDKのインストール先](https://www.arduino.cc/en/software)
　VSCode上で編集するが、コンパイル機能などはArduino IDEなどが使われるのためか拡張機能の前提条件の項目に必要である旨が書かれています。

> Prerequisites
Either the Arduino IDE or Arduino CLI are required.
>前提条件
>ArduinoIDEまたはArduinoCLIのいずれかが必要です。

　ちなみに、Arduinoのバージョン1.6.x以降に対応していて、1.8.7では色々障害があってダメだったけど1.8.8以降では修正されたから気をつけてねとも優しく書いてくれてます。ありがたい(T . T)

> Note: Arduino IDE 1.8.7 had some breaking changes, causing board package and library installation failures. These failures were corrected in 1.8.8 and later.
> 注：Arduino IDE 1.8.7にはいくつかの重大な変更があり、ボードパッケージとライブラリのインストールに失敗しました。これらの障害は1.8.8以降で修正されました。

## Step2 VScodeをインストール
　VSCodeを以下のURLから自分の環境にあったものをインストール。
　[Visual Studio Code のインストール](https://code.visualstudio.com/Download)

## Step3 Arduino for Visual Studio Code[拡張機能]を入れる
　VSCodeを起動して、Extentions（4つの四角のアイコン）を選択して検索窓からArduinoを検索して拡張機能をインストールします。
　ちなみに`command + P`または`ctrl + P`でVS CodeのQuick Openを開いて`>ext install vscode-arduino`と入力してEnterを押すと一発で検索することができます。

![スクリーンショット_2021-07-04_14_44_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235810/df2a1891-e9c4-fc52-5cb8-abd756885a1f.png)

![スクリーンショット_2021-07-04_12_22_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235810/d685ba93-adf7-7a3c-b777-ad5e0a98ac86.png)


## Step4 settings.jsonの変更
　次にsettings.jsonを変更して行きます。
　まず、上のツールバーから`Code`->`基本設定`->`設定`を開きます。コマンドでも`command + ,`または`ctrl + ,`でも開けます。
　拡張機能の項目からArduino configurationの設定をいじります。
　
![スクリーンショット_2021-07-04_12_50_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235810/6cc28bea-4644-e77b-a1d5-c7af9771b99a.png)


　以下のようなものをsettings.jsonに追加します。

```json
"arduino.ignoreBoards": [
],
"arduino.path": "Arduinoアプリケーションの場所",
"arduino.commandPath": "コマンドの実行体",
"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": 9600,
"C_Cpp.intelliSenseEngine": "Tag Parser"
```

だから、大体の人は…
Macなら以下のようなもの

```json
"arduino.ignoreBoards": [
],
"arduino.path": "/Applications/Arduino.app",
"arduino.commandPath": "Contents/MacOS/Arduino",
"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": 9600,
"C_Cpp.intelliSenseEngine": "Tag Parser"
```

Winなら多分こんな感じ（Macしか持ってないけどこうやって書くといいと思う）

```json
"arduino.ignoreBoards": [
],
"arduino.path": "C:\Program Files (x86)\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": 9600,
"C_Cpp.intelliSenseEngine": "Tag Parser"
```

## Step5 動作確認して終わり！
　実際にどうやって使うのか？
　赤い部分からBoardを選択して（今回はM5StickCなのでM5StickCを選択中）、青い部分でシリアルポートを選択して下さい。
　そして右上から書き込んだら終了です。
![スクリーンショット_2021-07-04_13_46_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235810/7128af38-33ec-cdd7-9353-3f24ef1c8295.png)



# VSCodeでこんな時はどうしたらいいんだ！！！！
　VSCodeでArduinoIDEでやっていとことはどうやってやるんだろうか？効率的なショートカットはあるのか？ということを調査した結果をまとめてみています。
　余裕があれば随時追加させていただきます。

## サンプルプログラムは？
　「サンプルプログラムを開きたいなー」と思った時どこにいるのかというと`command + P`または`ctrl + P`でVS CodeのQuick Openを開いて`> Arduino:Examples`を開いて一覧が表示されるので好きなサンプルを選んで開くことができます。
![スクリーンショット_2021-07-04_14_08_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235810/d6f24964-f53e-93d5-3478-ead1b7e9fc86.png)

## スケッチを変更したい！
　いくつもプログラム作って最後にmainで呼び出したいことなんていうそこのあなたは、`command + P`または`ctrl + P`でVS CodeのQuick Openから`>Arduino: Select Sketch`からも変更することができます。

![スクリーンショット_2021-07-04_14_23_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235810/75565fb3-10ce-b6da-08d5-4c7d486d7d7a.png)

　
## M5StickCに書き込みたいだー！
　書き込みに関しては、右上の「下矢印と長方形が組み合わされたようなアイコン」から書き込むこともできます。また、頻繁に使うのでショートカット`command + option + U`または`Ctrl + Alt + U` でも書き込めます。
　ちなみに`command + P`または`ctrl + P`でVS CodeのQuick Openから`>Arduino:Upload`でもできます。
![スクリーンショット_2021-07-04_13_46_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235810/41c33a1f-88d3-f11d-cde3-43e8ce290ff0.png)


## シリアルポートを変更したい…
　シリアルポートが間違っていたということはしょっちゅうあるかと思います。(僕の学習能力がないだけかも…)
　そんな時はstep5のように画面右下から変更する方法もありますが、`command + P`または`ctrl + P`でVS CodeのQuick Openから`>Arduino:Select Serial Port`から変更することもできます。

![スクリーンショット_2021-07-04_15_30_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235810/bedeaba0-2e2f-f745-441d-7428d7616cfb.png)

## シリアルモニタ開きたいんじゃ！
　右下のバーのコンセントのマークからシリアルモニタを開けます。
　ちなみに`command + P`または`ctrl + P`でVS CodeのQuick Openから`>Arduino:Open Serial Monitor`からも開くことができます。

## シリアルモニタがうざい！
　シリアルモニタがうざい時ってありますよね？だけど手を離したくないなんてわがままな時は`command + P`または`ctrl + P`でVS CodeのQuick Openから`>Arduino:Close Serial Monitor`から閉じることができます。

## コンパイルしたいんだが！
　M5StickC を触っていると「え、なんで？」というエラーがばかばか出てくるとおもいます。（んー、調べずに適当に雰囲気で書いてる僕も悪かもしれませんが…）
　そんな時にエラーの切り分けのためにコンパイルできるか試してみたいときもあると思います。そこでそんな時は、右上の「コードとチェックマークのついていいるアイコン」からコンパイルだけすることもできます。
![スクリーンショット_2021-07-04_13_46_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235810/7128af38-33ec-cdd7-9353-3f24ef1c8295.png)

## シリアル通信の速度を変えたいんじゃ！
　シリアル通信の速度際でシリアルモニタに正常に表示されない時ってあると思います。そんな時シリアル通信の速度は、`command + P`または`ctrl + P`でVS CodeのQuick Openから`>Arduino:Change Board Rate`から変更できます。

![スクリーンショット_2021-07-04_14_29_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235810/f46d9e24-4edb-42c9-0084-4c68cd7b9f75.png)


## ボードの設定は？
　M5Stickだけじゃないボードを使いたい時はstep5を参考にして変えられるんです。
　　ちなみに`command + P`または`ctrl + P`でVS CodeのQuick Openから`>Arduino: Board Config`or`Arduino: Change Board type`からも変更することができます。

![スクリーンショット_2021-07-04_14_23_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235810/30887323-d949-a472-c324-e46309e7ea86.png)


## ライブラリを編集したいけど…
　ライブラリのアップデートや追加なんかをしたいときは、`command + P`または`ctrl + P`でVS CodeのQuick Openから`>Arduino: Arduino Library Manager`からも編集することができます。

## 参考
https://github.com/microsoft/vscode-arduin