fal-works/p5js-template-petr

Template project for p5.js sketches using VSCode, ESLint, Prettier, TypeScript and Rollup.

p5.js Template PETR

Other languages (wiki): [ ja ]

About

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

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

See also other templates.

Usage

Prepare your environment

In general, the below only need to be done once.

1. Install the software as follows:

   • Visual Studio Code (VS Code in short)
   • Node.js

2. Install the VS Code extensions as follows:

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

Prepare to create your sketch

Do the below each time you start to create a new sketch using this template.

1. Create your sketch folder by copying this template.

2. Open your sketch folder with VS Code.
   Then run the following command-line, which installs several package dependencies:

   npm install

3. Enable the VS Code extensions for Prettier and ESLint (see above), if disabled.

Now Prettier and ESLint work automatically each time you edit/save your code.
If they seem to be not working, reload window of VS Code.

Create/edit your sketch

1. Edit code in src directory.

   • If you rename main.ts, you should reflected that in rollup.config.js as well.
   • Feel free to change anything else.

2. Run the following command-line:

   npm run build

   This will first generate *.js files (transpiled from *.ts files) in tsc-out directory, then bundle them and save as dist/script.js.

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

Dependencies (npm)

Important ones

• Prettier
• ESLint
• TypeScript
• Rollup

Type definitions

• @types/p5

For ESLint

• eslint-config-prettier
• @typescript-eslint/parser
• @typescript-eslint/eslint-plugin