
【Processing】初心者がProcessingをVisual Studio Codeで動かす
はじめに(雑談)
昨日の夜からずっと試行錯誤してようやくできました。今まで私はVisual Studio Code(VSCode)をただの「jsonファイルに色を付けて見やすくするソフト」だと思っていたのですが、なんと書いたプログラムをVSCode上で実行できるらしいではないですか!! ということで、ちょうど試していたProcessingをVSCode上で実行できるよう設定してみました。
Processingは円や四角などの図形を、簡単なコーディングで描くことができるプログラミング言語なのですが、このエディタがなんとも見づらい!

勿論使いやすいようにカスタマイズできるんでしょうけど、よく分からないので、今回はVSCodeに頼っちゃいましょう。他の言語もVSCodeで動かせるらしいので、一緒に使えますしね。また、検索や置換機能などがVSCodeだと整っています。

また、これを読んでいる方に忠告ですが、私はこれらのソフトに詳しくはありません。ですが、初心者なりにどうやって解決したか、ここに記録しておこうと思います。
あと久しぶりにnote書いたらエディタが変わりまくっていて違和感が凄いあります。でもいろいろな機能追加してくれるのは嬉しい……
結論(成功した設定)
環境
windows10
Processing-3.5.4
Processing Language v-1.4.6
設定
VSCodeのMarketplaceから、拡張機能「Processing Language」をインストールします。

アンインストールの隣、歯車マークの拡張機能の設定から、Processing: Pathに自分のPC上のprocessing-java.exe(processing.exeと同じ階層にあります)のパスを書きます。

C:\Users\(ユーザー名)\ドキュメント\processing-3.5.4\processing-java
私の環境ではこのようになりました。
次にVSCodeで新しいファイルを作り、Ctrl+Shift+Bで実行しようとします。すると上に表示される
実行するビルドタスクがありません。ビルドタスクを構成する……
テンプレートからtasks.jsonを生成
Others 任意の外部コマンドを実行する例
を選択します。




そうするとtasks.jsonが生成されるので、以下のように書き換えます。"command"の部分は、processing-java.exeのパスを入力してください。また、パス中の区切りは\\(バックスラッシュ2つ)で書いてください。
{
"version": "2.0.0",
"presentation": {
"reveal": "always",
"panel": "new"
},
"tasks": [
{
"label": "Run",
"command": "C:\\Users\\(ユーザー名)\\ドキュメント\\processing-3.5.4\\processing-java.exe",
"type": "process",
"args": [
"--force",
"--sketch=${fileDirname}",
"--run"
],
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
tasks.jsonを保存した後に、動かしたいpdeファイルを開き、再度Ctrl+Shift+Bで実行すると、うまく実行できます。