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

    Verify that File > Auto Save is enabled

    Verify that File > Auto Save is enabled

  4. Install Live Server

    ① 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.)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d3447211-c261-47d9-8bc8-e9a160d961b4/Untitled.png

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

D. Configure Chrome