YOAT Lab
06 · Module 2 — Intégration éditeur et sécurité

Intégration VS Code

Trois raccourcis qui changent tout au quotidien.
Une leçon courte mais à haute densité.

3 minutesPanneau Claude3 raccourcis essentiels
§01 · Le panneau Claude

L'intégration la plus utile

L'extension Claude Code installée en leçon 5 apporte un panneau à droite de l'éditeur. C'est là que vous passerez le plus de temps. Pas dans le terminal, pas dans une fenêtre séparée : ici, à côté de votre code.

Pourquoi c'est important

L'interaction code-Claude doit être sans friction. Quelques millisecondes de gain par opération, multipliées par 100 ou 200 interactions par jour, font une différence majeure sur la fatigue cognitive en fin de journée.

§02 · Trois raccourcis à mémoriser

Les seules commandes vraiment essentielles

Il y a beaucoup de raccourcis dans Claude Code. Trois suffisent pour 95% des usages. Inutile de retenir le reste avant d'être à l'aise avec ceux-ci.

Cmd+L / Ctrl+L

Ouvrir le panneau Claude

Le réflexe de démarrage de session. À utiliser à l'entrée du projet, juste après code . dans le terminal.

Cmd+I / Ctrl+I

Soumettre la sélection

Sélectionnez du code dans l'éditeur, appuyez sur Cmd+I, posez votre question. Claude reçoit le code sélectionné comme contexte ciblé.

Shift+L / Shift+L

Sélection contextuelle

Sélectionnez plusieurs blocs ou fichiers, Shift+L les ajoute tous au contexte de Claude. Pratique pour comparer ou refactorer entre plusieurs zones.

§03 · Démo — les raccourcis en action

Trois gestes, infinies possibilités

1

Cmd+L : sélection → Claude

Sélectionnez du code, faites ⌘L. Le panneau Claude reçoit le contexte exact.

2

Cmd+K : édition inline

Décrivez la modif voulue. Claude réécrit la zone directement, sans passer par le panneau.

3

Cmd+Shift+L : nouvelle conv

Réinitialise le contexte. Réflexe à chaque changement de tâche pour éviter la dérive.

4

Shift+Tab : mode plan

Claude propose son plan d'action sans toucher au code. À activer dès qu'il y a plusieurs fichiers concernés.

App.tsx — Visual Studio Code 📄 🔍 📄 App.tsx function Dashboard() { const [data, setData] = useState([]) useEffect(() => { fetch('/api/data').then(setData) }, []) return ( <div> <h1>Dashboard</h1> </div> ) } ✻ Édition inline (Cmd+K) Remplace useEffect par useQuery de @tanstack/react-query ✻ Claude RACCOURCIS ESSENTIELS ⌘ L Sélection → Claude Sélectionnez du code, ⌘L l'envoie au panneau. Claude voit le contexte exact de votre sélection. → Pour expliquer, refactorer, déboguer. ⌘ K Édition inline Décrivez la modif voulue dans la popup. Claude réécrit la zone directement dans le code. → Plus rapide qu'un aller-retour panneau. ⌘ ⇧ L Nouvelle conversation Réinitialise le contexte de la session Claude. Évite la dérive après plusieurs sujets traités. → Réflexe à chaque changement de tâche. BONUS ⇧ Tab Mode plan Claude propose le plan d'action sans toucher au code. → À utiliser dès qu'une tâche touche plusieurs fichiers. 💡 Ordre d'apprentissage Commencez par ⌘L (sélection). Quand c'est un réflexe, ajoutez ⌘K (édition inline). Le reste viendra naturellement.
§04 · Bonus — autres raccourcis utiles

Pour aller plus loin

Optionnel

Cmd+K / Ctrl+K

Édition inline. Sélectionner une zone et demander à Claude de la modifier directement dans le code, sans passer par le panneau.

Optionnel

Cmd+Shift+L

Ouvrir une nouvelle conversation Claude. Utile quand le contexte de la session courante est devenu trop encombré ou pour aborder un sujet sans rapport.

Optionnel

Shift+Tab

Basculer en mode plan. Claude propose un plan d'action sans toucher aux fichiers. Réflexe à activer dès que la tâche modifie plusieurs fichiers.

Ces trois-là sont utiles mais pas indispensables au début. Mémoriser d'abord les trois principaux (Cmd+L, Cmd+I, Shift+L), ajouter ceux-ci quand vous serez à l'aise.

Fin · Leçon 06 acquise

Cap sur la leçon 07

Vous savez ouvrir Claude dans VS Code, soumettre du code sélectionné, et ajouter du contexte. La leçon suivante aborde la sécurité applicative : .env, secrets, authentification, HTTPS, RGPD.

Leçon suivante → 07 · Sécurité de l'application
Quiz · Validation des acquis

Quiz · Intégration VS Code

8 questions · une seule bonne réponse par question · vous pouvez recommencer autant de fois que nécessaire.

1 / 8
Question à choix multiple

Quel est le raccourci pour ouvrir le panneau Claude dans VS Code ?

Cliquez sur lecture pour démarrer.
§00 · Intro 0:00 / 3:00 Voix activée