2.3Lesson 2.3: A code editor: VS Code

The idea

A word processor like Word adds invisible formatting that breaks code. A code editor saves clean text and, on top of that:

• It colours the code, so it reads better.
• It completes what you type.
• It warns about errors before you run anything.
• It opens a whole folder, not a single file.

Installing VS Code

Download it from code.visualstudio.com and install it. It's free and works on Windows, macOS and Linux.

Opening the project

File → Open Folder and pick my-game, the folder from 2.2.

On the left you'll see the explorer: the folder's tree.

Creating a file

1. In the explorer, click the new file icon.
2. Call it hello.js. The extension tells VS Code it's JavaScript, which is why it colours it.
3. Type:

console.log("Hello from a file");

1. Save with Ctrl + S (on a Mac, Cmd + S).

A dot on the file's tab means it has unsaved changes.

The built-in terminal

Terminal → New Terminal opens a terminal at the bottom, already in the project folder. No need to cd there.

Try it

for (let i = 1; i <= 10; i++) {
  console.log("3 x " + i + " = " + 3 * i);
}

Summary

• Code is written in a code editor, never in a word processor.
• In VS Code you open the project folder, not a file.
• The extension decides how the file is coloured.
• The built-in terminal opens already in the project folder.