Before we start writing code and creating websites, let’s set up our computers with a couple of programs that will help us work more efficiently.
In the past, it was common to have to download a bunch of different programs in order to setup a local development environment with a good text editor, a local server, version control, compilers/interpreters, emulators and FTP clients.
Nowadays, Integrated Development Environments (IDEs) allow us to work in different languages, edit, test, fix and upload our code, all within the same program.
Some popular IDEs that we can use for developing HTML/JavaScript projects are:
They are all very similar in their basic functionalities. Some are better suited for working with specific languages, or operating systems. Others are more customizable and extendable through plugins.
The one that seems to work more consistently across different operating systems, programming languages and application domains is Microsoft’s Visual Studio Code.
It’s free, easy to setup, and has many useful plugins that will help us write, maintain and share our HTML/JavaScript projects.
It can be downloaded here, and this video shows how to set it up:
Installing extensions on VS Code is easy:
The following extensions are really useful for developing HTML/JavaScript and p5.js projects:
This makes it easier for us to start a local web server so we can preview, test and fix our project before uploading it to a public server on the internet.
This plugin helps us format our code in a consistent manner, so it’s easier to read.
This gives the IDE information about p5.js functions, so it can help us with suggestions and auto-complete.