I am trying to run Processing in VSCode. It is looking for the processing-java CLI. I cannot find it anywhere. I have seen it in very old version of Processing. Is it not part of the installation?
Hi @MSousa and thanks for your question. Which operating system are you using?
Hello,
processing-java.exe is not included with Processing 4.4.1 it seems.
Processing 4.4.3 (beta) has some new options:
This works from the W10 command-line:
D:\Program_Portable\Processing-4.4.3>processing cli --sketch=“D:\Users\GLV\Documents\P4\world_rotation” --run
I tried to get this to work with VS Code using this extension:
Processing VSCode - Visual Studio Marketplace
It does not work in VS Code:
That is as far as I got with this.
:)
1 Like
PS C:\Users\Stef-\Downloads\RotatingArcs> & "C:\Program Files\Processing\Processing.exe" cli --sketch=C:\Users\Stef-\Downloads\RotatingArcs --run 2>&1 | Out-String
Worked for me in VSCode
Cool beans! And thank you for that!
It does not work when I use the run button in VS Code and you can see this in the terminal output.
It does work if I launch it manually in the TERMINAL in VS Code:
Any thoughts on how to make this work with this extension?
Processing VSCode - Visual Studio Marketplace
And in the future this one?
Processing Language Server Extension for VSCode
Note to anyone visiting this post:
I am using Processing 4.4.3 (Beta)
:)
@glv Not sure how to make it work with the existing extensions, I could take a look at a later stage.
In the mean time, I have created a new one since there’s a lot happened with Processing under the hood to make some of it a lot easier to set up.
If you want, please give a try!
Functionality
- Language Server Support, have the IDE give you suggestions on your code.
- Easy to use, no more need to point VSCode to where Processing is installed.
- Syntax Highlighting
- Play/Stop buttons
Hello @stefterv ,
Where is it expecting it to be?
I have been installing portable versions on my D: Drive and renaming folders with the version number.
:)
1 Like
As long as you launch Processing (my custom 4.4.74) once, it’ll find it itself!
I am trying!
Processing 4.4.74 is installed on my W10 and I ran it at least once.
This is what VS Code is saying:
1 Like
Thank you for trying!
I just tried it on my Windows 10 VM both through the installer and with the portable version in the Downloads and on a second drive. I worked in all cases so not entirely sure what is going on there. I’ll add some more detailled error reporting later so we can diagnose this issue.
1 Like
Okay new version that will be a bit more verbose about errors taking place!
VS Code is now working!
In my case there some issues with my VS Code and I did a compete uninstall and reinstall and it worked. I only did this after exhausting all other efforts.
Thanks @stefterv!
:)
Note that the VS Code extension is now out of preview and officially available at https://vscode.processing.org
And you don’t need the custom build of Processing to run it anymore. It will work fine with 4.4.6 and above.
2 Likes
Also thank you everyone for testing before it left preview!
2 Likes
I was able to use this extension for keywords:
I combined this:
-
processing4/java/keywords.txt at main · processing/processing4 · GitHub
-
elements from preferences.txt
And finally modified settings.json:
settings.json < Click here to open!
{
"workbench.colorTheme": "Visual Studio Dark",
"processing.autosave": false,
"todohighlight.keywords":
[
{ "text": "ADD", "color": "#718a62", "backgroundColor": "#000000" },
{ "text": "ALIGN_CENTER", "color": "#718a62", "backgroundColor": "#000000" },
{ "text": "ALIGN_LEFT", "color": "#718a62", "backgroundColor": "#000000" },
{ "text": "ALIGN_RIGHT", "color": "#718a62", "backgroundColor": "#000000" },
{ "text": "ALPHA", "color": "#718a62", "backgroundColor": "#000000" },
{ "text": "ALPHA_MASK", "color": "#718a62", "backgroundColor": "#000000" },
{ "text": "ALT", "color": "#718a62", "backgroundColor": "#000000" },
{ "text": "AMBIENT", "color": "#718a62", "backgroundColor": "#000000" },
{ "text": "ARC", "color": "#718a62", "backgroundColor": "#000000" },
{ "text": "ARROW", "color": "#718a62", "backgroundColor": "#000000" },
{ "text": "ARGB", "color": "#718a62", "backgroundColor": "#000000" },
{ "text": "BACKSPACE", "color": "#718a62", "backgroundColor": "#000000" },
// I had to remove a lot to post this!
{ "text": "setString", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "setValues", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "sort", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "sortReverse", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "table", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "tan", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "text", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "textAlign", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "textAscent", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "textDescent", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "textLeading", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "textMode", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "textSize", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "texture", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "textureMode", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "textureWrap", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "textWidth", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "tint", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "title", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "toArray", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "toString", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "translate", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "trim", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "triangle", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "unfold", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "updatePixels", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "vertex", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "XML", "color": "#e2661a", "backgroundColor": "#000000" },
{ "text": "addChild", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "getChildren", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "getContent", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "getFloat", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "getInt", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "getName", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "getString", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "hasChildren", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "hasContent", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "hasValue", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "isRoot", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "listChildren", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "remove", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "removeChild", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "save", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "setContent", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "setFloat", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "setInt", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "setString", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "value", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "width", "color": "#006699", "backgroundColor": "#000000" },
{ "text": "year", "color": "#006699", "backgroundColor": "#000000" },
// { "text": "z", "color": "#d94a7a", "backgroundColor": "#000000" }
],
"todohighlight.include":
[
"**/*.js",
"**/*.jsx",
"**/*.ts",
"**/*.tsx",
"**/*.html",
"**/*.php",
"**/*.css",
"**/*.scss"
],
"todohighlight.defaultStyle": {
}
}
It is the default colors on a black background and not ideal.
I did use Google Gemini to create this after providing it with the files and instructions. It took a few passes to get this right but was much easier than a manual edit or writing a script to do this.
Not perfect yet:
I will look at some of the different themes and make some adjustments for personal use.
:)
That’s a really creative way to try and solve it 
For reference though, the “TODO Highlight” extension isn’t designed for syntax highlighting, it’s only meant to flag a few keywords like TODO or FIXME. That’s why you’re running into so many false positives. I would not recommend this approach.
Proper highlighting of Processing-specific keywords will need to be handled at a lower level by the language server (or the LSP proxy) that @stefterv is currently working on.
1 Like
Agreed.
It was a fun exercise and got me immersed in VS Code and the strengths and challenges of using AI for tasks.
I like to experiment!
I am looking forward to it!
And links to the references.
:)
1 Like