Visual Studio Code for processing and p5

cameyo

How to use Visual Studio code with processing and p5:
1. Install VScode.
2. Install the vscode extension: processing-vscode.
3. Use following tasks.json file (put it inside .vscode folder of your project): tasks
(change the parameters inside the file to point at your processing and p5 folders)
4. Add the following keyboard shortcut:
{ "key": "ctrl+F12", "command": "workbench.action.tasks.runTask" }

Now you can press:
Ctrl+Shift+B --> Run processing sketch
Ctrl+F12 --> Run processing sketch OR Open processing reference OR Run p5 script OR Open p5 reference

Happy coding :)

jeremydouglass

Thanks for the tip, @cameyo.

In case the linked file goes away, here is the above tasks.json file in its entirety:

// Tasks for processing and p5
// only for Windows
{
    "version": "0.1.0",
    "command": "cmd", 
    "isShellCommand": true,
    "showOutput": "always",
    "args": ["/C"],
    "tasks": 
    [
        {
        "taskName": "1. Run processing sketch",
        "suppressTaskName": true,
        "isBuildCommand": true,
        "args": 
            [
            "processing-java",
            "--force",
            "--sketch=${workspaceRoot}",
            "--output=${workspaceRoot}\\out",
            "--run"
            ]
        },
        {
        "taskName": "2. Open Processing reference",
        "suppressTaskName": true,
        "isBuildCommand": true,
        "args": 
            [
            "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
            "file:///C:/util/processing-3/modes/java/reference/index.html"
            //"file:///C:/util/processing-3/modes/java/reference/TM_SELECTED_TEXT.html"
            ]   
        },
        {
        "taskName": "3. Run p5 script",
        "suppressTaskName": true,
        "isBuildCommand": true,
        "args": 
            [
            "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
            "index.html"
            ]   
        },
        {
        "taskName": "4. Open p5 reference",
        "suppressTaskName": true,
        "isBuildCommand": true,
        "args": 
            [
            "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
            "file:///C:/util/p5/ref/index.html"
            ]   
        }
    ]
}

Note that this configuration is for Visual Studio for Windows (not Visual Studio for Mac).

kfrajer

Just to add, you need to click open folder instead of open file to set the proper "workspace" folder right in Visual Studio Code. Where do you add point 4. that you mention above @cameyo?

Kf

cameyo

@kfrajer: yes, you must use "Open Folder" to set the proper workspace.
Add shortcut of point 4 with the VScode menu: File-> Preferences-> Keyboard Shortcuts
@jeremydouglass: for mac you must do little changes ("command" and "args") or write a condition to check the OS (see monkeyhacks.com/post/multiple-commands-with-visual-studio-code.

kfrajer

@cameyo
Thank you for clarifying. Having the option to run task or to build using the shortcut improves the whole experience using VS Code. I like to add that the build files are no longer stored in the temporal folder but inside the sketch folder in a new folder called out. Some people might like that. It also has the option to split the which while coding which is convenient. The only con so far is the need to copy the .vscode to every single project.

Kf

milex

How to configure the json file, i do not have any experience, please help

cameyo

@milex: The only configuration of json file are the paths... they must point to your processing and p5 installation.
Now you must put the json file within .vscode folder inside your project folder.
Add shortcut of point 4 with the VScode menu: File-> Preferences-> Keyboard Shortcuts.
From VS code select File --> Open folder and select your project folder.
That's all :)

gaocegege

Really awesome and I think we could implement the highlight logic in Microsoft/language-server-protocol to support more editors with same code base :)

crashnorun

This is pretty awesome! I've highlighted the step by step process below under which I have been able to get it to work successfully for Processing.

1. Download Processing extension for VS Code
2. Open VS Code
3. Open a blank folder where the project will be saved (File -> Open Folder)
4. Create a new file (File -> New File)
5. Set file language to processing (bottom right corner of VS Code)
6. Open command line and run "Processing: Create Task File"
7. Save file (file name must match the folder name in #3 above)
8. Press CTRL + SHIFT + B to run sketch

The intellisense works well. I haven't been able to figure out how to set breakpoints and run a debugger just yet.

clankill3r

There is no support for breakpoints. I hope I have time somewhere next year to look into that. It shouldn't be that hard. In the processing IDE code you can already check how the offset is calculated (cause line numbers in processing don't correspond to the line numbers of the things that runs due to the precompiler of processing).

Guir

Is auto-format working? mine is not... =(

cameyo

Plugin update at https://github.com/TobiahZ/processing-vscode
Author:Tobiah Zarlez
Now you can open processing help from VS Code.

jeremydouglass

<:-P