These instructions show how to use Visual Studio Code with the P5 Server extension. The older instructions show how to use Visual Studio Code with the Live Server extension and a starter project on GitHub.
A. Download 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 the P5 Server extension
- 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
In Visual Studio Code, open (or create) a new folder. Click on the P5 icon (the star) in the action strip on the left. Click New Sketch, and choose a name for your sketch.D. Run the sketch in Chrome (or Safari or Edge).
C. Run the sketch
Open your sketch, so that its source code is showing in an editor pane. Click the globe icon in the upper right corner of the editor window.
This runs the sketch in a new pane to the right of the editor pane.
Click on the P5 icon in the action bar to hide the Sketch Explorer pane. This gives more room for your code and sketch.
D. Run the sketch in Chrome (or Safari or Edge)
For more advanced development, or in order to use the webcam, you will need to run your sketch in a browser instead of inside visual Studio Code.
If you have a sketch running in Visual Studio Code, you can click the Open in Browser button to run it in your default browser.
To make the P5 Server extension always open sketches in a separate browser: open the Visual Studio Code preferences, search for “P5 Server”, and change the Browser setting to “chrome”, “safari”, or “edge”.
1. Chrome (or your preferred browser) should open a tab that displays the sketch. (The current sketch is blank.)
F. 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.