Help us understand the problem. What is going on with this article?

ProcessingをVisual Studio Codeで動かしたい

More than 1 year has passed since last update.

初投稿で簡単ですがAdventCalendarに参加させて頂きました。今後も勉強した事を色々投稿していこうと思っております。
※次の記事も書きました→MIDIコントローラーでProcessingをコントロールする

普段VSやCloud9、公式IDEやらバラバラな環境で勉強しているのですが、
一纏めにしたいな_という事で元々お気に入りだったVisual Studio Codeで開発環境を整えています。

今回はProcessingをVisual Studio Codeで動かすという何番煎じか分からないエントリーを備忘録としてココに記します。

1.Visual Studio Codeインストール

サクサクっと入れちゃいましょう。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

2.拡張機能【processing language】のインストール

・シンタックスハイライトやコード補完をしてくれるようになります。
 インストールしたらVsCodeを再起動して有効化しましょう。 
processing language.png

3.Processingを実行出来る様にする(ビルドタスクの作成)

ワークスペースフォルダに新しくprocessingのファイル(.pde)を作成し適当に何か書きます。
03.png

・このままでは実行出来ませんので以下の作業を行います。
Ctrl+Shift+Bでビルドタスクの実行をしようとすると_
コマンドパレットに「実行するビルド タスクがありません。タスクを構成する…」と表示されますのでクリックします。
04.png
次に「テンプレートからtasks.jsonを生成」をクリック
05.png
続いて「Others 任意の外部コマンドを実行する例」をクリック
06.png
すると以下の様に.vscodeフォルダが作成され配下に「tasks.json」ファイルが生成されます。
07.png
「tasks.json」の内容を以下の様に編集します。
以下の記事を参考にさせて頂きました。
Visual Studio CodeでProcessing(2018年版)

※"command":~のパスの部分はprocessing-java.exeが入ったフォルダのパスを指定して下さい。
(processing.exeと同じ場所に居ます)

tasks.json
{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "Run",
        "command": "C:\\Program Files\\processing\\processing-java",
        "type": "process",
        "args": [
          "--force",
          "--sketch=${workspaceRoot}",
          "--run"
        ],
        "group": {
          "kind": "build",
          "isDefault": true
        },
        "presentation": {
          "reveal": "always",
          "panel": "new"
        }
      }
    ]
}

4.Processingを実行する

さて準備が出来ましたので実行してみましょう。
改めてCtrl+Shift+Bでタスクの実行を行います。
08.png
外部コマンドの実行が行われ、Processingが起動しました。


ここまでパッと出来ちゃう人も居れば、小さな事で躓いてしまう人も居ると思います。
特に拘らなければ公式IDEで十分(ライブラリは結局、公式IDEからインストールする)なのですが、
色々カスタマイズ出来るVisual Studio Codeでコーディングするのも楽しいものです。

jacynthe
日々勉強のプログラマーです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした