# Les 10: Introduction to Cursor

---

## Hoofdstuk
**Hoofdstuk 3: Advanced** (Les 10-18)

## Beschrijving
Kennismaking met Cursor - de professionele AI code editor. Leer de core features en ontdek waarom dit de tool is voor serieuze AI-assisted development.

---

## Te Behandelen

### Waarom Cursor?

**Tot nu toe gebruikten we:**
- OpenCode (gratis, goed voor leren)
- Claude Desktop (voor agents en projects)

**Cursor is de volgende stap:**
- Purpose-built voor AI-assisted coding
- Professionele editor (gebaseerd op VS Code)
- Superieure AI integratie
- Free tier beschikbaar (voldoende voor de cursus)

---

### Free vs Pro

| Aspect | Free Tier | Pro ($20/maand) |
|--------|-----------|-----------------|
| Tab completion | ✅ | ✅ |
| CMD+K edits | Beperkt | Onbeperkt |
| Chat | Beperkt | Onbeperkt |
| Composer | Beperkt | Onbeperkt |
| Models | GPT-4, Claude | Alle modellen |

**Voor deze cursus:** Free tier is voldoende!

---

### Installatie

1. Ga naar [cursor.sh](https://cursor.sh)
2. Download voor jouw OS
3. Installeer
4. Open Cursor
5. Sign in met GitHub

**Eerste keer:**
- Cursor vraagt om settings te importeren van VS Code (optioneel)
- Accept default keybindings

---

### Core Features

#### 1. Tab Completion
AI-powered autocomplete die hele blokken code voorspelt.

**Hoe het werkt:**
- Begin met typen
- Cursor suggereert code in grijs
- Druk Tab om te accepteren
- Druk Escape om te negeren

**Tip:** Schrijf een comment over wat je wilt, en Tab completion vult de code in.

```typescript
// Function that calculates the total price with tax
// [Tab completion vult de functie in]
```

#### 2. CMD+K (Inline Editing)
Selecteer code en vraag AI om het aan te passen.

**Hoe het werkt:**
1. Selecteer code (of zet cursor op een regel)
2. Druk CMD+K (Mac) of Ctrl+K (Windows)
3. Typ je instructie
4. Enter om te genereren
5. Accept of Reject de wijziging

**Voorbeelden:**
- "Add error handling"
- "Convert to TypeScript"
- "Make this responsive"
- "Add loading state"

#### 3. Chat (Sidebar)
Converseer met AI over je code.

**Hoe het werkt:**
1. CMD+Shift+L opent Chat
2. Stel je vraag
3. AI heeft context van je open file

**Voorbeelden:**
- "Explain what this function does"
- "How can I optimize this?"
- "What's wrong with this code?"

#### 4. @ Mentions
Refereer naar files, folders, of documentatie.

**Syntax:**
- `@filename.tsx` - specifieke file
- `@folder/` - hele folder
- `@Docs` - officiële docs zoeken
- `@Web` - web zoeken

**Voorbeeld:**
```
@components/Button.tsx - How can I add a loading prop to this?
```

#### 5. Composer Mode
Multi-file generatie in één keer.

**Hoe het werkt:**
1. CMD+I opent Composer
2. Beschrijf wat je wilt bouwen
3. AI genereert meerdere files tegelijk
4. Review en accept changes

**Wanneer gebruiken:**
- Nieuwe features met meerdere components
- Refactoring over meerdere files
- Boilerplate code genereren

---

### Workflow Vergelijking

| Taak | OpenCode | Cursor |
|------|----------|--------|
| Snelle fix | Chat | CMD+K |
| Nieuwe component | Chat | Tab completion + CMD+K |
| Multi-file feature | Meerdere chats | Composer |
| Code uitleg | Chat | Chat + @ mentions |
| Refactoring | Chat | CMD+K of Composer |

---

### Tips voor Beginners

1. **Start met Tab completion**
   - Gewoon typen en kijken wat er gebeurt
   - Comments zijn je vriend

2. **CMD+K voor snelle edits**
   - Selecteer precies wat je wilt aanpassen
   - Wees specifiek in je instructie

3. **Chat voor vragen**
   - Als je iets niet begrijpt
   - Als je opties wilt vergelijken

4. **@ mentions voor context**
   - AI weet niet automatisch over andere files
   - Voeg relevante files toe met @

---

### Keyboard Shortcuts Cheat Sheet

| Actie | Mac | Windows |
|-------|-----|---------|
| Tab completion accept | Tab | Tab |
| Inline edit | CMD+K | Ctrl+K |
| Open Chat | CMD+Shift+L | Ctrl+Shift+L |
| Open Composer | CMD+I | Ctrl+I |
| Accept suggestion | CMD+Y | Ctrl+Y |
| Reject suggestion | CMD+N | Ctrl+N |

---

## Tools
- Cursor
- GitHub

---

## Lesopdracht (2 uur)

### Cursor Verkennen

**Deel 1: Setup (20 min)**

1. Download en installeer Cursor
2. Sign in met GitHub
3. Open je Todo app project
4. Verken de interface

**Deel 2: Tab Completion (30 min)**

Maak nieuwe file `src/components/LoadingSpinner.tsx`:
1. Typ comment: `// Loading spinner component with size prop`
2. Laat Tab completion de rest doen
3. Itereer met meer comments
4. Noteer: hoe goed is de completion?

**Deel 3: CMD+K Oefenen (30 min)**

Open je TodoList component:
1. Selecteer de list rendering code
2. CMD+K → "Add loading state with skeleton"
3. Selecteer een button
4. CMD+K → "Add disabled state while loading"
5. Selecteer een function
6. CMD+K → "Add try-catch with error toast"

Noteer wat werkt en wat niet.

**Deel 4: Chat + @ Mentions (20 min)**

1. Open Chat (CMD+Shift+L)
2. Vraag: "@TodoList.tsx What could I improve in this component?"
3. Vraag: "@lib/supabase.ts How do I add real-time subscriptions?"
4. Probeer @Docs voor Next.js documentatie

**Deel 5: Composer Proberen (20 min)**

1. Open Composer (CMD+I)
2. Vraag: "Create a Settings page with dark mode toggle and notification preferences. Use our existing component style."
3. Review de gegenereerde files
4. Accept of reject

### Deliverable
- Screenshot van werkende Tab completion
- 3 voorbeelden van CMD+K edits
- Notities: wat werkt wel/niet goed

---

## Huiswerk (2 uur)

### Bouw Feature met Cursor

**Deel 1: Feature Bouwen (1.5 uur)**

Voeg "Due Dates" toe aan je Todo app:
1. Elk todo kan een due date hebben
2. Toon due date in de lijst
3. Sorteer op due date
4. Markeer overdue items in rood

**Gebruik ALLE Cursor features:**
- Tab completion voor nieuwe code
- CMD+K voor aanpassingen
- Chat voor vragen
- Composer voor multi-file changes

**Deel 2: Reflectie (30 min)**

Schrijf vergelijking (400 woorden):
- Cursor vs OpenCode: wat is beter?
- Welke feature gebruik je het meest?
- Is free tier voldoende?
- Ga je overstappen?

### Deliverable
- Werkende Due Dates feature
- GitHub commit met de changes
- Reflectie (400 woorden)

---

## Leerdoelen
Na deze les kan de student:
- Cursor installeren en configureren
- Tab completion effectief gebruiken
- CMD+K gebruiken voor inline edits
- Chat gebruiken met @ mentions voor context
- Composer mode gebruiken voor multi-file generatie
- Het verschil beoordelen tussen Cursor en OpenCode
- De juiste Cursor feature kiezen per taak