ArduinoをVSCodeで編集する[Mac]

Arduino IDEにはコード補完機能などがなくて使いにくいため、Microsoftが昨年vscode上でarduinoのコードを編集できる `Arduino for Visual Studio Code` を発表しました！
Qiitaなどの記事を見ると、vscodeユーザーはWindowユーザーが多いこともあってか、あまり**Macでの環境構築の方法**がなかったので、備忘録代わりに書いておきます。

# Arduino IDEをインストール
vscodeで作業するとはいえ、コンパイル機能などは`Arduino IDE`のものをそのまま使っているようなので、Arduino IDEを最初に入れる必要があります。
https://www.arduino.cc/en/Main/Software
このページからMacOS版のArduino IDEをダウンロードし、zipファイルを解凍してアプリケーションフォルダに移します。

# Visual Studio Codeのインストール
こちらもダウンロードしてアプリケーションフォルダに入れておきます。
https://code.visualstudio.com/　

# 拡張機能Arduino for Visual Studio Code を入れる
Visual Studio Codeを起動したら、左側の欄から拡張機能のアイコンを選択し、`Arduino`で検索して図の`Arduino for Visual Studio Code`をインストールします。
![スクリーンショット 2018-08-15 2.18.38.png](https://qiita-image-store.s3.amazonaws.com/0/262908/09d7342d-6791-2793-ccd3-c5b2f65ae2fe.png)
インストールしたら、一度vscodeを再起動しておきましょう。
# settings.jsonの変更
上のツールバーで、`Code`->`基本設定`->`設定`を選択して、下の図の画面を開きます。
![スクリーンショット 2018-08-15 2.23.31.png](https://qiita-image-store.s3.amazonaws.com/0/262908/c21a05db-fcca-c785-a00c-8562406a2a8c.png)

この右側の部分に以下を追加します。(中括弧の中身だけ書けばいいことに注意してください）

```json:settings.json
{
    "arduino.path": "/Applications/Arduino.app",
    "arduino.commandPath": "Contents/MacOS/Arduino",
    "arduino.additionalUrls": "",
    "arduino.logLevel": "info",
    "arduino.enableUSBDetection": true,
    "arduino.disableTestingOpen": false,
    "arduino.skipHeaderProvider": false,
    "C_Cpp.intelliSenseEngine": "Tag Parser",
}
```

`arduino.path`はarduino.appのある場所、`arduino.commandPath`は実行ファイルの場所みたいです。WindowsやLinuxの場合はここが異なります。`"C_Cpp.intelliSenseEngine": "Tag Parser"`にすることでArduino特有の関数がインポートされます。
　これも書き込んだら一度vscodeを再起動します。

# 簡単なプログラムを作成してみる
それでは実際に簡単なプログラムを動かして見ましょう！
今回使うArduinoは写真のようなものです。とても簡単に、LEDのアノードを13番端子に、カソードをGNDにつけて見ます。これをUSBケーブルでパソコンに接続します。

<img src=https://qiita-image-store.s3.amazonaws.com/0/262908/466e8807-c936-a07c-422a-065fd57b2312.jpeg width=300>

次に、エクスプローラーの画面から`フォルダーを開く`を押し、新規フォルダを作成します。名前はここでは`test`にしておきます。
![スクリーンショット 2018-08-15 2.35.58.png](https://qiita-image-store.s3.amazonaws.com/0/262908/741262df-d537-dab9-c0fa-0b5f469b8c2e.png)

フォルダを開いたら、`ファイル`->`新規ファイル`を選び、そのあと画面下にある`プレーンテキスト`と書いてある場所を押して、`Arduino`を選択します。
![スクリーンショット 2018-08-15 2.40.00.png](https://qiita-image-store.s3.amazonaws.com/0/262908/a62106b3-c8b4-e4ed-a1af-e19645c18ff0.png)

以下を書いて保存します。保存名は`test.ino`などにしておきます。

```cpp:test.ino
const int LED = 13;

void setup() {
    pinMode(LED, OUTPUT);
}

void loop() {
    digitalWrite(LED, HIGH);
    delay(1000);
    digitalWrite(LED, LOW);
    delay(1000);
}
```

次に、`F1`を押すとArduinoの設定項目が出るので、そこから使うArduinoに沿った設定をします。今回は次のように設定しました

| 設定項目 | 設定値 | 
|:-----------|------------|
| Arduino: Board Configuration  | Arduino/Genuino Uno (Arduino AVR Boards) | 
| Arduino: Select Serial Port | /dev/cu.usbmodem1411 Arduino (www.arduino.cc) |    

いよいよ実行です！　`F1`を押して、`Arduino: Upload`を選択します。
うまくいけば出力にこのように表示されて、LEDが１秒ごとに点滅します。
![スクリーンショット 2018-08-15 3.09.41.png](https://qiita-image-store.s3.amazonaws.com/0/262908/ee2b6f9e-ba04-4f51-5e4f-a75809828859.png)

ちなみに、
`[Warning] Output path is not specified. Unable to reuse previously compiled files. Upload could be slow. See README.`
が出てますが、これはログの出力先フォルダを指定していないためで、同じフォルダの`.vscode/ardiono.json`に`"output": "../ArduinoOutput"`を追加すると消えます。