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

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

Category:Tech BlogTags:
#Processing#Visual Studio Code
Published: 2019 - 8 - 25

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.

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

install.sh

# homebrew
if !(type "brew" > /dev/null 2>&1); then
    echo "install HomeBrew..."
    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

else
    echo "Homebrew is already installed"
fi

if !(type "processing-java" > /dev/null 2>&1); then
    brew tap caskroom/cask
    brew install brew-cask
    echo "installing Processing via Homebrew..."
    brew cask install -v processing

    echo "Open Processing and install processing-java (from menu bar > Tools > install processing-java)"
    echo "input path to Processing.app: "
    read pjpath
    echo "adding path"
    sudo ln -s ${pjpath}/processing-java /usr/local/bin/
else
    pjpath=$(which processing-java)
    echo "processing-java is already installed : ${pjpath}"
fi

echo "add path to vscode setting (tasks.json)"
sed -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

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

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

Variable
Reference

${workspaceFolder} - the path of the folder opened in VS Code
${workspaceFolderBasename} - the name of the folder opened in VS Code without any slashes (/)
${file} - the current opened file
${relativeFile} - the current opened file relative to workspaceFolder
${relativeFileDirname} - the current opened file's dirname relative to workspaceFolder
${fileBasename} - the current opened file's basename
${fileBasenameNoExtension} - the current opened file's basename with no file extension
${fileDirname} - the current opened file's dirname
${fileExtname} - the current opened file's extension
${cwd} - the task runner's current working directory on startup
${lineNumber} - the current selected line number in the active file
${selectedText} - the current selected text in the active file
${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 [email protected]:cocopon/zero-pde.git and try out Programming and Visual Arts learned from scratch with Processing.

Read more articles