6
4

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.

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

Last updated at Posted at 2019-10-02

#動機
大学のプログラミング入門的な講義で使う言語が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を作成を押します。
image.png
Othersを選択。
image.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で動かしたい』からのコピペですが、一点変更したところがあります。
それが

"--sketch=${workspaceFolder}\\${relativeFileDirname}"

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

詳しくは公式リファレンスをご参照ください。

#5.実行
ここまできたらCtrl+Shift+Bでビルドタスクを実行してみましょう。
image.png
成功です。お疲れ様でした。

6
4
0

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
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?