Setting up your tools

The tools you need

You need only a few tools to start writing JavaScript. The earlier lessons explained what JavaScript is, where it came from, and what runs it. In this lesson, you set up those tools on your own computer.

Each tool has one main job:

• The editor is an app where you write code and save it in files.
• The browser console is a place inside the browser where you type a line of code and see the result at once.
• The terminal is a window where you type commands for your computer.
• Node.js is a program that runs JavaScript files outside the browser. You start it from the terminal.
• An online playground is a website where you write and run code without installing anything.

A code editor is an app for writing code. It is like a text editor, but it understands code. For example, it colors the code and marks many typos. Visual Studio Code (VS Code for short) is a popular free editor. Most other editors look much the same: files on the left, code in the middle, and buttons and status around the edges.

Install VS Code from its official website. Open a folder for your practice files. Then create a file named hello.js. Save often. Node.js can run only a saved file. Text that you typed but did not save is only a draft.

Three shortcuts are worth learning on day one:

• The Command Palette is a search box for every VS Code action. Press Cmd+Shift+P on Mac or Ctrl+Shift+P on Windows/Linux, then type what you want to do.
• Quick Open (Cmd/Ctrl+P) jumps to a file by its name.
• Ctrl+` shows or hides the terminal inside VS Code. The ` key is the backtick, left of 1 on US keyboards. It is the same kind of terminal that you can open from your computer.

DevTools are tools built into your browser for people who make web pages. One of them is the console. It is the fastest place to ask, "What does this line of code do?" You already used it for 2 + 2 in Why JavaScript?. These habits make it more useful:

• Enter runs what you typed.
• Shift+Enter starts a new line without running anything. Use it to write a small program of several lines.
• The up arrow brings back the commands you typed before.
• The clear button or console.clear() empties the console.
• Errors show in red. They often name the file and the line number.
• $_ gives you the last result. It works only in Chrome and Edge, so don't use it in code you save.

const drink = "tea";
console.log("I made " + drink);

A variable is a name that holds a value, so later lines can use it. console.log() prints whatever you put between its round brackets.

• Line 1 stores "tea" in a variable called drink.
• Line 2 joins the text "I made " with that value. The console prints I made tea.

Try a quick test like this before you put the same idea in a saved file.

const teaPrice = 3;
const snackPrice = 2;
console.log(teaPrice + snackPrice);

Line 1 stores the tea price, 3. Line 2 stores the snack price, 2. Line 3 adds the two numbers and prints 5. The console can check a small sum like this before you use it on a shop's checkout page.

const drink = "tea";
console.log(drink.toUpperCase());

Line 1 stores "tea". On line 2, toUpperCase() makes a copy of the text in capital letters, so the console prints TEA. Now change line 1 to "coffee" and run it again. It prints COFFEE. Change one small thing, then run again: this is a good way to test an idea.

1const tool = "console";2const note = "Use Shift+Enter for a new line";3console.log(tool + ": " + note);

console: Use Shift+Enter for a new line

Node.js lets you run JavaScript from the terminal. You met it in the Engines, runtimes & hosts lesson. It joins two parts:

• the V8 engine, which runs JavaScript, and
• extra tools from Node.js, such as reading and writing files.

For this course, install the LTS version. LTS means "Long-Term Support". It is the stable version that gets fixes for a long time. Most learners and teams should choose it.

1. Download Node.js LTS from the official Node.js website.
2. Run the installer. If it asks about PATH, keep the default choice. PATH is the list of folders where your computer looks for commands.
3. Close the terminal and open it again, so it can find the new node command.
4. Type node --version and press Enter. Then type npm --version and press Enter.

1$ node --version2v22.0.0   # example: your LTS version may differ3$ npm --version410.0.0    # example: yours may differ5$ node hello.js6Opening hello.js7Hello, Mina!8Ready for the next lesson.

Your version numbers will be different from the example. That is fine. What matters is that both commands print a version, not an error. npm comes with Node.js. It installs packages, which are code that other people wrote and shared, and it runs project scripts. You will use it in later lessons.

const tool = "Node";
console.log(tool + " can run this saved file.");

Save this code as check-node.js. Open a terminal in the same folder and run node check-node.js.

• Line 1 stores the text "Node" in tool.
• Line 2 joins it with more text and prints Node can run this saved file.

A tiny file like this is a good first test. If it works, you know the node command works before you try a big project.

The table lists three setup commands. Read each row as: when I type this, here is what it checks, what I should see, and what often goes wrong.

Create a file named hello.js in your practice folder. Node.js runs a file from the first line to the last. The terminal shows only two kinds of things:

• what the program prints with console.log, and
• error messages, if something goes wrong.

1const learner = "Mina";Run2console.log("Opening hello.js");3const message = "Hello, " + learner + "!";4console.log(message);5console.log("Ready for the next lesson.");

To run the same file yourself, open a terminal in the folder that holds hello.js. Type node hello.js and press Enter.

