Ctrl+K - Édition en ligne avec l'IA

Bon retour ! Je vais maintenant te montrer le raccourci le plus important de Cursor : Ctrl+K (ou Cmd+K sur Mac).

Qu'est-ce que Ctrl+K ?

Ctrl+K c'est l'édition en ligne - éditer le code directement sur place grâce à l'IA. Au lieu d'écrire le code à la main, tu décris ce que tu veux modifier, et l'IA le fait pour toi.

Comment utiliser Ctrl+K - Étape par étape

Méthode 1 : Éditer du code sélectionné

1. Sélectionne le code que tu veux modifier
2. Appuie sur Ctrl+K (ou Cmd+K sur Mac)
3. Décris ce que tu veux changer dans la fenêtre qui apparaît
4. L'IA proposera des modifications
5. Accepte ou Refuse

Méthode 2 : Ajouter du nouveau code

1. Place ton curseur là où tu veux ajouter du code
2. Appuie sur Ctrl+K
3. Décris ce que tu veux ajouter
4. L'IA générera le code
5. Accepte ou Refuse

Exemples pratiques

Exemple 1 : Changer une couleur

Tu as :

1<h1>Ohé les Pirates !</h1>

Tu veux : un texte de couleur rouge

Ce que tu fais :

1. Sélectionne <h1>Ohé les Pirates !</h1>
2. Ctrl+K
3. Tape : « ajoute une couleur de texte rouge »
4. L'IA proposera :

1<h1 style="color: red;">Ohé les Pirates !</h1>

5. Accepte !

Exemple 2 : Ajouter une image

Tu as :

1<h1>Bienvenue à bord !</h1>

Tu veux : ajouter une image de pirate sous le titre

Ce que tu fais :

1. Place ton curseur à la fin de la ligne h1
2. Ctrl+K
3. Tape : « ajoute une image de pirate depuis une URL unsplash »
4. L'IA ajoutera :

1<h1>Bienvenue à bord !</h1>
2<img src="https://images.unsplash.com/photo-pirate" alt="Pirate">

5. Accepte !

Exemple 3 : Refactorisation

Tu as :

1<p>Navire</p>
2<p>Ancre</p>
3<p>Carte</p>

Tu veux : transformer en liste

Ce que tu fais :

1. Sélectionne les 3 paragraphes
2. Ctrl+K
3. Tape : « transforme en ul avec des éléments li »
4. L'IA proposera :

1<ul>
2  <li>Navire</li>
3  <li>Ancre</li>
4  <li>Carte</li>
5</ul>

5. Accepte !

Ctrl+K vs Chat IA - Quand utiliser lequel ?

Règle : si tu sais OÙ dans le code tu veux une modification → utilise Ctrl+K. Si tu ne sais pas par où commencer → utilise le Chat IA.

Astuces de pro

1. Sois précis

« change ça » « change la couleur de fond en noir et le texte en doré »

2. Utilise un langage technique (quand tu le connais)

« fais un joli bouton » « ajoute un bouton avec un padding de 10px et un border-radius de 5px »

3. Itère

D'abord Accepte → Regarde le résultat → Ctrl+K encore → Peaufine

4. Expérimente

N'aie pas peur ! Tu peux toujours :

• Refuser - annuler les modifications
• Ctrl+Z - revenir en arrière
• Ctrl+K à nouveau - améliorer

Exercice pratique

Il est temps de faire tes propres expériences ! Ouvre Cursor et :

1. Crée un nouveau fichier pirate.html
2. Tape : <h1>Mon Navire</h1>
3. Sélectionne cette ligne
4. Ctrl+K → « ajoute un fond noir et un texte blanc »
5. Accepte
6. Ctrl+K encore → « ajoute une bordure rouge de 2px »
7. Accepte

Félicitations ! Tu viens d'utiliser Ctrl+K deux fois de suite !

FAQ

Q : Que faire si l'IA ne comprend pas mon instruction ? R : Refuse et essaie de la décrire plus précisément. Par exemple, au lieu de « rends ça plus joli », écris « une police plus grande et centrée ».

Q : Puis-je utiliser Ctrl+K sur plusieurs lignes ? R : Oui ! Sélectionne autant de lignes de code que tu veux.

Q : Et si je veux ajouter quelque chose au début du fichier ? R : Place ton curseur au début et Ctrl+K.

Q : Ctrl+K ne fonctionne-t-il qu'avec le HTML ? R : Non ! Il fonctionne avec n'importe quel langage : JavaScript, Python, CSS, tout !

Résumé

Ctrl+K c'est l'édition en ligne avec l'IA Utilise-le pour des modifications rapides dans le code Tu peux éditer du code sélectionné ou ajouter du nouveau code Tu peux toujours Refuser et réessayer Plus tu es précis, meilleur est le résultat

C'est TA BAGUETTE MAGIQUE, pirate !

Dans le prochain module, nous commencerons à construire de vrais navires (applications) avec Next.js !

Mais d'abord, tu dois terminer quelques exercices pour consolider tes compétences.

À bientôt sur les mers du code !

Capitaine Barbe-Rouge, terminé.

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Navire Pirate</title>
6    <style>
7        body {
8            background-color: #0f172a;
9            color: #fef3c7;
10            font-family: 'Courier New', monospace;
11            padding: 30px;
12        }
13        h1 {
14            color: #f59e0b;
15            text-align: center;
16            font-size: 36px;
17        }
18        .ship {
19            border: 3px solid #dc2626;
20            background-color: #78350f;
21            padding: 20px;
22            margin: 20px 0;
23            border-radius: 10px;
24        }
25    </style>
26</head>
27<body>
28    <h1>Mon Navire Pirate</h1>
29
30    <div class="ship">
31        <h2>Black Pearl</h2>
32        <p><strong>Capitaine :</strong> Barbe-Rouge</p>
33        <p><strong>Équipage :</strong> 50 pirates</p>
34        <p><strong>Trésor :</strong> 1000 pièces d'or</p>
35    </div>
36
37    <p>C'est mon premier navire ! Change le nom, le capitaine, ajoutes-en plus !</p>
38</body>
39</html>