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

  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 the P5 Server extension

    ① Open the Extensions panel. ② Search for the “P5 Server” extension. ③ Click “Install”.

    ① Open the Extensions panel. ② Search for the “P5 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

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

1. In Visual Studio Code, open a folder from your disk. This is the folder where you will keep your sketch (or sketches). You can create a new folder for this. I have one called “Sketches”, where I keep a collection of small sketches. Larger projects might get their own folder. (You can move files between folders later.)

  1. In Visual Studio Code, open a folder from your disk. This is the folder where you will keep your sketch (or sketches). You can create a new folder for this. I have one called “Sketches”, where I keep a collection of small sketches. Larger projects might get their own folder. (You can move files between folders later.)

2. Once you have opened a folder, click on the P5 icon (the star) in the action bar on the left. This opens up a list of sketches in the folder. (There might be more than one file per sketch, such as when a sketch includes both an HTML file and a JavaScript file, or loads some images or audio resources.) With a new folder, there aren't any.

  1. Once you have opened a folder, click on the P5 icon (the star) in the action bar on the left. This opens up a list of sketches in the folder. (There might be more than one file per sketch, such as when a sketch includes both an HTML file and a JavaScript file, or loads some images or audio resources.) With a new folder, there aren't any.

3. Click Create p5.js Sketch File. (You can also click the + icon at the top of the pane.)

  1. Click Create p5.js Sketch File. (You can also click the + icon at the top of the pane.)

4. Pick a name for your sketch. You don't have to be very imaginative — you can rename it later. I often name my sketches something like “my sketch”, “sketch 1”, “Thursday”, or “circles”. The ones that I don't throw away, it often becomes clear what they should be called after I work on them for a while. (Remember this principle. It is often true of variable names and function names too, if you are working in an editor such as Visual Studio code that allows you to rename these easily.)

  1. Pick a name for your sketch. You don't have to be very imaginative — you can rename it later. I often name my sketches something like “my sketch”, “sketch 1”, “Thursday”, or “circles”. The ones that I don't throw away, it often becomes clear what they should be called after I work on them for a while. (Remember this principle. It is often true of variable names and function names too, if you are working in an editor such as Visual Studio code that allows you to rename these easily.)

5. Now the left pane (the P5 Sketch Explorer) has been updated with a list of sketches in the folder, and the right pane shows the sketch that you created.

  1. Now the left pane (the P5 Sketch Explorer) has been updated with a list of sketches in the folder, and the right pane shows the sketch that you created.

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.

two-panes.png

This runs the sketch in a new pane to the right of the editor pane.

Untitled

Click on the P5 icon in the action bar to hide the Sketch Explorer pane. This gives more room for your code and sketch.

Untitled

D. Run the sketch in Chrome (or Safari or Edge)