felipecustodio / p5-starter

:herb: Boilerplate for p5.js projects, including VSCode Intellisense and linting for HTML, CSS and JS.

Installation and Usage

This repository is a template, which you can use to quickstart your own new projects. It comes with a pre-configured environment for VS Code, with suggested extensions and configurations.

GitHub - Creating a repository from a template

.
├── index.html
├── jsconfig.json
├── node_modules
├── package.json
├── sketch.js
└── style.css

Visual Studio Code Workflow

Included is a .vscode/extensions.json file, which recommends a workspace inside Visual Studio Code with the following extensions:

• LiveServer
• p5.js snippets
• eslint
• htmlhint

To view your sketch, start the Live Server on VS Code. It defaults to http://127.0.0.1:5500/. It supportes live reload, so you can edit the sketch and see the changes in near realtime, like the p5 online editor.

Intellisense

Intellisense is provided via p5.js TypeScript definition files.

Solution found on issue #1339.

Instead of downloading the TypeScript definitions, we can now use this NPM package: @types/p5.

ESLint rules

There are some disabled rules on .eslintrc.json, but they're entirely personal choices.

p5-starter's Issues

Issue with Firefox Canvas

In Firefox, with privacy-oriented settings and extensions, the following happens:

Uncaught (in promise) TypeError: canvas.parent is not a function
    setup https://felipecustodio.github.io/p5-starter/sketch.js:26
    _setup https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js:51363
    _start https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js:51286
    p5 https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js:51639
    _globalInit https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js:50603
sketch.js:26:10