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.

Updated to use p5.js 2.0.4 - This starter kit now uses the latest p5.js 2.0 for enhanced performance and new features.

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.