Your Development Environment

Set up your workspace — the tools professional developers use, configured for AI-assisted development.

INFO

• Time: ~60 minutes
• Difficulty: Beginner
• What you'll learn: VS Code setup, terminal basics, file organization

---

This Page Covers

• VS Code setup and essential extensions
• Terminal basics and essential commands
• File system organization for projects
• Package managers and cloud alternatives

---

VS Code Setup

VS Code (Visual Studio Code) is a free code editor made by Microsoft. It's what most developers use today, and it works on Mac, Windows, and Linux. Think of it as Microsoft Word, but for code.

Installation

Step 1: Go to the download page

Open your web browser and go to code.visualstudio.com

Step 2: Download for your system

The website automatically detects your operating system (Mac, Windows, or Linux) and shows the right download button.

• On Mac: Click the big blue button that says "Download for macOS"
• On Windows: Click the big blue button that says "Download for Windows"

The file will start downloading. It's about 100MB, so it might take a minute.

Step 3: Install VS Code

On Mac:

1. Open your Downloads folder
2. Find the file called VSCode-darwin-universal.zip (or similar)
3. Double-click to unzip it
4. Drag the Visual Studio Code app to your Applications folder
5. Open it from Applications (you might need to right-click and select "Open" the first time)

On Windows:

1. Open your Downloads folder
2. Find the file called VSCodeSetup.exe (or similar)
3. Double-click to run the installer
4. Click "Next" through the wizard — the defaults are fine
5. Check "Add to PATH" when asked (this is important!)
6. Click "Install" and then "Finish"

Step 4: Open VS Code

Launch VS Code. You'll see a Welcome screen.

Congratulations — you have a professional code editor installed!

Basic Navigation

Before we add extensions, let's get familiar with the interface. VS Code has a few key areas you'll use constantly.

The Activity Bar (left side — vertical strip of icons) This is how you switch between different views:

• Explorer (top icon, looks like files) — shows your project files
• Search (magnifying glass) — find text across all files
• Source Control (branch icon) — for Git version control (Module 7)
• Extensions (four squares) — add new features

The Sidebar (next to activity bar) Shows content based on which activity icon you clicked. Usually shows your files.

The Editor (main center area) This is where you write code. You can have multiple files open as tabs.

The Status Bar (bottom) Shows useful info like what line you're on, the file type, and any errors.

The Command Palette (keyboard shortcut) This is your secret weapon. Press:

• Mac: Cmd + Shift + P
• Windows: Ctrl + Shift + P

A search box appears at the top. You can find ANY feature in VS Code by typing what you're looking for. For example, type "settings" to open settings, or "format" to format your code. When in doubt, open the Command Palette and search.

Essential Extensions

Extensions add superpowers to VS Code. Here are four you should install right away.

How to install extensions:

1. Click the Extensions icon in the Activity Bar (looks like four squares, with one floating off)
2. Type the extension name in the search box
3. Click the blue "Install" button

Install these four extensions:

1. Prettier - Code formatter

• Search for: Prettier - Code formatter
• Publisher: Prettier
• What it does: Automatically makes your code look neat and consistent. Like spell-check, but for code formatting.
• Why you need it: You won't have to worry about indentation, spacing, or where to put brackets. Prettier handles it.

2. Live Server

• Search for: Live Server
• Publisher: Ritwick Dey
• What it does: Lets you preview your website in a browser and automatically refreshes when you save changes.
• Why you need it: Instead of manually refreshing your browser every time you change something, Live Server does it automatically.

3. GitLens

• Search for: GitLens
• Publisher: GitKraken
• What it does: Shows who changed what code and when. Adds Git superpowers to VS Code.
• Why you need it: When working on projects over time (or with others), you'll want to know the history of changes. More on this in Module 7.

4. Markdown All in One

• Search for: Markdown All in One
• Publisher: Yu Zhang
• What it does: Makes writing Markdown files easier with shortcuts and preview.
• Why you need it: Many projects use Markdown for documentation. This makes editing those files much nicer.

After installing each extension, VS Code might ask you to reload. Click "Reload" when prompted.

Quick setup tip: To make Prettier format your code automatically when you save:

1. Open Command Palette (Cmd/Ctrl + Shift + P)
2. Type "settings json" and select "Preferences: Open User Settings (JSON)"
3. Add this line between the curly braces: "editor.formatOnSave": true
4. Save the file

Now your code will auto-format every time you save. One less thing to think about.

---

Terminal Basics

Why Use the Terminal?

