Set eslint to understand the p5.js library calls and not flag them as undefined

p5.js
1

Option 1: Use /* eslint no-undef: 0 */ at the top of your file
That will stop warnings for variables that are accessed but not defined within the same file.
Example:

/* eslint no-undef: 0 */
setup = function() {
  createCanvas(400, 400);
}
draw = function() {
  ellipse(width / 2, height / 2, 100);
}

Option 2: Define globals
Example:

/* eslint no-unused-vars: 0 */
/*   globals setup: true, draw: true, createCanvas, ellipse, width, height */
setup = function() {
  createCanvas(400, 400);
}
draw = function() {
  ellipse(width / 2, height / 2, 100);
}

Option 3: Use the globals key and define global variables in .eslintrc file for your project
Example:

{
  ... ... ... 
  "globals": {
    "setup": true,
    "draw": true,
    "createCanvas": true,
    "ellipse": true,
    "width": true,
    ... ... ... 
  }
}```

Refer to the eslint documentation about these true/false flags. Basically, they allow/disallow overwriting of the variables.

Hope, the things above will be helpful :+1:
3 Likes
2

Hi, Do you have a question regarding the library calls? or is this a suggestion?

3

Hi dan850!
No, I don’t have any questions about that. Above I’ve listed 3 possible ways how these eslint “issues” can be resolved. Probably, there are some other ways to do that. It turns out that this is very common question, so I decided to share my opinion.