If you've been learning p5.js, you probably have been working in the online editor or maybe using OpenProcessing. Those are great options to get started and they can even handle more complex sketches, but if you've been using p5.js for a while you may find yourself yearning for more advanced features and the ability to customise your coding environment. This is where Visual Studio Code (also known as VSCode) comes in!
Our goal with this is to make a p5.js environment that is at least as convenient as the online p5 editor without adding too much distracting visual noise. This tutorial should be useful for beginners, but if you already know your way around Visual Studio Code and have been wondering how to set it up for p5.js, it will be helpful too 🙂
The p5.js editor is very accessible and fun to use but it lacks some of the more advanced features of a modern development environment
Out of the box, Visual Studio Code can seem a bit unwieldy for beginners, and look cluttered compared to the p5.js editor. With a few simple tweaks however, you can turn VSCode into the perfect p5.js desktop environment, with the added benefits of IntelliSense and more.
This is what our environment will look like at the end of this tutorial. The left side is VSCode and the right side is Min browser. We picked Min for its minimal look but you can use any browser.
p5.js looking sleek and minimal in VSCode
Download and Install Visual Studio Code
Download and install Node.js
Open a new terminal window within Visual Studio Code
terminal → new terminal