どうも、白夜霧（@KiRi_Byakuya）です。
今回は、Visual Studio Code（以下：VSCode）でArduinoの開発環境を構築する方法の覚書。
「Arduino IDE」でも開発は可能ですが、使っているとどうしても不便に感じる部分が多々あるので、早々にVSCodeに移行しました。
誰かの参考になれば幸いですm(_ _)m
[st-cmemo fontawesome=”fa-exclamation-circle” iconcolor=”#ef5350″ bgcolor=”#ffebee” color=”#000000″ iconsize=”200″]
- 2023年5月現在、Microsoft公式の拡張機能「Arduino」は、最新のArduino IDE（2.X.Y）以上は非対応。かつ今後はサポート予定なし、となりました。
- この記事で記載されているVSCodeでの開発環境構築は、 IDEのバージョンが「2.X.Y未満」のものにしか対応していません。
[/st-cmemo]
「Visual Studio Code（VSCode）」でArduinoの開発環境を構築する手順
[st-mybox title=”簡単な流れ” fontawesome=”fa-list-ol” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”” borderwidth=”3″ borderradius=”5″ titleweight=”bold” title_bordercolor=”#757575″ fontsize=”” myclass=”st-mybox-class st-title-under st-list-no” margin=”25px 0 25px 0″]
- 「Arduino IDE」をインストール
- 「Visual Studio Code」（以下：VSCode）をインストール
- VSCodeの拡張機能「Arduino」をインストール
- 拡張機能の設定
- サンプルプログラム（スケッチ）をコンパイル＆基板に書き込む。
[/st-mybox]
本記事では①②のインストール手順は省略します。
①のインストール手順は下記記事を参考にして下さい。
[st-card myclass=”” id=”16894″ label=”” pc_height=”” name=”” bgcolor=”” color=”” fontawesome=”” readmore=”on” thumbnail=”on” type=””]
「Visual Studio Code（VSCode）」でArduinoの開発環境を構築する
本記事では下記環境で開発環境を構築します。
[st-cmemo fontawesome=”fa-file-text-o” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ bordercolor=”” borderwidth=”” iconsize=””]
- OS：Windows 11 Home
- Visual Studio Code Version：1.67.1
- Arduino IDE 1.8.19
[/st-cmemo]
[st-cmemo fontawesome=”st-svg-bigginer_l” iconcolor=”#9CCC65″ bgcolor=”#F1F8E9″ color=”#000000″ bordercolor=”” borderwidth=”” iconsize=””]
Macの開発環境構築でもやることは変わらないと思います。逆に違う場所があればコメントにてご指定頂けると幸いですm(_ _)m
[/st-cmemo]
VSCodeに拡張機能「Arduino」をインストール
VSCodeを開いて、下記拡張機能をインストールして下さい。
[st-cmemo fontawesome=”fa-external-link” iconcolor=”#BDBDBD” bgcolor=”#fafafa” color=”#757575″ bordercolor=”” borderwidth=”” iconsize=””]
Arduino for Visual Studio Code
[/st-cmemo]
[st-cmemo fontawesome=”fa-exclamation-circle” iconcolor=”#ef5350″ bgcolor=”#ffebee” color=”#000000″ bordercolor=”” borderwidth=”” iconsize=””]
VSCodeの拡張機能「Arduino」を使用する環境には、必ず『Arduino IDE』または『Arduino CLI』のどちらか一方を前もってインストールしている必要があります。
インストール方法及び初期設定に関しては、コチラの記事を参考にして下さい。
[/st-cmemo]
VSCodeの拡張機能「Arduino」の初期設定（setting.json）
①基本設定「[Ctrl] + [Shift] + [P]→Open Setting(JSON)」を開く。
「setting.json」に下記を追記する。
"arduino.additionalUrls": [
"https://dl.espressif.com/dl/package_esp32_index.json"
],
"arduino.analyzeOnOpen": true,
"arduino.analyzeOnSettingChange": true,
"arduino.clearOutputOnBuild": false,
"arduino.commandPath": "arduino_debug.exe",
"arduino.defaultBaudRate": 115200,
"arduino.disableIntelliSenseAutoGen": false,
"arduino.disableTestingOpen": false,
"arduino.enableUSBDetection": true,
"arduino.logLevel": "info",
"arduino.openPDEFiletype": false,
"arduino.path": "C:\\Program Files (x86)\\Arduino",
"arduino.skipHeaderProvider": false,
"arduino.useArduinoCli": false,
"C_Cpp.intelliSenseEngine": "Tag Parser"
※setting.jsonの一番下部分に追記しています。
[st-cmemo fontawesome=”fa-exclamation-circle” iconcolor=”#ef5350″ bgcolor=”#ffebee” color=”#000000″ bordercolor=”” borderwidth=”” iconsize=””]
上記はあくまで「私の開発環境化での設定」です。細かい部分は各自で調整して下さい。
[/st-cmemo]
ここからは、あくまで個人的に気をつけるべき設定を抜粋して、注意点を記載します。
Arduino: Additional Urls (arduino.additionalUrls）
この設定は『Arduino IDE』で言うところの「ファイル」→「環境設定」の「設定」タブの「追加のボードマネージャーのURL」の部分です。
この部分で追加しているURLは、使用しているArduinoのボードによって異なると思うので注意。
私は「ESP32」の開発キット（ESP32-DevKitC-32D）を使っています。
Arduino: Disable intelli Sense Auto Gen（arduino.disableIntelliSenseAutoGen）
この設定をオフ（false）にすると「.vscode」フォルダに生成される「c_cpp_properties.json」を自動生成してくれます。
逆にここをオン（true）にすると、自力で「c_cpp_properties.json」を生成して、各ライブラリ等のパスを追記しないとコンパイル出来ないので注意。
多分デフォルトでfalseだと思いますが、私はコレをtrueにしてしまい無駄につまづいた。
Arduino: Path（arduino.path）
Arduino本体へのパス設定。まぁ、言わずもがなという部分ですが、Arduinoのインスール先をデフォルト以外に設定している人は要確認。
かつ、Windowsを使っている人の要注意ポイントとして、setting.jsonでパスを記載する際は「￥」を「\\」に置き換えること。
ちなみに、ややこしいですが「設定」画面でパスを編集する場合は「\」は一つでOKです。
Arduino: Use Arduino Cli（arduino.useArduinoCli）
私は「Arduino IDE」しか使用経験がないので、あくまで記載しかできませんが「Arduino CLI」を使っている場合は、ここを「true」に設定する必要があります。
かつ、設定後再起動が必要とのこと。
Arduino: Use Arduino Cli
Use Arduino CLI installed instead of Arduino IDE. Arduino: Path must be set, as there is not default path for ‘aruino-cli’, (Requieres a restart after change)
直訳：Arduino IDEの代わりにインストールしたArduino CLIを使用します。Arduinoの場合。aruino-cli’のデフォルトパスがないため、パスを設定する必要があります (変更後、再起動が必要です)
その他細かい設定は公式ページを要確認。
[st-cmemo fontawesome=”fa-external-link” iconcolor=”#BDBDBD” bgcolor=”#fafafa” color=”#757575″ bordercolor=”” borderwidth=”” iconsize=””]
Arduino for Visual Studio Code
[/st-cmemo]
「Visual Studio Code（VSCode）」の拡張機能「Arduino」の使い方
拡張機能「Arduino」の簡単な使い方の覚え書きです。
ライブラリの追加方法（add library）
[Ctrl] + [Shift] + [P] → 「Arduino: Board Manger」を選択。
「Arduino: Board Manger」のタブが表示されます。追加方法は「Arduino IDE」と同じです。
ボードタイプ（Board Config）を設定
[Ctrl] + [Shift] + [P]→「Arduino: Bard Config」を選択。
「Arduino: Board Config」のタブが表示されます。「Selected Board:」を任意の開発ボードに設定して下さい。
※注意「Selected Board:」以外の項目は、ボードタイプを選択後に若干の間を置いてから表示される？っぽいです。
Arduinoのサンプルプログラム（スケッチ）を新規作成する方法
[Ctrl] + [Shift] + [P]→「Arduino: Examples」を選択。
「Arduino Examples」のタブが表示されます。
作成したいサンプルをクリックすれば、自動的に新しいVSCodeのウィンドウが開きます。
[st-cmemo fontawesome=”fa-exclamation-circle” iconcolor=”#ef5350″ bgcolor=”#ffebee” color=”#000000″ iconsize=”200″]
- 「Arduino Examples」で任意のボードの（例えばESP32）のサンプルが表示されない場合は、ボードタイプ（Board Config）が設定されてない可能性があります。
- 新規で作成したサンプルプログラムは、VSCodeで開いているフォルダ内に「generated_examples」というフォルダが自動生成されて、その中に作成されます。
[/st-cmemo]
Arduinoのプログラム（スケッチ）をVSCodeで「コンパイル」する方法
コンパイルは、VSCodeのウィンドウ右上の「チェックマーク」のアイコンを押す。もしくは「Ctrl + Alt + R」でコンパイルが実行されます。
[Ctrl] + [Shift] + [P]→「Arduino: Verify」も同じ操作です。
Arduinoのプログラム（スケッチ）をVSCodeで「基板に書き込む」方法
Arduino基板をパソコンに接続し、COM番号を選択します。選択はVSCodeの右下の「COMx」をクリック。
もしくは[Ctrl] + [Shift] + [P]→「Arduino: Select Serial Port」でシリアルポートを選択して下さい。
COM番号は各パソコンによって異なるので注意。
書き込みの実行は、コンパイルの時同様にVSCode右上の「下矢印」のアイコンを押す。もしくは「Ctrl + Alt + R」で「コンパイル」→「書き込み」の順で実行されます。
[Ctrl] + [Shift] + [P]→「Arduino: Upload」も同じ操作です。
VSCode上でArduino基板向けの「シリアルモニター」を開く
[Ctrl] + [Shift] + [P]→「Arduino: Open Serial Monitor」でシリアルモニターが開きます。
VSCodeの右下のコンセントのアイコンをクリックすることで同様の処理が可能です。
接続中はアイコンが「バツマーク」になります。
VSCode上でArduinoのスケッチ（プログラム）を新規作成する方法
作成するスケッチ（プログラム）を管理する空フォルダを作り、右クリック→「VSCodeを開く」
[st-cmemo fontawesome=”st-svg-bigginer_l” iconcolor=”#9CCC65″ bgcolor=”#F1F8E9″ color=”#000000″ bordercolor=”” borderwidth=”” iconsize=””]
フォルダの名前はプログラムの名前と同じものを推奨。
[/st-cmemo]
[Ctrl] + [Shift] + [P]→「Arduino: initialize」を選択。
メインのソースファイル（.ino）のファイル名を入力して「Enter」
使用するボードタイプを選択して「Enter」
上記の入力が完了すると「void setup()」と「void loop()」が記述されたメインのソースファイル（.ino）が生成され、スケッチの新規作成は完了です。
[st-cmemo fontawesome=”st-svg-bigginer_l” iconcolor=”#9CCC65″ bgcolor=”#F1F8E9″ color=”#000000″ bordercolor=”” borderwidth=”” iconsize=””]
別のソースファイルを追加する場合は「hogehoge.ino」など、拡張子を「.ino」にすればOK。ヘッダーは「.h」です。
[/st-cmemo]
参考になったらポッチとお願いしますm(_ _)m
コメント
記事、参考にさせていただき、ありがとうございます。
よかったら教えて下さい。開発環境として、以下の指定があります。
> Arduino IDE 1.8.19
最新のIDEだと、2.x かと思いますが、2.x で同様にvscode で環境つくれますか？
vscode での開発環境を作りたいので、大人しく古いバージョンをDLすればいい話だとは思うのですが、すでにお試しで2.x をインストールしていたので、どうしようかなと思いまして。
1.x と 2.xだと結構違っているみたいで、例えば、arduino_debug.exe とかもなくなっていますし、そもそもデフォルトインストールされるフォルダも違うっぽいです。
コメントありがとうございます。
久しくArduinoを触っていなかったので、色々調べてみたところ、VSCodeの拡張機能のページで「2.0.0以上は非対応で今後はサポートもしない」と明記されています。
なので、現状では最新版のIDEをメインの開発環境として使った方がいいと思います。