Write Hello World in VS Code

Introduction

This chapter creates a small JavaScript project in Visual Studio Code, writes a Hello World script, and runs it from the integrated terminal. You will practice the folder-based workflow used in real repos instead of single loose files on the desktop.

Prerequisites

Step 1: Create a Project Folder

Pick a location you can find later, for example:

text
~/projects/js-hello   (macOS/Linux)
C:\Users\You\projects\js-hello   (Windows)

In VS Code:

  1. File → Open Folder… (or Open… on macOS)
  2. Select js-hello (create the folder first in your file manager if needed)
  3. Trust the folder if VS Code asks (for local learning folders, trusting is normal)

Step 2: Add hello.js

  1. In the Explorer sidebar, click New File
  2. Name the file hello.js
  3. Add the following code:
javascript
// Declare a constant string for the topic name (const means it cannot be reassigned)
const topic = "JavaScript";
 
// Template literal: backticks allow embedding variables with ${...}
console.log(`Hello, ${topic}!`);
 
// A plain string message printed on the second line of output
console.log("Running from VS Code terminal.");
  1. Save the file (Ctrl+S / Cmd+S)

You should see syntax highlighting for strings, const, and template literals.

Step 3: Run from the Integrated Terminal

  1. Open Terminal → New Terminal
  2. Confirm the shell prompt is inside your project folder
  3. Run:
bash
# Execute hello.js with Node.js
node hello.js

Expected output:

text
Hello, JavaScript!
Running from VS Code terminal.

Tip

Best Practice

Keep one terminal per task window when learning. If output looks wrong, check the terminal’s current directory with pwd (macOS/Linux) or cd (Windows).

Step 4: Optional Run Configuration (Debug Panel)

For later debugging practice, you can add a minimal launch config.

  1. Open the Run and Debug view (Ctrl+Shift+D / Cmd+Shift+D)
  2. Click create a launch.json file
  3. Choose Node.js environment
  4. VS Code may generate:
json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Run hello.js",
      "program": "${workspaceFolder}/hello.js"
    }
  ]
}
  1. Press F5 to run with the debugger attached (breakpoints work when you add them later)

For Hello World, node hello.js in the terminal is enough. Launch configs become valuable as scripts grow.

Step 5: Optional package.json (Preview)

Real JavaScript projects usually include a package.json manifest. You do not need it for Hello World, but creating one early is good habit:

bash
# Create a default package.json in the project folder
npm init -y

This command registers the project name and version so later chapters can add dependencies and npm scripts cleanly.

Common Issues

SymptomLikely causeFix
node not found in VS Code terminalPATH differs from system terminalRestart VS Code; install Node.js; on Windows, reboot after installer
File not foundTerminal not in project rootcd to folder containing hello.js
No syntax highlightingFile not saved as .jsRename to hello.js and save

FAQ

Should I open a file or a folder in VS Code?

Open a folder for projects. Single-file mode is fine for tiny experiments, but folders match how teams organize code.

What is the difference between Run and Debug?

Run (node hello.js) executes immediately. Debug (F5) attaches the debugger so you can pause on lines and inspect variables.

Do I need package.json for Hello World?

No. Add it when you install packages or define npm scripts—soon in later engineering chapters.

Can I use WebStorm instead of VS Code?

Yes. Create the same hello.js, open the project folder, and use WebStorm’s terminal to run node hello.js.

Why use template literals (`Hello, ${topic}!`)?

Template literals (ES6) make string interpolation readable. You will learn strings in depth in later chapters.