What is an IDE?

An IDE (Integrated Development Environment) is an application for writing code. Think of it as Microsoft Word, but for programmers.

Imagine a carpenter's workshop. They could just have a hammer, but a real workshop has:

A workbench (the main editing area)
Organized tool drawers (file browser)
Lighting (syntax highlighting - colors that make code easier to read)
Power tools (extensions and automations)
Blueprints on the wall (documentation and help)

An IDE gives you all these tools in one place, designed specifically for building software.

Why Not Just Use Notepad?

You can write code in any text editor, even Notepad. But an IDE makes you much more productive:

Plain Text Editor	IDE
All text looks the same	Different parts of code have different colors
You have to remember everything	Autocomplete suggests what you're typing
Errors? Find them yourself	Highlights problems before you run the code
Navigate manually	Jump to any file, function, or variable instantly
External tools separate	Terminal, debugger, Git all built-in

Syntax highlighting colors different parts of code to make it easier to read.

For example, in this code:

javascript
function sayHello(name) {
  return "Hello, " + name;
}

An IDE might show:

function in blue (it's a keyword)
sayHello in yellow (it's a function name)
"Hello, " in green (it's text/string)
name in white (it's a variable)

This helps you spot mistakes - if a string isn't green, you probably forgot a quote mark.

VS Code vs Cursor: Which One?

For AI-assisted coding, there are two excellent choices. Both are free.

VS Code (Visual Studio Code)

What it is: Microsoft's free code editor. The most popular IDE in the world.

Best for:

General development
Massive ecosystem of extensions
Using multiple AI tools (GitHub Copilot, Continue, etc.)
Maximum flexibility and customization

Website: code.visualstudio.com

Cursor

What it is: A fork of VS Code with AI features built-in.

Best for:

AI-first development
Built-in chat with your codebase
Seamless AI code generation
People who want AI integration without setup

Website: cursor.com

Note

Our recommendation: If you're focused on AI-assisted coding, try Cursor first - the AI integration is smoother. You can always switch to VS Code later (they're nearly identical otherwise).

Comparison Table

Feature	VS Code	Cursor
Price	Free	Free (Pro: $20/month)
Based on	Original	Fork of VS Code
AI Chat	Via extensions	Built-in
Extensions	All VS Code extensions	All VS Code extensions
Learning curve	Low	Low
Updates	Frequent	Frequent
Company	Microsoft	Anysphere

Yes! VS Code and Cursor can coexist on the same computer. They even share settings if you want.

Many developers use:

Cursor for AI-heavy work (new features, exploration)
VS Code for detailed editing and debugging

Installing Your IDE

Essential First Steps

After installing, do these basic configurations:

1. Choose a Theme

The default theme is fine, but many people prefer a darker theme:

Press Ctrl + K, then Ctrl + T (Mac: Cmd + K, Cmd + T)
Browse themes and pick one you like
Popular choices: "One Dark Pro", "Dracula", "GitHub Dark"

2. Increase Font Size (Optional)

If text is too small:

Press Ctrl + + to zoom in (Mac: Cmd + +)
Or: File → Preferences → Settings → search "font size"

3. Install Recommended Extensions

Extensions add extra functionality. Start with these essentials:

Extension	What it does
Prettier	Automatically formats your code to look consistent
ESLint	Highlights JavaScript errors and problems
GitLens	Enhanced Git features (who changed what, when)

To install extensions:

Click the Extensions icon in the sidebar (or Ctrl/Cmd + Shift + X)
Search for the extension name
Click "Install"

Extensions are like apps for your IDE. They add features the IDE doesn't have by default.

Think of it like a smartphone:

Your phone comes with basic apps
You install more apps from the App Store for extra functionality

VS Code/Cursor work the same way - they come with basic features, and you install extensions for extras.

Key Features to Know

The Command Palette

The most important shortcut: Ctrl + Shift + P (Mac: Cmd + Shift + P)

This opens the Command Palette - a search bar for any action in the IDE.

Don't know how to do something? Open the Command Palette and search for it.

The File Explorer

The sidebar on the left shows your files and folders. Click to open them.

Right-click for options (new file, rename, delete)
Drag files to move them
Ctrl/Cmd + P to search for any file by name

The Integrated Terminal

You don't need a separate terminal window. The IDE has one built-in:

Ctrl + ` (backtick) to toggle the terminal
Or: View → Terminal

This terminal works exactly like the one you learned about earlier.

Multiple Files (Tabs)

Click files to open them in tabs. Work on multiple files at once.

Ctrl/Cmd + W to close current tab
Ctrl/Cmd + Tab to switch between tabs
Split the editor to see files side-by-side

Quick Reference

Action	Windows/Linux	Mac
Command Palette	`Ctrl + Shift + P`	`Cmd + Shift + P`
Quick Open (find file)	`Ctrl + P`	`Cmd + P`
Toggle Terminal	Ctrl + `	Cmd + `
Save	`Ctrl + S`	`Cmd + S`
Find	`Ctrl + F`	`Cmd + F`
Find in all files	`Ctrl + Shift + F`	`Cmd + Shift + F`
Toggle Sidebar	`Ctrl + B`	`Cmd + B`
Close tab	`Ctrl + W`	`Cmd + W`

Common Issues

Frequently Asked Questions

You need to add it to your PATH:

Open VS Code/Cursor
Press Ctrl/Cmd + Shift + P
Type "shell command"
Select "Install 'code'/'cursor' command in PATH"
Open a NEW terminal window

By default, you must press Ctrl/Cmd + S to save.

To enable auto-save:

File → Preferences → Settings
Search "auto save"
Set "Files: Auto Save" to "afterDelay"

Quick zoom: Ctrl/Cmd + + or Ctrl/Cmd + -
Reset: Ctrl/Cmd + 0
Permanent: Settings → search "font size"

That's because Cursor is built on top of VS Code! They share 95% of the same code. The main difference is Cursor's built-in AI features.

If you know how to use one, you can use the other.

You can, but it's not necessary. Pick one to start with. You can easily switch later - your skills transfer directly.

Verify Your Understanding

You've completed this lesson if you can:

0/5

Next: Learn how to install Claude Code, the AI coding assistant that runs in your terminal.

What is an IDE?

What you'll accomplish

Prerequisites

What is an IDE?

Think of an IDE like a professional workshop

Why Not Just Use Notepad?

What is syntax highlighting?

VS Code vs Cursor: Which One?

VS Code (Visual Studio Code)

Cursor

Note

Comparison Table

Can I use both?

Installing Your IDE

Essential First Steps

1. Choose a Theme

2. Increase Font Size (Optional)

3. Install Recommended Extensions

What are extensions?

Key Features to Know

The Command Palette

The File Explorer

The Integrated Terminal

Multiple Files (Tabs)

Quick Reference

Common Issues

Frequently Asked Questions

Verify Your Understanding