If Node.js says it cannot find the file, check the folder and the spelling of the file name. If it reports a SyntaxError, JavaScript could not read your code. Find the line number in the message, then look at that line in your editor.

const order = "tea";
console.log("Packing " + order);
console.log("Ready");

• Line 1 stores the order, "tea".
• Line 2 prints Packing tea.
• Line 3 prints Ready.

Now change "tea" to "coffee", save, and run the same command again. The terminal now prints Packing coffee. That new line shows that Node.js read the file you just saved.

console.log(typeof document);

Two new words in this line:

• document is the browser's tool for working with the web page.
• typeof tells you what kind of value something is. If the name does not exist, it gives "undefined" instead of an error.

Save this line in a file and run it with Node.js. It prints undefined. Node.js has no web page, so it has no document. Paste the same line into the console of a normal web page, and it prints object.

This difference is normal. It shows which program gives you which tools. It does not mean Node.js is installed wrong.

Sometimes you don't need to install anything. Online playgrounds, such as CodePen, JSFiddle, and StackBlitz, are websites where you write and run code in the browser. They are good for:

• sharing a small example with someone through a link,
• testing a tiny idea on a computer that isn't yours, and
• following a lesson before you have installed your tools.

A playground is run by another company. Never put these into one:

• passwords, keys, or other secrets,
• private code from your job, or
• anything you are not allowed to share.

A playground also can't replace files on your own computer. Real projects need folders, installed packages, terminal commands, and version control (a tool that saves the history of your changes).

const learner = "Asha";
console.log("Shared with " + learner);

Line 1 stores a made-up name, "Asha". Line 2 prints Shared with Asha. Small, harmless examples like this are what playgrounds are good for. Use real private data only in tools your team has approved.

You rarely write a whole program in one go. Instead, you repeat a short loop. Make one small change in the editor. Save the file. Run it. Read the first useful line in the terminal. Then make the next small change. Small steps keep mistakes small, so they are easy to find.

The command node hello.js has two parts:

• node is the program to start.
• hello.js is the file you give to that program.

The space between them keeps the two parts apart. A terminal command is not JavaScript. It is an instruction for your computer, and you type it in the terminal.

Saving and running are two separate steps. Save after each small edit, so the file on your disk matches the code on your screen. Node.js reads the saved file, not the unsaved text in your editor. If the terminal prints an old message, save the file. Then run node hello.js again before you look for a harder bug.

Read the output from top to bottom, the same way you read the file. Sometimes the command works but prints the wrong greeting. That can mean you changed a different file, or ran the command in a different folder. So check the file name and the folder before you change your JavaScript.

1const file = "hello.js";Run2const command = "node " + file;3console.log(command);4console.log("Hello from " + file);5console.log("Read the result, then edit, save, and run again.");

When a run fails, don't change five things at once. Go in this order:

1. Check that you saved the file.
2. Check the file name and the folder the terminal is in.
3. Read the first error and its line number.
4. Fix one thing, save, and run the same command again.

Each tool fits some jobs better than others. Sort each task into the place where you would usually do it. It's fine to move between tools: a quick test in the console often becomes a saved file later.

Where you will use this

A normal routine for a beginner looks like this:

1. Open your course folder in VS Code.
2. Create or edit a file, such as hello.js.
3. Save the file.
4. Open the terminal in that same folder.
5. Run node hello.js.
6. Read the output or the errors. Then edit, save, and run again.

const todo = "Save the file";
console.log("Next: " + todo);

Line 1 stores the next task in todo. Line 2 prints Next: Save the file. Later, a real to-do page will show this text on the page. For now, a saved Node.js file is a simple place to check the value and the message first.

You will still use the browser console every day. Use it to test one line, to read an error on a page, or to try a three-line idea with Shift+Enter. Use an online playground when you need a link that someone else can open right away.

• “VS Code runs JavaScript by itself.” VS Code only edits files. Node.js or a browser runs the code.
• “The console is only for mistakes.” It is also a place to test ideas and print messages.
• “npm and Node.js are the same thing.” Node.js runs JavaScript. npm installs packages and runs project scripts.
• “With online playgrounds, I never need tools on my computer.” Playgrounds are handy, but real projects need folders on your computer and terminal commands.
• “An error means my setup is broken.” Most errors mean a typo, the wrong folder, or a file you didn't save.

The table compares five tools. Read each row as: this tool is good for one job, and not for another.

Key takeaways

• Use an editor, such as VS Code, for code you want to keep.
• Use the browser console for quick tests and to read errors.
• Install Node.js LTS, so the node command can run JavaScript files.
• The terminal runs commands. A command is not the same as JavaScript code.
• Online playgrounds are good for quick examples you can share. Never put secrets in them.

A development environment is your editor, console, terminal, Node.js, and sharing tools. Together, they let you write and run programs.

Coming next: Hello, world! You will run your first code on a web page and from a file.