https://github.com/felipecustodio/p5-starter

:herb: Boilerplate for p5.js projects, including VSCode Intellisense and linting for HTML, CSS and JS.
https://github.com/felipecustodio/p5-starter

boilerplate p5 p5js starter-kit starter-template

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/felipecustodio/p5-starter
• Owner: felipecustodio
• License: mit
• Created: 2018-12-29T08:28:29.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2021-04-15T17:46:52.000Z (almost 4 years ago)
• Last Synced: 2024-08-02T13:33:25.615Z (6 months ago)
• Topics: boilerplate, p5, p5js, starter-kit, starter-template
• Language: JavaScript
• Homepage: https://felipecustodio.github.io/p5-starter/
• Size: 2.07 MB
• Stars: 18
• Watchers: 4
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



# 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](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template)

```bash

.

├── 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](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

* [p5.js snippets](https://marketplace.visualstudio.com/items?itemName=acidic9.p5js-snippets)

* [eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

* [htmlhint](https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint)

To view your sketch, start the Live Server on VS Code. It defaults to [http://127.0.0.1:5500/](http://127.0.0.1:5500/ "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](https://github.com/processing/p5.js/issues/1339 "#1339").

Instead of downloading the TypeScript definitions, we can now use this NPM package: [@types/p5](https://www.npmjs.com/package/@types/p5).

# ESLint rules

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