How to set ESlint to understand the p5.js library calls and not flag them as undefined.

grege2

Hi folks,

Just trying ESlint on some simple p5.js code. It spits out a long list like ...

26:3 error 'createCanvas' is not defined no-undef
29:3 error 'colorMode' is not defined no-undef
29:13 error 'HSB' is not defined no-undef
36:13 error 'random' is not defined no-undef
36:23 error 'width' is not defined no-undef
37:23 error 'height' is not defined no-undef

I see you can tell ESlint the symbols in known libraries .. examples here ..

https://eslint.org/docs/user-guide/configuring#specifying-environments

Can I specify a config file that tells ESlint the symbols (function calls like createCanvas(), globals like width) in p5.js ? and ignores them ?

Thanks, Greg E.

atoro

Few suggestions:

(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); }

(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); }

(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.

grege2

Thanks Atoro, will try all that. I did see a lot of it in the ESlint doco but it's a bit terse. GE.

grege2

Atoro, that worked ok. Many thanks.

atoro

@grege2, nice :-bd