The terminal is a text-based way to control your computer. Instead of clicking on folders and icons, you type commands.

Why not just click around?

You could. But the terminal is:

• Faster — one command can do what would take many clicks
• Required — many development tools ONLY work from the terminal
• Powerful — you can automate repetitive tasks
• Universal — terminal commands work the same way across projects

Think of it like texting instructions to your computer instead of pointing and clicking. At first it feels weird, but it becomes second nature.

When you'll need it:

• Installing packages (npm install)
• Running development servers (npm run dev)
• Using Git (git commit)
• Deploying websites
• Following 90% of coding tutorials online

Opening Terminal in VS Code

VS Code has a built-in terminal so you don't need a separate app.

To open the terminal:

• Menu method: View -> Terminal
• Keyboard shortcut: Press Ctrl + ` (the backtick key, usually below Escape)

A panel appears at the bottom of VS Code. This is your terminal.

On Mac: You'll see something like yourname@MacBook ~ %On Windows: You'll see something like C:\Users\yourname>

This is the prompt — it's waiting for you to type a command.

Essential Commands

Let's learn the commands you'll use constantly. Don't just read these — open your terminal and try each one!

Where am I?

pwd

This stands for "Print Working Directory." It shows you what folder you're currently in.

Try it! Type pwd and press Enter. You'll see something like /Users/yourname (Mac) or C:\Users\yourname (Windows).

What's in this folder?

On Mac/Linux:

ls

On Windows:

dir

This "lists" all the files and folders in your current location. It's like opening a folder and seeing what's inside.

Try it! You'll see a list of files and folders.

Move to a different folder

cd FolderName

This "changes directory" to another folder. For example:

cd Documents

This moves you into the Documents folder. Now if you run pwd, you'll see you're inside Documents.

Pro tip: Use Tab to auto-complete folder names. Type cd Doc and press Tab — it'll complete to cd Documents (if that folder exists).

Go back up one folder

cd ..

The .. means "parent folder" (one level up). If you're in Documents and run cd .., you go back to your home folder.

Go to your home folder

cd ~

The ~ (tilde) is a shortcut for your home folder. No matter where you are, cd ~ takes you home.

Create a new folder

mkdir my-project

This "makes a directory" (creates a folder) called my-project. You can name it whatever you want.

Clear the screen

clear

This wipes the terminal clean. Helpful when things get cluttered.

Command summary:

Command	What it does	Example
pwd	Show current folder	pwd
ls (Mac) / dir (Windows)	List files in folder	ls
cd FolderName	Go into a folder	cd Documents
cd ..	Go up one folder	cd ..
cd ~	Go to home folder	cd ~
mkdir name	Create a folder	mkdir my-project
clear	Clear the screen	clear

Practice exercise:

1. Open terminal in VS Code
2. Run pwd to see where you are
3. Run ls (Mac) or dir (Windows) to see what's there
4. Run cd Documents to go to Documents
5. Run pwd again — notice you moved
6. Run cd .. to go back
7. Run mkdir Projects to create a Projects folder

You've just navigated your computer using only text commands!

---

File System Organization

Where to Put Your Projects

Every developer needs a consistent place to store projects. Here's the rule:

Create a "Projects" folder in your home directory

cd ~
mkdir Projects

Now you have a home for all your coding work.

Why this location?

• NOT on Desktop: Your desktop gets cluttered fast. Plus, some syncing services mess with desktop files.
• NOT in Downloads: Downloads get cleaned up. You might accidentally delete your work.
• NOT in cloud sync folders: Dropbox, iCloud, OneDrive can cause issues with node_modules (thousands of tiny files). Keep projects local.

Your home folder (~) is perfect. It's easy to find and won't cause sync issues.

Common Project Structure

When you create or download a web project, you'll see a common structure:

my-project/
├── index.html      (main page - the entry point)
├── styles.css      (styling - how it looks)
├── script.js       (behavior - what it does)
├── images/         (folder for pictures)
│   ├── logo.png
│   └── photo.jpg
├── package.json    (project info and dependencies)
└── node_modules/   (downloaded packages - don't edit!)

What each file/folder is for:

• index.html — The main HTML file. Browsers look for this first. It's your homepage.
• styles.css — Your CSS styles. Controls colors, fonts, spacing.
• script.js — Your JavaScript code. Makes things interactive.
• images/ — A folder for image files. Keeps things organized.
• package.json — A special file listing your project's dependencies (packages it needs). Like a recipe's ingredient list.
• node_modules/ — Where npm puts downloaded packages. This folder can be HUGE (thousands of files). Never edit it directly. Never commit it to Git (we'll cover this in Module 7).

Not every project has all these files, but this is the typical pattern. AI tools like Lovable and Cursor create similar structures automatically.

Opening a Project in VS Code

Method 1: From VS Code

1. Open VS Code
2. File -> Open Folder (or Cmd/Ctrl + O)
3. Navigate to your project folder
4. Click "Open"

Method 2: From Terminal

1. Navigate to your project folder: cd ~/Projects/my-project
2. Type: code . (the dot means "this folder")
3. VS Code opens with your project loaded

Note: If code . doesn't work on Mac, open VS Code, press Cmd + Shift + P, type "shell command", and select "Install 'code' command in PATH."

---

Package Managers (npm)

What Are Packages?

Packages are code that other people wrote that you can use in your project. Think of them like recipes you didn't have to invent.

Want to add a date picker to your form? There's a package for that. Want to make API calls easier? There's a package for that. Want to format dates nicely? There's a package for that.

Instead of writing everything from scratch, you use packages and focus on what makes your project unique.

Examples of popular packages:

• react — Build user interfaces
• axios — Make HTTP requests easier
• lodash — Helpful utility functions
• date-fns — Work with dates easily

npm = Node Package Manager

npm is the tool that downloads and manages packages. It comes bundled with Node.js.

Installing Node.js (which includes npm):

1. Go to nodejs.org
2. Download the LTS version (Long Term Support — the stable one)
3. Run the installer, accept defaults
4. Restart VS Code after installing

Verify it worked: Open terminal and type:

node --version
npm --version

You should see version numbers (like v20.10.0 and 10.2.0). If you see "command not found," the installation didn't work or you need to restart your terminal.

How npm Works

Here's the typical workflow:

1. You clone or create a project that has a package.json file

This file lists all the packages the project needs, like a shopping list.

2. You run npm install

npm install

This reads package.json and downloads everything listed. It creates a node_modules folder with all the packages.

3. The node_modules folder appears

This folder can get HUGE — thousands of files, hundreds of megabytes. That's normal. Don't worry about it. Never edit files inside it manually.

4. If you delete node_modules, just run npm install again

The package.json is the source of truth. As long as you have that file, you can always recreate node_modules by running npm install. This is why we don't save node_modules in Git — it can be regenerated.

Common npm commands:

Command	What it does
npm install	Download all packages listed in package.json
npm install package-name	Add a new package to your project
npm run dev	Start the development server (common script)
npm run build	Build your project for production

Most projects include scripts in package.json that you run with npm run scriptname. When you download a project, check the package.json to see what scripts are available.

---

Cloud Alternatives (Skip Local Setup)

Local setup not working? Getting frustrated? There are alternatives that run entirely in your browser.

GitHub Codespaces

What it is: VS Code running in your browser. GitHub hosts it.

How to use:

1. Go to any GitHub repository
2. Click the green "Code" button
3. Select "Codespaces" tab
4. Click "Create codespace on main"
5. Wait a minute while it sets up
6. You now have VS Code in your browser, with terminal, extensions, everything

Pros:

• No installation needed
• Works on any computer (even Chromebooks)
• Exact same as VS Code locally
• Pre-configured environments

Cons:

• Requires internet connection
• Free tier has monthly hour limits (60 hours/month)
• Can feel slightly laggy compared to local

Best for: When you can't install software (work computer), when local setup is broken, or when you want to quickly try a project.

Replit

What it is: An all-in-one coding environment in your browser.

How to use:

1. Go to replit.com
2. Create an account
3. Click "Create Repl"
4. Choose your project type (HTML/CSS/JS, Node.js, etc.)
5. Start coding

Pros:

• Very beginner-friendly
• Built-in hosting — your projects are immediately online
• Collaboration features

Cons:

• Different interface than VS Code
• Free tier has limitations
• Less control than local development

Best for: Quick experiments, learning, collaboration.

StackBlitz

What it is: Browser-based development focused on web projects.

How to use:

1. Go to stackblitz.com
2. Click "Start a new project"
3. Choose a template
4. Start coding

Pros:

• Very fast — runs Node.js in your browser
• Great for web frameworks (React, Vue, etc.)
• Shareable URLs

Cons:

• Web projects only
• Some limitations compared to local

Best for: Web development, testing frameworks, sharing demos.

When to Use Cloud vs Local

Use Cloud When...	Use Local When...
You can't install software	You want full control
You're on a work computer with restrictions	You work offline often
Local setup is causing problems	You need maximum speed
You want to quickly try something	You're building serious projects
You're collaborating and need easy sharing	You need specific tools/extensions

Our recommendation: Try local setup first. It's the professional standard and works offline. But if you're stuck for more than 30 minutes on installation issues, use Codespaces and move on. You can always come back to local setup later.

---

Setup Troubleshooting Guide

Things go wrong. Here's how to fix the most common issues.

"Command not found"

What it means: Your computer doesn't know where to find the program you're trying to run.

Example error:

zsh: command not found: npm

Common causes:

1. The program isn't installed
2. The program is installed but not in your PATH

How to fix:

Step 1: Check if it's installed

• Try installing again (Node.js for npm, etc.)
• Restart your terminal after installing

Step 2: Restart VS Code VS Code needs to reload to see newly installed programs. Close it completely and reopen.

Step 3: Check your PATH (advanced) PATH is a list of folders where your computer looks for programs. If a program isn't in one of those folders, you get "command not found."

On Mac, run:

echo $PATH

On Windows, search for "Environment Variables" in the Start menu.

Path Issues (Windows Especially)

Windows is pickier about PATH than Mac.

"I installed Node but npm doesn't work"

1. Make sure you checked "Add to PATH" during installation
2. Restart VS Code completely (not just the terminal)
3. Restart your computer if needed

If that doesn't work:

1. Open Start Menu, search for "Environment Variables"
2. Click "Edit the system environment variables"
3. Click "Environment Variables" button
4. Under "System Variables", find "Path" and click Edit
5. Make sure Node.js path is there (usually C:\Program Files\nodejs\)
6. Click OK, restart VS Code

Permission Errors

"Permission denied" or "EACCES" errors

On Mac:

Sometimes you need admin privileges. You can prefix commands with sudo:

sudo npm install -g something

You'll need to enter your password. But be careful — sudo runs commands as administrator. Only use it when necessary.

Better solution: Fix npm permissions properly:

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

Then add to your shell profile (ask AI to help with this if needed).

On Windows:

Right-click VS Code and select "Run as administrator."

Or fix permissions on the npm folder:

1. Navigate to C:\Users\YourName\AppData\Roaming\npm
2. Right-click -> Properties -> Security
3. Give your user full control

Node Version Problems

"This project requires Node 18 but you have Node 16"

Different projects need different Node versions. This is frustrating but common.

Solution: Use nvm (Node Version Manager)

nvm lets you switch between Node versions easily.

Install nvm:

On Mac/Linux:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

Then restart your terminal.

On Windows: Download nvm-windows from github.com/coreybutler/nvm-windows

Using nvm:

nvm install 20        # Install Node 20
nvm use 20           # Switch to Node 20
nvm install 18        # Install Node 18
nvm use 18           # Switch to Node 18
nvm list             # See installed versions

Now you can switch Node versions depending on what a project needs.

When to Start Fresh

Sometimes it's faster to start over than to debug.

Signs you should start fresh:

• You've spent more than an hour on the same error
• Multiple things seem broken at once
• You've tried many solutions and nothing works
• You're not sure what you changed

How to start fresh:

Node.js:

1. Uninstall Node.js (use your system's uninstaller)
2. Delete leftover folders:
   • Mac: rm -rf ~/.npm ~/.nvm /usr/local/lib/node_modules
   • Windows: Delete C:\Users\YourName\AppData\Roaming\npm
3. Restart computer
4. Install fresh from nodejs.org

VS Code:

1. Uninstall VS Code
2. Delete settings folder:
   • Mac: rm -rf ~/Library/Application\ Support/Code
   • Windows: Delete %APPDATA%\Code
3. Reinstall from code.visualstudio.com

General rule: If you've tried 3-4 solutions and nothing works, starting fresh often takes less time than continuing to debug.

---

Key Takeaways

• VS Code is your main tool — install it, learn the interface, add the essential extensions
• The terminal is essential — practice cd, ls/dir, mkdir, pwd until they're automatic
• Keep projects organized — use a dedicated Projects folder, not Desktop or Downloads
• npm manages packages — npm install downloads what a project needs, node_modules can be regenerated
• Cloud alternatives exist — GitHub Codespaces is your escape hatch if local setup fails
• Troubleshooting is normal — "command not found" and permission errors happen to everyone

You now have a professional development environment. The same tools used at Google, Meta, and startups worldwide. It might feel like a lot, but you'll use these tools every day and they'll become second nature.

---

What's Next?

Your environment is ready. Now let's understand the AI tools you'll be using to write code — how they work, what they're good at, and how to choose between them.