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

**URL:** <https://discourse.processing.org/t/anybody-here-use-a-linter-for-coding-in-p5-js/20853>\
**Category:** Development\
**Created:** [May 14, 2020, 4:59am UTC](https://discourse.processing.org/t/anybody-here-use-a-linter-for-coding-in-p5-js/20853 "2020-05-14T04:59:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [May 14, 2020, 4:59am UTC](https://discourse.processing.org/t/anybody-here-use-a-linter-for-coding-in-p5-js/20853/1 "2020-05-14T04:59:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 14, 2020, 2:11pm UTC](https://discourse.processing.org/t/anybody-here-use-a-linter-for-coding-in-p5-js/20853/2 "2020-05-14T14:11:58Z")

</div>

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?

> **[yangsu/eslint-config-p5js](https://github.com/yangsu/eslint-config-p5js)**
>
> ESLint config for p5.js. Contribute to yangsu/eslint-config-p5js development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [May 14, 2020, 3:58pm UTC](https://discourse.processing.org/t/anybody-here-use-a-linter-for-coding-in-p5-js/20853/3 "2020-05-14T15:58:15Z")

</div>

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](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/](https://www.youtube.com/redirect?redir_token=Iwlvba_0kmH34WN3i-x6nNIXa_h8MTU4OTU1ODE1MkAxNTg5NDcxNzUy&event=comments&q=https%3A%2F%2Fprettier.io%2F&stzid=UgxtipSNuPwZWOEpzRN4AaABAg) in the comments of that video. Will check that out as well.

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

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 14, 2020, 5:04pm UTC](https://discourse.processing.org/t/anybody-here-use-a-linter-for-coding-in-p5-js/20853/4 "2020-05-14T17:04:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [May 14, 2020, 5:13pm UTC](https://discourse.processing.org/t/anybody-here-use-a-linter-for-coding-in-p5-js/20853/5 "2020-05-14T17:13:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 14, 2020, 5:39pm UTC](https://discourse.processing.org/t/anybody-here-use-a-linter-for-coding-in-p5-js/20853/6 "2020-05-14T17:39:17Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 14, 2020, 8:44pm UTC](https://discourse.processing.org/t/anybody-here-use-a-linter-for-coding-in-p5-js/20853/7 "2020-05-14T20:44:14Z")

</div>

> [@Bassam](#):
>
> ESLint only found 3 errors. 1 missing semi-colon, 2 unused variables.

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:

[![](https://img.youtube.com/vi/Qlr-FGbhKaI/hqdefault.jpg "Semicolons cannot save you! - FunFunFunction #9") ](https://www.youtube.com/watch?v=Qlr-FGbhKaI)

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:

> **[TS Playground - An online editor for exploring TypeScript and JavaScript](https://www.typescriptlang.org/play/)**
>
> The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

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

> **[GitHub - p5-types/p5.ts](https://github.com/p5-types/p5.ts)**
>
> Contribute to p5-types/p5.ts development by creating an account on GitHub.

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

> <https://github.com/GoSubRoutine/Ball-in-the-Chamber/blob/master/p5js_global/sketch.ts>

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [May 15, 2020, 1:12am UTC](https://discourse.processing.org/t/anybody-here-use-a-linter-for-coding-in-p5-js/20853/8 "2020-05-15T01:12:40Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [May 19, 2020, 2:46am UTC](https://discourse.processing.org/t/anybody-here-use-a-linter-for-coding-in-p5-js/20853/9 "2020-05-19T02:46:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 19, 2020, 3:19am UTC](https://discourse.processing.org/t/anybody-here-use-a-linter-for-coding-in-p5-js/20853/10 "2020-05-19T03:19:01Z")

</div>

> [@Bassam](#):
>
> … and just have it run without the user having to install any extras.

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:

> <https://github.com/GoSubRoutine/Ball-in-the-Chamber/blob/master/p5js_global/sketch.js>

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