技術メモ

【2022年版】Visual Studio Code(VSCode)でArduinoの開発環境を構築する方法

2022年5月21日

arduino,esp32

 

どうも、白夜霧(@KiRi_Byakuya)です。

 

今回は、Visual Studio Code(以下:VSCode)でArduinoの開発環境を構築する方法の覚書。

 

「Arduino IDE」でも開発は可能ですが、使っているとどうしても不便に感じる部分が多々あるので、早々にVSCodeに移行しました。

 

誰かの参考になれば幸いですm(_ _)m

 

ココに注意

  • 2023年5月現在、Microsoft公式の拡張機能「Arduino」は、最新のArduino IDE(2.X.Y)以上は非対応。かつ今後はサポート予定なし、となりました。
  • この記事で記載されているVSCodeでの開発環境構築は、 IDEのバージョンが「2.X.Y未満」のものにしか対応していません。

 

 

「Visual Studio Code(VSCode)」でArduinoの開発環境を構築する手順

メモ,実験,勉強,推理

 

簡単な流れ

  • Arduino IDE」をインストール
  • Visual Studio Code」(以下:VSCode)をインストール
  •  VSCodeの拡張機能「Arduino」をインストール
  •  拡張機能の設定
  • サンプルプログラム(スケッチ)をコンパイル&基板に書き込む。

 

KiRi

本記事では①②のインストール手順は省略します。

 

①のインストール手順は下記記事を参考にして下さい。

arduino,esp32
オススメのESP32開発ボード&開発環境+初期設定

オススメの「ESP32」開発ボード&開発環境+初期設定の覚書

続きを見る

 

 

「Visual Studio Code(VSCode)」でArduinoの開発環境を構築する

コード,Programming,プログラミング

 

本記事では下記環境で開発環境を構築します。

  • OS:Windows 11 Home
  • Visual Studio Code Version:1.67.1
  • Arduino IDE 1.8.19

 

Macの開発環境構築でもやることは変わらないと思います。逆に違う場所があればコメントにてご指定頂けると幸いですm(_ _)m

 

VSCodeに拡張機能「Arduino」をインストール

VSCordに拡張機能「Arduino」をインストール

 

VSCodeを開いて、下記拡張機能をインストールして下さい。

 

VSCodeの拡張機能「Arduino」を使用する環境には、必ず『Arduino IDE』または『Arduino CLI』のどちらか一方を前もってインストールしている必要があります。

インストール方法及び初期設定に関しては、コチラの記事を参考にして下さい。

 

VSCodeの拡張機能「Arduino」の初期設定(setting.json)

①基本設定「[Ctrl] + [Shift] + [P]→Open Setting(JSON)」を開く。

拡張機能「PHP IntelliSense」インストール&設定

 

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の一番下部分に追記しています。

VSCordの拡張機能「Arduino」の初期設定(setting.json)

 

上記はあくまで「私の開発環境化での設定」です。細かい部分は各自で調整して下さい。

 

ここからは、あくまで個人的に気をつけるべき設定を抜粋して、注意点を記載します。

 

Arduino: Additional Urls (arduino.additionalUrls)

この設定は『Arduino IDE』で言うところの「ファイル」→「環境設定」の「設定」タブの「追加のボードマネージャーのURL」の部分です。

VSCordの拡張機能「Arduino」の初期設定(setting.json)/ Arduino: Additional Urls (arduino.additionalUrls)

 

この部分で追加しているURLは、使用しているArduinoのボードによって異なると思うので注意。

 

KiRi

 

Arduino: Disable intelli Sense Auto Gen(arduino.disableIntelliSenseAutoGen)

この設定をオフ(false)にすると「.vscode」フォルダに生成される「c_cpp_properties.json」を自動生成してくれます。

VSCordの拡張機能「Arduino」の初期設定(setting.json)/ Arduino: Disable intelli Sense Auto Gen(arduino.disableIntelliSenseAutoGen)

 

逆にここをオン(true)にすると、自力で「c_cpp_properties.json」を生成して、各ライブラリ等のパスを追記しないとコンパイル出来ないので注意。

 

KiRi

多分デフォルトでfalseだと思いますが、私はコレをtrueにしてしまい無駄につまづいた。

 

Arduino: Path(arduino.path)

Arduino本体へのパス設定。まぁ、言わずもがなという部分ですが、Arduinoのインスール先をデフォルト以外に設定している人は要確認。

 

かつ、Windowsを使っている人の要注意ポイントとして、setting.jsonでパスを記載する際は「¥」を「\\」に置き換えること。

VSCordの拡張機能「Arduino」の初期設定(setting.json)/ Arduino: Path(arduino.path)

 

ちなみに、ややこしいですが「設定」画面でパスを編集する場合は「\」は一つでOKです。

VSCordの拡張機能「Arduino」の初期設定(setting.json)

 

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'のデフォルトパスがないため、パスを設定する必要があります (変更後、再起動が必要です)

 

その他細かい設定は公式ページを要確認。

 

 

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方

プログラミング,パソコン,仕事

 

拡張機能「Arduino」の簡単な使い方の覚え書きです。

 

ライブラリの追加方法(add library)

[Ctrl] + [Shift] + [P] → 「Arduino: Board Manger」を選択。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 / ライブラリ追加 add library

 

