p5.js Template PET

Other languages (wiki): [ ja ]

Template project for creating p5.js sketches using the following tools:

• Code editor: Visual Studio Code
• Other tools: Prettier, ESLint and TypeScript.

See also other templates.

Usage

1. Install the two below if not yet installed:

   • Visual Studio Code
   • Node.js

2. Create your project folder by copying this template, then open it with VS Code.

3. Run the command-line below, which will install several dependencies:

   npm install

4. Install the VS Code extensions:

   • ESLint (from CLI: code --install-extension dbaeumer.vscode-eslint)
   • Prettier - Code formatter
     (from CLI: code --install-extension esbenp.prettier-vscode)

   Now ESLint and Prettier works automatically every time you save your code.

5. Feel free to edit src/script.ts.

6. Run the command-line below to build dist/script.js:

   npm run build

7. Open dist/index.html to see the result.

Dependencies (npm)

Important ones

• Prettier
• ESLint
• TypeScript

Type definitions

• @types/p5

For ESLint

• eslint-config-prettier
• @typescript-eslint/parser
• @typescript-eslint/eslint-plugin
• @fal-works/eslint-config-p5js