77
61

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ArduinoをVSCodeで使いたい!

Last updated at Posted at 2021-07-04

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のインストール先
 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 のインストール

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

スクリーンショット_2021-07-04_12_22_48.png

Step4 settings.jsonの変更

 次にsettings.jsonを変更して行きます。
 まず、上のツールバーからCode->基本設定->設定を開きます。コマンドでもcommand + ,またはctrl + ,でも開けます。
 拡張機能の項目からArduino configurationの設定をいじります。
 
スクリーンショット_2021-07-04_12_50_42.png

 以下のようなものをsettings.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なら以下のようなもの

"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しか持ってないけどこうやって書くといいと思う)

"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

VSCodeでこんな時はどうしたらいいんだ!!!!

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

サンプルプログラムは?

 「サンプルプログラムを開きたいなー」と思った時どこにいるのかというとcommand + Pまたはctrl + PでVS CodeのQuick Openを開いて> Arduino:Examplesを開いて一覧が表示されるので好きなサンプルを選んで開くことができます。
スクリーンショット_2021-07-04_14_08_36.png

スケッチを変更したい!

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

スクリーンショット_2021-07-04_14_23_47.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

シリアルポートを変更したい…

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

スクリーンショット_2021-07-04_15_30_35.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

シリアル通信の速度を変えたいんじゃ!

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

スクリーンショット_2021-07-04_14_29_23.png

ボードの設定は?

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

スクリーンショット_2021-07-04_14_23_47.png

ライブラリを編集したいけど…

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

参考

77
61
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
77
61

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?