#動機
大学のプログラミング入門的な講義で使う言語がProcessingでした。
でも、公式のIDEって使いにくくないですか???ぶっちゃけそんな使ったことないので分からないんですけど
他の講義でVSCodeも使うしってことでどうせならVSCodeでProcessingの環境を作ろうではないか!そう思ったわけです。
でもですね?VSCodeとProcessingの連携のエントリーなんてもういっぱい書かれてるんですよ!!!!じゃあなんでわざわざ書くかっていうと講義時に管理しやすいようにビルドタスクを工夫したからです!
というのも僕はuser\...edu\各科目
みたいに管理しています。なのでプログラミング入門もedu\ProgrammingIntro\各Processingプロジェクト
でやりたかったんです。しかし参考にしたエントリーのタスク構成ではWorkSpaceの直下かつ同名のpdeファイルでないと動かせない...。
参考:ProcessingをVisual Studio Codeで動かしたい
それを今回はWorkSpace直下にフォルダを作り、その中に.pdeファイルを作れば実行できるようにしてみました。
#1.前準備
#####Visual Studio Codeをインストール
ここからインストールしましょう。詳しいインストール方法は探せばいくらでもあるので割愛。
#####Processingをインストール
これも割愛。ここからインストールしちゃいましょう。
#2.VSCodeのProcessing拡張機能をインストール
Processing LanguageをVSCode内のマーケットプレイスかリンク先からインストールします。インストール後VSCodeを再起動します。
しました?そしたら.pdeファイルでもシンタックスハイライトやコード補完が有効になります。
#3.ワークスペースの設定
次にワークスペースを作るなり開くなりしましょう。今回はProgrammingIntroというワークスペースを使用します。ワークスペース直下にtestというフォルダを作ります。そこにtest.pdeを作成。
ちゃんとフォルダを作らないと失敗します。
ここで90%の人にはいらないと思う注意なんですが、**VSCode用のArduino拡張機能を入れると競合するのか.pdeが.inoに強制的に置き換わってしまいます。**原因は不明なのですがとりあえずワークスペース内でArduino拡張機能を無効化すれば正常に.pdeが作成できます。
2019/11/25追記:Arduinoと競合する原因ですが、Arduino 1.0より前はスケッチの拡張子が.pdeだったことが分かりました。なので以前のスケッチをコンパイルできるように拡張機能が.pdeに対応してたようです…。
#4.tasks.jsonの設定
いよいよtasks.jsonの編集です。ターミナル>既定のビルドタスクの構成
を選択、テンプレートからtasks.jsonを作成
を押します。
Othersを選択。
tasks.jsonが出てきます。すでに書いてあるものを削除し、以下に書き変えます。
{
"version": "2.0.0",
"tasks": [
{
"label": "Run",
"command": "processing-java.exeがあるディレクトリ",
"type": "process",
"args": [
"--force",
"--sketch=${workspaceFolder}\\${relativeFileDirname}",
"--run"
],
"group": {
"kind": "build",
"isDefault": true
},
"presentation": {
"reveal": "always",
"panel": "new"
}
}
]
}
**"command": "processing-java.exeがあるディレクトリ",**は各々違うので気を付けてください。Processing.exeと同じ場所にあるので見つけるのは難しくないはずです。
このjsonのほとんどは上でも挙げさせていただいた『ProcessingをVisual Studio Codeで動かしたい』からのコピペですが、一点変更したところがあります。
それが
"--sketch=${workspaceFolder}\\${relativeFileDirname}"
です。この${workspaceFolder}\\${relativeFileDirname}
が重要です。VSCodeにはデバッグやタスク構成ファイルの為の置換変数が用意されています。この変数の場合ワークスペースのフォルダディレクトリ\\今開いてるファイルの名前
に置換されます(であってる...はず)。フルパスです。今回は...ProgrammingIntro\\test\\test.pde
に置換されます。
詳しくは公式リファレンスをご参照ください。