「Visual Studio CodeでProcessing(2018年版)」を公開してから早や数年。ひさしぶりに読みかえしたところ内容がいささか古びていることに気づきましたので、現時点での最新版をあらためて公開します。手順の概要は次のとおり。
- ProcessingおよびVisual Studio Codeのインストール
processing-javaのインストール(Macのみ)- 拡張機能のインストール
- 実行用設定ファイル
task.jsonの作成
ProcessingおよびVisual Studio Codeのインストール
ProcessingおよびVisual Studio Codeをインストールしていなければインストールします。どちらのインストールについてもくわしい解説記事が多数存在しますので本稿では割愛します。
Windowsを使っている方はProcessingをインストールしたパスをメモしておきましょう。
processing-java のインストール(Macのみ)
Macを使われている方はPDEのメニュー"Tools" にある 'Install "processing-java"' を選択して processing-java をインストールします。
拡張機能のインストール
Visual Studio Codeを起動し、次のいずれかの拡張機能をインストールします。
後者は前者のforkとのことで、前者は開発も停滞しているように見えますので、後者のほうがよいかもしれません。
実行用設定ファイル task.json の作成
既存のProcessingスケッチを編集するときはそのディレクトリをVisual Studio Codeで開きます。あたらしいProcessingスケッチを作るときはディレクトリを作成、そのディレクと同じ名前の .pde ファイルを作成します(ディレクトリ名が MyAwesomeSketch だったら MyAwesomeSketch.pde)。
その状態で実行用の設定ファイルになる task.json を作成します。手作業でもよいですが、インストールした拡張機能の Create Task File コマンドを利用すると手間が省けます(手作業の場合は .vscode ディレクトリを作成してその中に task.json ファイルを作成)。
作成した task.json ファイルは次になるように編集します。
{
"version": "2.0.0",
"tasks": [
{
"label": "Run",
"command": "${Processingインストールパス}processing-java",
"type": "process",
"args": [
"--force",
"--sketch=${workspaceFolder}",
"--run"
],
"group": {
"kind": "build",
"isDefault": true
},
"presentation": {
"reveal": "always",
"panel": "new"
}
}
]
}
${Processingインストールパス}は各自の環境にあわせて書き換えてください。Macだと不要のようです。
2018年版との違いは --sketch=${workspaceFolder} です。マルチルートワークスペースのサポートにより2018年版で記述していた環境変数 workspaceRoot はdeprecatedになりました。
Why isn't ${workspaceRoot} documented?
上記リンク先をご覧になってお気づきの方もおられるかと思いますが、マルチルートワークスペースを使う際は環境変数 workspaceFolder は使えません。その場合は替わりに fileWorkspaceFolder を指定しましょう。ただしこのときは実行したいProcessingスケッチの .pde を開いてアクティブにしておく必要があります。ご注意を。
task.json ファイルを保存して、 Ctrl + Shift + B を入力してProcessingが実行されたら設定は終了です。
私は安定版を待つ派なのでまだ試していませんが、Processingも4のβ版がリリースされたので、あたらしいPDEの機能によってはVisual Studio Codeを使う積極的な理由はもうないかもしれません。とはいえ使い慣れたエディタのありがたみを常日頃感じている身として、本稿がどなたかのお役に立ちましたら幸いです。