Ctrl+K - Inline Editing z AI ✨
Witaj ponownie, @name! Teraz pokażę Ci najważniejszy skrót w Cursorze: Ctrl+K (lub Cmd+K na Mac).
Co to jest Ctrl+K? 🎯
Ctrl+K to inline editing - edytowanie kodu bezpośrednio w miejscu za pomocą AI. Zamiast pisać kod ręcznie, opisujesz co chcesz zmienić, a AI robi to za Ciebie.
Jak używać Ctrl+K - Krok po kroku 📝
Metoda 1: Edycja zaznaczonego kodu
- Zaznacz kod który chcesz zmienić
- Naciśnij Ctrl+K (lub Cmd+K na Mac)
- Opisz co chcesz zmienić w okienku które się pojawi
- AI zaproponuje zmiany
- Accept (zaakceptuj) lub Reject (odrzuć)
Metoda 2: Dodanie nowego kodu
- Postaw kursor w miejscu gdzie chcesz dodać kod
- Naciśnij Ctrl+K
- Opisz co chcesz dodać
- AI wygeneruje kod
- Accept lub Reject
Praktyczne przykłady 🏴☠️
Przykład 1: Zmiana koloru
Masz kod:
1<h1>Ahoj Piraci!</h1>Chcesz: Czerwony kolor tekstu
Co robisz:
- Zaznacz
<h1>Ahoj Piraci!</h1> - Ctrl+K
- Wpisz: "dodaj czerwony kolor"
- AI zaproponuje:
1<h1 style="color: red;">Ahoj Piraci!</h1>- Accept!
Przykład 2: Dodanie obrazka
Masz kod:
1<h1>Witaj na statku!</h1>Chcesz: Dodać obrazek pirata pod nagłówkiem
Co robisz:
- Postaw kursor na końcu linii z h1
- Ctrl+K
- Wpisz: "dodaj obrazek pirata z URL unsplash"
- AI doda:
1<h1>Witaj na statku!</h1>
2<img src="https://images.unsplash.com/photo-pirate" alt="Pirat">- Accept!
Przykład 3: Refactoring
Masz kod:
1<p>Statek</p>
2<p>Kotwica</p>
3<p>Mapa</p>Chcesz: Zmienić na listę
Co robisz:
- Zaznacz wszystkie 3 paragrafy
- Ctrl+K
- Wpisz: "zmień na listę ul z li"
- AI zaproponuje:
1<ul>
2 <li>Statek</li>
3 <li>Kotwica</li>
4 <li>Mapa</li>
5</ul>- Accept!
Ctrl+K vs AI Chat - Kiedy co używać? 🤔
| Sytuacja | Narzędzie | Dlaczego | |----------|-----------|----------| | Szybka zmiana w istniejącym kodzie | Ctrl+K | Instant, w miejscu | | Pytanie o koncepcję | AI Chat | Dłuższa rozmowa | | Generowanie nowego dużego kodu | AI Chat | Więcej przestrzeni | | Edycja konkretnego fragmentu | Ctrl+K | Precyzyjne, szybkie | | Nauka jak coś działa | AI Chat | Wyjaśnienia | | Dodanie małego feature | Ctrl+K | Szybkie |
Zasada: Jeśli wiesz GDZIE w kodzie chcesz zmianę → użyj Ctrl+K. Jeśli nie wiesz od czego zacząć → użyj AI Chat.
Wskazówki Pro ⚔️
1. Bądź konkretny
❌ "zmień to" ✅ "zmień kolor tła na czarny i tekstu na złoty"
2. Używaj języka technicznego (gdy go znasz)
❌ "zrób ładny przycisk" ✅ "dodaj button z padding 10px i border-radius 5px"
3. Iteruj
Pierwsze Accept → Zobacz efekt → Ctrl+K ponownie → Dopracuj
4. Eksperymentuj
Nie bój się! Zawsze możesz:
- Reject - odrzucić zmiany
- Ctrl+Z - cofnąć
- Ctrl+K ponownie - poprawić
Ćwiczenie praktyczne 🎯
Czas na własne eksperymenty! Otwórz Cursora i:
- Stwórz nowy plik
pirate.html - Wpisz:
<h1>Mój statek</h1> - Zaznacz tę linijkę
- Ctrl+K → "dodaj czarne tło i biały tekst"
- Accept
- Ctrl+K ponownie → "dodaj border 2px czerwony"
- Accept
Gratulacje! Właśnie użyłeś Ctrl+K dwa razy pod rząd! 🎉
Częste pytania 🤔
Q: Co jeśli AI nie zrozumie mojej instrukcji? A: Reject i spróbuj bardziej szczegółowo opisać. Np. zamiast "ładniej" napisz "większy font i wyśrodkowany".
Q: Czy mogę używać Ctrl+K na wielu liniach? A: Tak! Zaznacz dowolną ilość kodu.
Q: Co jeśli chcę dodać coś na początku pliku? A: Postaw kursor na początku i Ctrl+K.
Q: Czy Ctrl+K działa tylko z HTML? A: Nie! Działa z każdym językiem: JavaScript, Python, CSS, wszystko!
Podsumowanie 🎓
✅ Ctrl+K to inline editing z AI ✅ Używaj do szybkich zmian w kodzie ✅ Możesz edytować zaznaczony kod lub dodawać nowy ✅ Zawsze możesz Reject i spróbować ponownie ✅ Im bardziej konkretny, tym lepszy efekt
To jest TWOJA MAGICZNA RÓŻDŻKA, piratu! 🪄
W następnym module zaczniemy budować prawdziwe statki (aplikacje) z Next.js!
Ale najpierw musisz przejść przez kilka zadań, żeby utrwalić umiejętności.
Do zobaczenia na morzach kodu! 🏴☠️⚓
Kapitan Redbeard out.