Arduino: Board Manger」のタブが表示されます。追加方法は「Arduino IDE」と同じです。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 / ライブラリ追加 add library

 

ボードタイプ(Board Config)を設定

[Ctrl] + [Shift] + [P]→「Arduino: Bard Config」を選択。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 / ライブラリ追加 add library

 

Arduino: Board Config」のタブが表示されます。「Selected Board:」を任意の開発ボードに設定して下さい。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 /  ボードタイプ(Board Config)を設定

 

※注意「Selected Board:」以外の項目は、ボードタイプを選択後に若干の間を置いてから表示される?っぽいです。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 /  ボードタイプ(Board Config)を設定

 

Arduinoのサンプルプログラム(スケッチ)を新規作成する方法

[Ctrl] + [Shift] + [P]→「Arduino: Examples」を選択。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 /  Arduinoのサンプルプログラム(スケッチ)を新規作成する方法

 

Arduino Examples」のタブが表示されます。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 /  Arduinoのサンプルプログラム(スケッチ)を新規作成する方法

 

作成したいサンプルをクリックすれば、自動的に新しいVSCodeのウィンドウが開きます。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 /  Arduinoのサンプルプログラム(スケッチ)を新規作成する方法

 

ココに注意

  • 「Arduino Examples」で任意のボードの(例えばESP32)のサンプルが表示されない場合は、ボードタイプ(Board Config)が設定されてない可能性があります。
  • 新規で作成したサンプルプログラムは、VSCodeで開いているフォルダ内に「generated_examples」というフォルダが自動生成されて、その中に作成されます。

 

 

Arduinoのプログラム(スケッチ)をVSCodeで「コンパイル」する方法

コンパイルは、VSCodeのウィンドウ右上の「チェックマーク」のアイコンを押す。もしくは「Ctrl + Alt + R」でコンパイルが実行されます。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 / Arduinoのプログラム(スケッチ)のVSCode上でコンパイルする方法

 

KiRi

[Ctrl] + [Shift] + [P]→「Arduino: Verify」も同じ操作です。

 

Arduinoのプログラム(スケッチ)をVSCodeで「基板に書き込む」方法

Arduino基板をパソコンに接続し、COM番号を選択します。選択はVSCodeの右下の「COMx」をクリック。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 / Arduinoのプログラム(スケッチ)のVSCode上で基板に書き込む方法

 

もしくは[Ctrl] + [Shift] + [P]→「Arduino: Select Serial Port」でシリアルポートを選択して下さい。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 / Arduinoのプログラム(スケッチ)のVSCode上で基板に書き込む方法

 

COM番号は各パソコンによって異なるので注意。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 / Arduinoのプログラム(スケッチ)のVSCode上で基板に書き込む方法

 

書き込みの実行は、コンパイルの時同様にVSCode右上の「下矢印」のアイコンを押す。もしくは「Ctrl + Alt + R」で「コンパイル」→「書き込み」の順で実行されます。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 / Arduinoのプログラム(スケッチ)のVSCode上で基板に書き込む方法

 

KiRi

[Ctrl] + [Shift] + [P]→「Arduino: Upload」も同じ操作です。

 

VSCode上でArduino基板向けの「シリアルモニター」を開く

[Ctrl] + [Shift] + [P]→「Arduino: Open Serial Monitor」でシリアルモニターが開きます。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 / VSCode上でArduino基板向けのシリアルモニターを開く

 

VSCodeの右下のコンセントのアイコンをクリックすることで同様の処理が可能です。

VSCode上でArduino基板向けのシリアルモニターを開く

 

接続中はアイコンが「バツマーク」になります。

VSCode上でArduino基板向けのシリアルモニターを開く

 

VSCode上でArduinoのスケッチ(プログラム)を新規作成する方法

作成するスケッチ(プログラム)を管理する空フォルダを作り、右クリック→「VSCodeを開く

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 / VSCode上でArduinoのスケッチ(プログラム)を新規作成する方法

 

フォルダの名前はプログラムの名前と同じものを推奨。

 

[Ctrl] + [Shift] + [P]→「Arduino: initialize」を選択。

VSCode上でArduinoのスケッチ(プログラム)を新規作成する方法

 

メインのソースファイル(.ino)のファイル名を入力して「Enter

VSCode上でArduinoのスケッチ(プログラム)を新規作成する方法

 

使用するボードタイプを選択して「Enter

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 / VSCode上でArduinoのスケッチ(プログラム)を新規作成する方法

 

上記の入力が完了すると「void setup()」と「void loop()」が記述されたメインのソースファイル(.ino)が生成され、スケッチの新規作成は完了です。

「Visual Studio Code(VSCode)」の拡張機能「Arduino」の使い方 / VSCode上でArduinoのスケッチ(プログラム)を新規作成する方法

 

別のソースファイルを追加する場合は「hogehoge.ino」など、拡張子を「.ino」にすればOK。ヘッダーは「.h」です。

 

参考になったらポッチとお願いしますm(_ _)m


プログラムランキング

  • この記事を書いた人

白夜霧

現役のIT土方・社畜・カフェイン中毒者。趣味のために生きる。サラリーマンの雑記ブログ。さり気なくYouTuberデビューしました\(^o^)/

-技術メモ
-, , , , ,

© 2024 My,WebNote - 備忘録 -