VSCodeでProcessingプロジェクトを1つのワークスペースで管理できるようtasks.jsonを工夫した話

#動機
大学のプログラミング入門的な講義で使う言語がProcessingでした。
でも、**公式のIDEって使いにくくないですか？？？**~~ぶっちゃけそんな使ったことないので分からないんですけど~~
他の講義でVSCodeも使うしってことでどうせならVSCodeでProcessingの環境を作ろうではないか！そう思ったわけです。
でもですね？VSCodeとProcessingの連携のエントリーなんてもういっぱい書かれてるんですよ！！！！じゃあなんでわざわざ書くかっていうと**講義時に管理しやすいようにビルドタスクを工夫したからです！**

というのも僕は`user\...edu\各科目`みたいに管理しています。なのでプログラミング入門も`edu\ProgrammingIntro\各Processingプロジェクト`でやりたかったんです。しかし参考にしたエントリーのタスク構成ではWorkSpaceの直下かつ同名のpdeファイルでないと動かせない...。
参考：[ProcessingをVisual Studio Codeで動かしたい](https://qiita.com/jacynthe/items/d31eaa77496295c10556)
それを今回はWorkSpace直下にフォルダを作り、その中に.pdeファイルを作れば実行できるようにしてみました。

#1.前準備
#####Visual Studio Codeをインストール
[ここ](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)からインストールしましょう。詳しいインストール方法は探せばいくらでもあるので割愛。

#####Processingをインストール
これも割愛。[ここ](https://processing.org/download/)からインストールしちゃいましょう。

#2.VSCodeのProcessing拡張機能をインストール
[Processing Language](https://marketplace.visualstudio.com/items?itemName=Tobiah.language-pde)を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を作成`を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265062/e9064647-8c47-95a6-2da4-f77ea8dd65bd.png)
Othersを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265062/0cfa541a-a268-13d5-6342-55e1b4f43b5f.png)

tasks.jsonが出てきます。すでに書いてあるものを削除し、以下に書き変えます。

```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で動かしたい』](https://qiita.com/jacynthe/items/d31eaa77496295c10556)からのコピペですが、一点変更したところがあります。
それが

```json
"--sketch=${workspaceFolder}\\${relativeFileDirname}"
```
です。この`${workspaceFolder}\\${relativeFileDirname}`が重要です。VSCodeにはデバッグやタスク構成ファイルの為の置換変数が用意されています。この変数の場合`ワークスペースのフォルダディレクトリ\\今開いてるファイルの名前`に置換されます(であってる...はず)。フルパスです。今回は`...ProgrammingIntro\\test\\test.pde`に置換されます。

詳しくは[公式リファレンス](https://code.visualstudio.com/docs/editor/variables-reference)をご参照ください。

#5.実行
ここまできたら`Ctrl+Shift+B`でビルドタスクを実行してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265062/f469cba0-5944-e5d3-7639-3f8a8ad61910.png)
成功です。お疲れ様でした。