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
- Install Visual Studio Code. If you do not already have Visual Studio Code installed, download it
- Launch Visual Studio Code
- Enable Auto Save
- Install Live Server
- 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
- Download and install GitHub Desktop
- Visit https://github.com/osteele/p5-template
- Click on “Code”
- Click “Open with GitHub Desktop”
- In GitHub Desktop, select a location on your file system to place the project folder.
- In GitHub Desktop, click Open in Visual Studio Code
C. Run the sketch in a browser
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.)
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.
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.
F. Using Libraries
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>
index.html, un-comment this line:
<!-- <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script> -->