@fal-works/eslint-config-p5js

ESLint config for p5.js global mode. Supports TypeScript as well.

Usage no npm install needed!

<script type="module">
  import falWorksEslintConfigP5js from 'https://cdn.skypack.dev/@fal-works/eslint-config-p5js';
</script>

README

@fal-works/eslint-config-p5js

ESLint config for p5.js. Supports TypeScript as well.

This config is intended for p5.js global mode.
On instance mode, just adding p5 as a global variable should be enough.

Install

npm install --save-dev @fal-works/eslint-config-p5js

yarn add --dev @fal-works/eslint-config-p5js

pnpm add --save-dev @fal-works/eslint-config-p5js

Usage

Basic config

Add the config name @fal-works/p5js to the extends list in your eslintrc.

This will add some globals and also overwrite the no-unused-vars rule.
So this should come after other extensions which also include no-unused-vars.

{
  "extends": [
    "eslint:recommended",
    "@fal-works/p5js"
  ]
}

With p5.sound

If you use p5.sound, add the config name @fal-works/p5js/sound as well.

This will add globals that are specific to p5.sound.

{
  "extends": [
    "eslint:recommended",
    "@fal-works/p5js",
    "@fal-works/p5js/sound",
  ]
}

With TypeScript

If you use TypeScript (and the @typescript-eslint plugin), use the config name @fal-works/p5js/@typescript-eslint instead.

This will:

  • turn off the default no-unused-vars rule (just like @typescript-eslint does).
  • overwrite the @typescript-eslint/no-unused-vars rule for p5.js.

So this should come after other extensions which also include @typescript-eslint/no-unused-vars.

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "@fal-works/p5js/@typescript-eslint",
  ]
}

This config does not add globals, nor does it need to; they should be managed by @types/p5, the type declaration for p5.js.
However, the type declaration may not be always up to date; sometimes you might have to escape some variables (that are not properly declared) with any, or provide additional type declaration yourself.

If using TypeScript, you can easily do a workaround instead of using this config. You can avoid no-unused-vars errors by simply exposing some functions to the global scope, like:

Object.assign(window, { setup, draw });

...so that they are not left unused. And you'll have to do this anyway if you use a module bundler.

Other

Similar libraries: