Coding · ·

Setting up your development environment

We're going to set up a few things so you have a neat development environment on your computer with a good CLI (command line interface). You will need administrator access to your computer for some parts of this. Make sure you follow the correct sections/lines for the OS you're on, whether Windows, Linux, macOS or WSL.

Windows-only: get the latest PowerShell

Windows comes with PowerShell 5, but PowerShell 7+ includes useful features like completion suggestions to make working on the CLI better. Here's how to upgrade:

open the 'Terminal' app
run $PSVersionTable.PSVersion (skip to the next section if it reports version 7+ already)
run winget search Microsoft.PowerShell to see the latest PowerShell version
run winget install --id Microsoft.PowerShell --source winget to update to the latest stable version
allow the installation to run
restart the Terminal app
you'll know you're in the latest version as it'll say something like 'PowerShell 7.5.2' at the top
if it's still using the old version, you'll need to set the new version as the default profile:
- go to 'Settings' in the Terminal app (from the down arrow next to the new tab button at the top)
- select 'PowerShell' instead of 'Windows PowerShell'
- restart Terminal and it should now say eg 'PowerShell 7.5.2' if it worked

Getting familiar with the command line

Open the 'Terminal' app on your OS.

When opened, you'll see a black window, which is called a terminal or command line interface (CLI).

You can run commands and programs from the command line by typing them and pressing enter. Some commands are slightly different depending on your OS. Here are some to try out now (they should work on all OSes):

ls will show you files in the current folder (which might be empty)
pwd shows you the full path to the folder you're currently in
mkdir blah will make a new folder called 'blah'
cd blah will take you into the folder you just made called 'blah'
touch hello.txt will make a new file called 'hello.txt'
- Windows users need to ni hello.txt instead
echo 'hello world' > hello.txt will put the text 'hello world' into that file
cat hello.txt will show you the contents of 'hello.txt'
clear clears the screen
date shows you the date
curl https://news.ycombinator.com/ -o page.html gets the contents of a web page and outputs it into a local file (read it with cat page.html or open it in a browser)
cd .. takes you up a folder level

Some tricks and tips to save you a lot of time when you're on the command line:

press the up and down arrows to scroll through recent commands
escape programs by using q or CTRL+C, depending on the program
paste from the clipboard with the right mouse button
copy to the clipboard by highlighting text then pressing enter
start typing something then press tab twice to see files/programs that begin with those letters

Optional extension: search the web for eg 'Linux commands' or 'PowerShell commands' to find some more commands to try out.

VSCode

We'll be using VSCode as our code editor and integrated development environment (IDE) (well, technically it's not quite an IDE but a 'code editor' instead).

Install VSCode

2 spaces indentation

A classic dilemma for programmers: should you use 2 spaces, 4 spaces or tabs to indent? Countless hours and sleepless nights have been lost to this classic bike-shedding problem. But I'll solve it for you - you'll use 2 spaces, because that's what I use, because reasons. End of.

Set up VSCode to respect this decision:

open settings CTRL+, (or CMD+, on macOS)
search for 'tab size'
- put the number '2' in there
search for 'insert spaces'
- ensure it's ticked
close the settings window

Getting a folder ready for all your code

When you're writing code, it's easier if everyone is using the same folder name - a folder called 'code' in your home folder.

open a terminal within VSCode from 'Terminal -> New Terminal' (or CTRL+')
you should be in your 'Home folder' (/home/[name] on Linux/WSL/macOS or C:\Users\[name] on Windows) in the terminal
make a new folder called 'code' with mkdir code
go into that folder with cd code
try some of the other commands you were learning earlier, and they should all still work the same

Bun JavaScript runtime

JavaScript was originally made for running in web pages, but can now be used on the command line (CLI) as well. Today we'll be using it on the CLI, then will use it for websites in a few weeks. There are 3 main CLI options for running JavaScript: Node.js, Deno and Bun. We use Bun.

Install Bun by opening a terminal within VSCode and running:

Linux, macOS and WSL:

Linux and WSL: first install the 'unzip' dependency with sudo apt install unzip (macOS already has this installed)
Linux, WSL and macOS: curl -fsSL https://bun.sh/install | bash

Windows PowerShell:

powershell -c "irm bun.sh/install.ps1 | iex"

... when installed, close VSCode completely, then reopen it.

Check it is working by running bun, which should show you some usage information. Find what version you're running with bun --version.

Try some JavaScript using Bun's REPL (read-eval-print loop) with bun repl (remember you can exit any time with CTRL+C). If it asks something about a firewall, click to allow. Here are some things to try from within the REPL:

3 + 4
4 * 5
let x = 4 ** 5 makes a variable called 'x' holding the result of 4 to the power of 5
x + 1
.help will show you REPL usage info
for (let i = 0; i < 5; i++) console.log(i) will run a loop
'hello' shows the string 'hello'
let place = 'world' makes a variable called 'place' with the string 'world' in it
`Hello ${place}` outputs 'Hello world', though make sure you're using backticks (left of the '1' key on the keyboard)

Remember to exit with CTRL+C.

You can also run any of the above with simply bun -p '3 + 4' etc. The -p flag is short for 'print'.

Creating your first JavaScript program

First, macOS users need to add a handy alias first so they can type code [filename] to edit a file in VSCode:

in VSCode, CTRL+SHIFT+P
in the search that appears, "Shell Command: Install 'code' command in PATH" and select it
resource your profile with source ~/.zshrc

From inside a terminal within VSCode (all users now):

mkdir -p ~/code/hello-world to make a sub-folder called 'hello-world' in a folder called 'code' in your home folder, which is aliased as '~'
cd ~/code/hello-world to go into the folder you just made
code hello.js will open a new file in this folder called 'hello.js' in the text editor

You should now have a new file called 'hello.js' open in VSCode. Add console.log('Hello world') to the file, then save it.

Jump back into the terminal and run bun hello.js to run your JavaScript file.

That's the end of this guide. Next up, you'll be learning about JavaScript!