P5.js in IntelliJ IDEA?

Question

I started learning p5.js some days ago, and now I wanted to use IntelliJ IDEA instead of the p5.js online editor . Most things like the setup() , draw() and ellipse() functions work as expected, but the createCanvas() function doesn't - it is underlined green and the error message says "Unresolved function or method createCanvas()".

I tried using VSCode, and there it worked perfectly, but I prefer to use IntelliJ, and so I wanted to know if and if yes how I can get it to work in IntelliJ.

<script src="p5.js"></script> //p5.js is the file with all the code from the official p5js.org homepage.
<script src="sketch.js"></script> //sketch.js is the file where my code that should be executed is located

function setup() { //The setup() function is recognized as expected,
    createCanvas(1000, 1000); //But the createCanvas() function isn't.
}

Answer 1

p5 functions are defined as p5.prototype.<function name> = function(){} , so the IDE expects a namespace here... As a workaround, please try installing p5 typings: in Preferences | Languages & Frameworks | JavaScript | Libraries , press Downloads... , select p5 from the list. This should solve the problem

Answer 2

I used to mimic the p5js online editor in IntelliJ IDEA by using the Live Edit plugin in combination with split screening Chrome and IntelliJ. The plugin will automatically update your HTML/JS in the Chrome window, st you can instantly see the effects of your changes to your p5js code. It will only work when you run your HTML/JS file in debug mode.

Here's an example: