Lesson 0: Setting Up Your Development Environment

What You'll Learn

In this lesson, you'll set up everything you need to start programming with Node.js and JavaScript on your macOS computer.

Why This Matters

Before you can write code, you need the right tools. Think of it like cooking - you need a kitchen with proper equipment before you can make a meal. We'll install:

  • Node.js: The engine that runs JavaScript code on your computer
  • Visual Studio Code (VS Code): A text editor designed for writing code

Step 1: Installing Node.js

What is Node.js?

Node.js lets you run JavaScript code on your computer (not just in a web browser). It's like having an interpreter that understands the JavaScript language.

Installation Steps:

  1. Open your web browser and go to: https://nodejs.org/en/download
  2. Download the LTS version (LTS means "Long Term Support" - it's the stable, recommended version)
    • Click the big green button that says "Download for macOS"
  3. Run the installer
    • Open the downloaded .pkg file
    • Follow the installation wizard (click "Continue" and "Agree" to the terms)
    • Enter your Mac password when prompted
  4. Verify the installation
    • Open the Terminal app (you can find it in Applications → Utilities, or search for it using Spotlight)
    • Type this command and press Enter:
node --version
  • You should see something like v20.10.0 (the numbers might be different)
  • Also check npm (Node Package Manager) by typing:
npm --version
  • You should see a version number like 10.2.3

What Did We Just Install?

  • node: The JavaScript runtime (the engine)
  • npm: Node Package Manager - a tool for installing additional code libraries (like an app store for code)

Step 2: Installing Visual Studio Code

What is VS Code?

VS Code is a code editor - a special text editor designed for writing programs. It has features like:

  • Syntax highlighting (colors your code to make it easier to read)
  • Auto-completion (suggests code as you type)
  • Error detection (shows you mistakes before you run the code)

Installation Steps:

  1. Go to: https://code.visualstudio.com/
  2. Download the macOS version
  3. Open the downloaded file (a .zip file)
  4. Drag the VS Code icon to your Applications folder
  5. Open VS Code from Applications
  6. Optional but recommended: Add VS Code to your dock for easy access

First-Time Setup:

When you open VS Code for the first time:

  • You might see a welcome screen - feel free to explore it
  • The interface has several sections:
    • Explorer (left side): Shows your files and folders
    • Editor (center): Where you write code
    • Terminal (bottom): Command line inside VS Code

Step 3: Creating Your First Project Folder

Why Use a Project Folder?

Keeping your code organized in folders (called "projects") helps you manage your files and makes it easier to work with multiple programs.

Steps:

  1. Create a folder for your programming lessons:
    • In VS Code, go to File → Open Folder
    • Navigate to where you want to create your projects (like Documents)
    • Click "New Folder" and name it node-lessons
    • Click "Open"
  2. Create a subfolder for your first project:
    • In VS Code's Explorer panel (left side), click the "New Folder" icon
    • Name it lesson-01

Step 4: Installing Helpful VS Code Extensions

Extensions add extra features to VS Code. Here are some helpful ones for JavaScript development:

  1. Open Extensions panel: Click the Extensions icon on the left sidebar (or press Cmd+Shift+X)
  2. Search and install these extensions:
    • ESLint: Helps find errors and enforce code style
    • Prettier - Code formatter: Automatically formats your code to look clean
    • Path Intellisense: Auto-completes file paths
    • Code Runner: Lets you quickly run code with a button

To install: Click on the extension name, then click the "Install" button.

Summary

You now have:

  • ✅ Node.js installed (the JavaScript runtime)
  • ✅ npm installed (package manager for installing libraries)
  • ✅ VS Code installed (your code editor)
  • ✅ A project folder created
  • ✅ Helpful VS Code extensions installed

What's Next?

In the next lesson, you'll write your first JavaScript program and learn about basic programming concepts like variables and console output.

Troubleshooting

If Node.js didn't install:

  • Make sure you downloaded the macOS version
  • Try restarting your computer after installation
  • Check that you have enough disk space

If VS Code won't open:

  • Right-click the app and select "Open" (macOS security feature)
  • Go to System Preferences → Security & Privacy and allow it