Configuring Visual Studio Code for p5.js Development (Live Server and GitHub)
Configuring Visual Studio Code for p5.js Development (Live Server and GitHub)

Configuring Visual Studio Code for p5.js Development (Live Server and GitHub)

These instructions show how to use Visual Studio Code with the Live Server extension, and a starter project on GitHub.

The newer, simpler instructions use my P5 Server extension.

These instructions are also available, with additional screen shots, as a Google Slide presentation.

A. Configure Visual Studio Code

  1. Install Visual Studio Code. If you do not already have Visual Studio Code installed, download it
  2. Launch Visual Studio Code
  3. Enable Auto Save
    4. Verify that
    Verify that File > Auto Save is enabled
  4. Install Live Server
    5. ① Open the Extensions panel. ② Search for the “Live Server” extension. ③ Click “Install”.
    ① Open the Extensions panel. ② Search for the “Live Server” extension. ③ Click “Install”.
  5. Configure additional settings. The instructions in the accompanying slide presentation specify how to configure Visual Studio Code to format code whenever you save it, and to disable some of the more annoying autocomplete suggestions.

B. Create a sketch

  1. Download and install GitHub Desktop
  2. Visit https://github.com/osteele/p5-template
  3. Click on “Code”
  4. Click “Open with GitHub Desktop”
  5. In GitHub Desktop, select a location on your file system to place the project folder.
  6. In GitHub Desktop, click Open in Visual Studio Code

C. Run the sketch in a browser

In Visual Studio Code, click the Go Live button on the lower right corner of the window. (If this is not present, perhaps you did not install the Live Server extension. Or perhaps you do not have a JavaScript project open in Visual Studio Code.)

image

This opens the code in Chrome (or your default browser).

D. Configure Chrome

1. Chrome (or your preferred browser) should open a tab that displays the sketch. (The current sketch is blank.)

image

2. Follow these instructions to display the JavaScript Console. In Chrome: Open the JavaScript Console: View > Developer Tools > JavaScript Console. Or, press Command+Option+J (Mac) or Control+Shift+J (Windows).

image

E. Arrange your windows

1. If your screen is big enough, you can configure your desktop so that you can see your source code (in Visual Studio Code) and the drawing (in Chrome) at the same time.

image

2. In order to make more space for your editor in Visual Studio Code, you can click the top (Explorer) icon to hide the Explorer side bar.

image

F. Using Libraries

p5.Sound

In order to use the p5.Sound library, open the index.html file and un-comment this line:

<!-- <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/addons/p5.sound.min.js" crossorigin="anonymous"></script> -->

So that it looks like this:

<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/addons/p5.sound.min.js" crossorigin="anonymous"></script>

ml5.js

In index.html, un-comment this line:

<!-- <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script> -->