Anybody here use a linter for coding in p5.js?

p5.js Development
1

If so, what editor do you use (atom, vscode…).

What linter do you use?

I’m having trouble telling telling ESLint to ignore undefined variables. It doesn’t realize window, height, setup() are built into p5.js.

1 Like
2

Hello @Bassam,

How did you try telling ESLint to ignore undefined variables: configuration comments or configuration files?

There’s ready to use ESLint configuration files for p5.js out there, maybe that’s a faster way forward than trying to roll your own?

2 Likes
3

So it’s funny that you tell me about eslint-config-p5js because I just learning about it 2 minutes ago in this coding train video: https://www.youtube.com/watch?v=clzTwZgMlqE . Definetly will be looking into that.

I wasn’t able to tell eslint to ignore undefined variables, so removed the ‘extends eslint’ part from the rules which are the default rules.

Also just learned about Prettier instead https://prettier.io/ in the comments of that video. Will check that out as well.

Do you use a linter for p5.js @Sven?

1 Like
4

No, I mostly write tiny one-off sketches using the p5.js Web Editor.

5

I see.

I’m just a beginner in javascript but somehow I’ve written a full experiment for a Psychology lab at my university that’s about 1200 lines of code.

ESLint only found 3 errors. 1 missing semi-colon, 2 unused variables.

It’s useful to use when you’re running into problems I guess. And maybe as a final check before deployment.

6

Linters are fantastic tools to have in one’s toolbelt. You’re totally right for using it in your project. For my use case, hashing out an idea and then throw it away 10 minutes later, it doesn’t make much sense. I would spend more time keeping the linter happy than actually exploring the idea. :slight_smile:

I’d like to revise my original answer, though. It should have been, “No, I’m not using an external linter, but I do use whatever linter comes with the p5.js Web Editor.”

7

Those would be merely warnings not errors, given neither of them would harm the code execution at all.

Actually, there are many JS coders out there who don’t use semicolons as their coding style.

Instead they rely on JS’ Automatic Semicolon Insertion (ASI) feature:

But if you’re serious about linting, you’re better off coding in TypeScript instead, which goes beyond JS linters and can catch datatype errors as well:

We can find instructions for p5js types on this repo below:

And here’s my own little sketch using TypeScript + p5.ts:

2 Likes
8

I heard about Typescript recently actually and will eventually look more heavily into it.

From what I read in the link above it’s Javascript that comes with a compiler, kind of…

1 Like
9

So TypeScript seems like it’s my kinda JS. I like the ‘strictness’ of it.

I’m just thinking about how I would go about ‘converting’ my p5.js sketch into typescript and just have it run without the user having to install any extras. If that makes sense at all.

10

Well, TS needs to be transpiled to JS before running anyways.

You can always distribute its JS output, which is not very diff. from the original TS file:

Alternatively you can host your TS sketches on CodePen.io, which offers pre-processors for many transpiled languages, including TS:
Blog.CodePen.io/2015/05/20/now-supporting-typescript/
Blog.CodePen.io/documentation/file-processing-projects/

1 Like