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.