Mémo — VS Code

Les raccourcis indispensables

Action	Windows	macOS
Enregistrer	`Ctrl`+`S`	`Cmd`+`S`
Annuler	`Ctrl`+`Z`	`Cmd`+`Z`
Refaire	`Ctrl`+`Y`	`Shift`+`Cmd`+`Z`
Formater le fichier	`Shift`+`Alt`+`F`	`Shift`+`Opt`+`F`
Commenter la ligne	`Ctrl`+`:`	`Cmd`+`:`
Dupliquer la ligne	`Shift`+`Alt`+`↓`	`Shift`+`Opt`+`↓`
Rechercher	`Ctrl`+`F`	`Cmd`+`F`
Ouvrir le terminal	`Ctrl`+`ù`	`Ctrl`+`ù`

Le réflexe à prendre : formater

Shift+Alt+F réaligne tout le fichier.

Faites-le à chaque fois que le code devient bizarre. Si l’indentation part en escalier après le formatage, c’est qu’il manque une balise fermante ou une accolade : le formateur vous montre l’erreur.

Le piège de l’auto-complétion

VS Code écrit des choses tout seul. C’est utile, mais déroutant au début.

Vous tapez	VS Code ajoute
`<h1>`	`</h1>` automatiquement
`(`	`)`
`{`	`}`
`"`	`"`

Conséquence

Ne retapez pas ce qui a été ajouté. Sinon vous obtenez <h1></h1></h1> ou function(()).

Le bon réflexe : après avoir tapé une balise ouvrante, appuyez sur Fin ou cliquez pour vous replacer, plutôt que de taper la fermeture.

Emmet : écrire vite

Tapez l’abréviation puis Tab.

Abréviation	Produit
`!`	Tout le squelette HTML
`ul>li*3`	Une liste avec 3 `<li>`
`p.intro`	`<p class="intro"></p>`
`div#carte`	`<div id="carte"></div>`
`a[href="#"]`	`<a href="#"></a>`

Emmet est un accélérateur, pas une béquille

Avant de vous en servir, sachez écrire les balises à la main : c’est ce qui est évalué. Utilisez-le une fois que la structure vous est familière.

Live Server

Installer : icône ⧉ Extensions dans la barre de gauche → chercher Live Server (auteur Ritwick Dey) → Install.

Lancer : clic droit sur un fichier .html → Open with Live Server, ou bouton Go Live en bas à droite.

Arrêter : cliquer sur Port : 5500 en bas à droite.

La bonne disposition d’écran

VS Code à gauche, navigateur à droite, console du navigateur ouverte.

À chaque Ctrl+S, la page se recharge toute seule. Vous voyez le résultat sans quitter le clavier.

Live Server ouvre la mauvaise page

L’adresse http://127.0.0.1:5500/index.html pointe sur un fichier précis. Si vous travaillez sur portrait.html, changez la fin de l’adresse à la main, ou faites clic droit → Open with Live Server depuis le bon fichier.

Les extensions utiles

Extension	À quoi ça sert
Live Server	Recharge la page à chaque enregistrement — indispensable
Prettier	Formate automatiquement HTML/CSS/JS
Error Lens	Affiche les erreurs directement sur la ligne concernée

Faut-il utiliser Copilot / l’IA ?

Pendant l’apprentissage : non. L’IA écrit du code que vous ne comprenez pas, et vous serez perdus à l’évaluation où elle est interdite.

Écrivez d’abord vous-même. L’IA sera très utile plus tard, quand vous saurez juger si sa réponse est bonne.