Setting up a VS Code development environment for Processing (Mac)

I set up a VS Code development environment for Processing on Mac.


I really dislike the Processing IDE, so I first referred to Qiita: I want to run Processing in Visual Studio Code to set it up. However, with the method in this article, you have to configure .vscode for every single sketch, which is annoying. So, this is a memo on how I improved it so that when you clone something like the official repository for Programming and Visual Arts learned from scratch with Processing to try it out, you can immediately run multiple sketches contained within the project folder.

Preparation

First, perform the setup according to the Qiita article mentioned above. Then, install Processing. I'll use Homebrew because it's easy.

install.sh

1# homebrew
2if !(type "brew" > /dev/null 2>&1); then
3    echo "install HomeBrew..."
4    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" < /dev/null 2> /dev/null ; brew install caskroom/cask/brew-cask 2> /dev/null
5
6else
7    echo "Homebrew is already installed"
8fi
9
10if !(type "processing-java" > /dev/null 2>&1); then
11    brew tap caskroom/cask
12    brew install brew-cask
13    echo "installing Processing via Homebrew..."
14    brew cask install -v processing
15
16    echo "Open Processing and install processing-java (from menu bar > Tools > install processing-java)"
17    echo "input path to Processing.app: "
18    read pjpath
19    echo "adding path"
20    sudo ln -s ${pjpath}/processing-java /usr/local/bin/
21else
22    pjpath=$(which processing-java)
23    echo "processing-java is already installed : ${pjpath}"
24fi
25
26echo "add path to vscode setting (tasks.json)"
27sed -i -e "s|\"command\":.*|\"command\": \"${pjpath}\",|g" .vscode/tasks.json

Then, edit the "--sketch" part of "args" in the generated/edited tasks.json, relying on visualstudio.com: Variables Reference.

.vscode/tasks.json

1"--sketch=${workspaceRoot}/${relativeFileDirname}"

This ensures that the path to the sketch folder is passed correctly.

Variable Reference

1${workspaceFolder} - the path of the folder opened in VS Code
2${workspaceFolderBasename} - the name of the folder opened in VS Code without any slashes (/)
3${file} - the current opened file
4${relativeFile} - the current opened file relative to workspaceFolder
5${relativeFileDirname} - the current opened file's dirname relative to workspaceFolder
6${fileBasename} - the current opened file's basename
7${fileBasenameNoExtension} - the current opened file's basename with no file extension
8${fileDirname} - the current opened file's dirname
9${fileExtname} - the current opened file's extension
10${cwd} - the task runner's current working directory on startup
11${lineNumber} - the current selected line number in the active file
12${selectedText} - the current selected text in the active file
13${execPath} - the path to the running VS Code executable

With this, you can run it with Command + Shift + B even if it's not a .pde directly under the project folder. I'm happy.

Here, it might be good to try git submodule add git@github.com:cocopon/zero-pde.git and try out Programming and Visual Arts learned from scratch with Processing.