This guide will walk you through the process of setting up autocompletion and documentation for p5.js, right inside of VSCode.
In this section, we will guide you through the process of setting up autocompletion and documentation for p5.js in VSCode when using p5.js in Global Mode without a bundler.
First, create a new folder for your p5.js project. Choose a suitable location on your computer and give the folder a meaningful name.
Open your preferred terminal or command prompt and navigate to the project folder you created in the previous step. Run the following command to initialize a new Node.js project:
npm init -yThis command will create a package.json file in your project folder.
With your project initialized, you can now install the @types/p5 package, which provides TypeScript type definitions for p5.js. (Don't worry, we won't be using TypeScript to write our code! We just need the type definitions for autocompletion and documentation support.)
Run the following command in your terminal:
npm install @types/p5This will install the @types/p5 package as a development dependency in your project.
In your project folder, create a two new files: index.html and sketch.js. Add boilerplate HTML code to index.html and add a reference to sketch.js in the <body> section of your HTML file.
In order to use p5.js in Global Mode, you need to include the p5.js library in your HTML file. You can do this by adding the following <script> tag to the <head> section of your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>p5.js Project</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}Make sure to replace 1.6.0 with the desired version of p5.js.
To enable autocompletion and documentation for p5.js in your VSCode editor, you need to reference the p5 global types file in your JavaScript file. Add the following reference directive at the beginning of your JavaScript file:
/// <reference types="p5/global" />This reference directive tells VSCode to load the p5 global types and provide autocompletion and documentation support for p5.js.
Congratulations! You have successfully set up autocompletion and documentation for p5.js in Global Mode without a bundler using VSCode. You can now start coding with p5.js and enjoy the benefits of enhanced development experience.
In this section, we will guide you through the process of setting up autocompletion and documentation for p5.js in VSCode when using p5.js in Instance Mode with a bundler.
To begin, open your preferred terminal or command prompt and navigate to the directory where you want to create your p5.js project. Run the following command to create a new Vite.js project:
npx create-vite@latest project_nameReplace project_name with the desired name for your project. Choose either TypeScript (ts) or JavaScript (js) as per your preference when prompted. Select the vanilla template when asked to choose a framework.
Navigate to the project folder of your newly created Vite.js project. Run the following command to install the p5 package and @types/p5:
npm install p5 @types/p5This command installs the p5 package, which includes the p5.js library, as well as the @types/p5 package for TypeScript type definitions.
In the project folder of your Vite.js project, delete the following files:
counter.js*.svg
In the files main.js and style.css, remove all the code inside, so the file becomes empty.
Open the main.js file in your project folder and import the p5 package at the top of the file:
import p5 from "p5";
new p5((/** @type {p5} */ p) => {
// p5 setup function
p.setup = () => {
p.createCanvas(400, 400);
};
// p5 draw function
p.draw = () => {
p.background(220);
};
});This import statement allows us to use p5.js in Instance Mode.
Inside the setup and draw functions, you can write your p5.js code.
Congratulations! You have successfully set up autocompletion and documentation for p5.js in Instance Mode with Vite.js using VSCode. You can now start coding with p5.js and enjoy the benefits of enhanced development experience.