VS Code · Leçon 3

Travailler efficacement

Les raccourcis, extensions et réglages qui font gagner un temps fou, et comment repérer tes erreurs avant même d'ouvrir le navigateur.

Les raccourcis indispensables

Action	Windows / Linux	macOS
Enregistrer	`Ctrl`+`S`	`⌘`+`S`
Palette de commandes (tout y est)	`Ctrl`+`Maj`+`P`	`⇧`+`⌘`+`P`
Ouvrir un fichier par son nom	`Ctrl`+`P`	`⌘`+`P`
Commenter / décommenter la ligne	`Ctrl`+`:` (AZERTY) · `Ctrl`+`/` (QWERTY)	`⌘`+`:` · `⌘`+`/`
Déplacer la ligne	`Alt`+`↑` / `↓`	`⌥`+`↑` / `↓`
Dupliquer la ligne	`Maj`+`Alt`+`↓`	`⇧`+`⌥`+`↓`
Sélectionner l'occurrence suivante	`Ctrl`+`D`	`⌘`+`D`
Ajouter un curseur	`Alt`+clic	`⌥`+clic
Rechercher / remplacer	`Ctrl`+`F` / `Ctrl`+`H`	`⌘`+`F` / `⌥`+`⌘`+`F`
Formater le document	`Maj`+`Alt`+`F`	`⇧`+`⌥`+`F`
Afficher / masquer le terminal	`Ctrl`+`ù` (AZERTY) · `Ctrl`+` (QWERTY)	`⌃`+`
Afficher / masquer la barre latérale	`Ctrl`+`B`	`⌘`+`B`
Annuler / rétablir	`Ctrl`+`Z` / `Ctrl`+`Y`	`⌘`+`Z` / `⇧`+`⌘`+`Z`

Le multi-curseur Double-clique sur un mot, puis Ctrl+D plusieurs fois : chaque occurrence suivante est sélectionnée, et tu les modifies toutes en même temps. Idéal pour renommer une classe.

Entraîne-toi

Clique dans le cadre ci-dessous, puis fais le raccourci demandé sur ton clavier. (Sur Mac, ⌘ compte comme Ctrl.)

Clique ici pour commencer

⌨️

Les extensions utiles

Onglet Extensions (Ctrl+Maj+X), cherche le nom, puis Installer. N'en installe pas des dizaines : ces quelques-unes suffisent pour débuter.

Live Server

Recharge la page à chaque enregistrement. (Vue à la leçon précédente.)

Prettier – Code formatter

Remet ton code en forme automatiquement : indentation, guillemets, espaces.

Error Lens

Affiche les erreurs en toutes lettres au bout de la ligne concernée.

Material Icon Theme

Une icône claire par type de fichier dans l'explorateur.

Prudence N'installe que des extensions très téléchargées, d'auteurs connus : une extension a accès à tes fichiers.

Les bons réglages

Ouvre la palette (Ctrl+Maj+P), tape Paramètres utilisateur (JSON), puis ajoute ces lignes entre les accolades :

{
  "editor.formatOnSave": true,                         // formate à chaque Ctrl+S
  "editor.defaultFormatter": "esbenp.prettier-vscode", // avec Prettier
  "files.autoSave": "onFocusChange",                   // enregistre quand tu changes de fenêtre
  "editor.wordWrap": "on",                             // retour à la ligne visuel
  "editor.linkedEditing": true,                        // renomme la balise fermante en même temps
  "emmet.variables": { "lang": "fr" },                 // ! génère lang="fr"
  "editor.fontSize": 16
}

Plutôt à la souris ? Fichier › Préférences › Paramètres (Ctrl+,) : tape par exemple « format on save » dans la recherche et coche la case.

Tu as activé "editor.linkedEditing". Que se passe-t-il quand tu remplaces <div> par <section> ?

Rien de spécial
La balise fermante </div> devient </section> toute seule
VS Code affiche une erreur

L'édition liée modifie la paire de balises en même temps : fini les balises mal fermées !

Repérer ses erreurs

VS Code analyse ton code pendant que tu tapes :

Une erreur est soulignée d'une vague rouge ; un avertissement, en jaune. Survole-la pour lire l'explication.
Le panneau Problèmes (Ctrl+Maj+M) liste toutes les erreurs du projet ; clique sur une ligne pour y aller.
La barre d'état affiche en permanence le nombre d'erreurs ⊗ et d'avertissements ⚠.

Pour le JavaScript, le vrai juge reste la console du navigateur (F12) : elle indique le fichier et le numéro de ligne de chaque erreur, comme la console de ce cours.

Ta page est blanche et la console affiche Uncaught SyntaxError … script.js:12. Que fais-tu ?

Je supprime script.js et je recommence
J'ouvre script.js à la ligne 12 (Ctrl+G pour y aller directement)
Je vide le cache du navigateur

Le message donne le fichier et la ligne : c'est là qu'il faut regarder (ou juste avant, si c'est une parenthèse ou une accolade oubliée).

J'ai utilisé la palette de commandes (Ctrl+Maj+P) pour exécuter une commande.
J'ai renommé plusieurs occurrences d'un mot d'un coup avec Ctrl+D.
J'ai installé Prettier et activé le formatage à l'enregistrement.
J'ai réglé emmet.variables : ! + Tab génère maintenant lang="fr".
J'ai ouvert le terminal intégré et le panneau Problèmes.

À retenir

Ctrl+Maj+P : la palette, pour tout faire sans chercher dans les menus.
Ctrl+D et Alt+clic : plusieurs curseurs à la fois.
Prettier + formatage à l'enregistrement : un code toujours propre.
Vague rouge dans l'éditeur, console F12 dans le navigateur : lis les messages d'erreur !