VSCode : extensions, Emmet et raccourcis
Installez les extensions essentielles, utilisez les abréviations Emmet pour écrire instantanément du HTML et du CSS, et apprenez les raccourcis clavier qui accélèrent la modification.
VSCode : extensions, Emmet et raccourcis est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Pourquoi VSCode ?
Visual Studio Code est l’éditeur de code le plus populaire pour le développement front-end. Il est gratuit, libre, rapide et dispose d’un immense écosystème d’extensions. La plupart des équipes front-end l’utilisent comme éditeur standard.
Extensions essentielles
Les extensions indispensables pour le développement front-end : ESLint (analyse du code directement dans l’éditeur), Prettier (formatage automatique), GitLens (annotations git directement dans le code), Path Intellisense (autocomplétion des chemins de fichiers) et Auto Rename Tag (renommage des balises HTML associées).
Extensions spécifiques aux langages
Pour TypeScript : TypeScript and JavaScript Language Features (intégrée). Pour React : ES7+ React/Redux snippets. Pour Vue : Volar (officielle). Pour Tailwind : Tailwind CSS IntelliSense.
Qu’est-ce qu’Emmet ?
Emmet est intégré à VSCode. Saisissez une abréviation, puis appuyez sur Tab pour la développer en code HTML ou CSS complet. Cela accélère considérablement l’écriture du balisage.
<!-- Type then press Tab: -->
nav>ul>li*3>a{Link $}
<!-- Expands to: -->
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>Abréviations Emmet courantes
Apprenez ces raccourcis Emmet : ! → structure HTML de base, div.container → div avec une classe, ul>li*5 → liste de 5 éléments, input:email → champ de saisie d’adresse e-mail, form:post → formulaire avec method=post.
<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
<img src="" alt="">
<h3>Title</h3>
<p>Description</p>
</div>Raccourcis clavier essentiels
Les raccourcis qui vous font gagner le plus de temps : Ctrl/Cmd+P (ouverture rapide d’un fichier), Ctrl/Cmd+Shift+P (palette de commandes), Alt+Click (curseurs multiples), Ctrl/Cmd+D (sélection de l’occurrence suivante), Ctrl/Cmd+/ (activer ou désactiver un commentaire).
Modification avec plusieurs curseurs
Alt+Click ajoute des curseurs. Ctrl+Alt+Up/Down ajoute des curseurs au-dessus ou au-dessous. Ctrl+D sélectionne l’occurrence suivante de la sélection. Avec plusieurs curseurs, toutes les modifications sont effectuées simultanément — idéal pour renommer des variables dans de petites portées.
Terminal intégré
Ouvrez le terminal dans VSCode avec Ctrl+` (accent grave). Vous pouvez le diviser pour lancer le serveur de développement dans un volet et exécuter les essais dans un autre sans quitter l’éditeur.
Paramètres de l’espace de travail
Créez un fichier .vscode/settings.json dans votre projet pour définir des paramètres propres au projet, qui remplacent les paramètres utilisateur. Validez ce fichier afin que tous les membres de l’équipe bénéficient de la même expérience : formatage à l’enregistrement, taille des tabulations et colonnes de la règle.
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}IntelliSense et importations automatiques
IntelliSense de VSCode fournit l’autocomplétion, des indications sur les paramètres et une documentation au survol. Pour les projets TypeScript, il importe également automatiquement les symboles lorsque vous acceptez une suggestion — aucune importation manuelle n’est nécessaire.
Accéder à la définition et aux références
Faites Ctrl+Click (ou appuyez sur F12) sur un symbole pour accéder à sa définition. Shift+F12 affiche toutes ses références. Ctrl+Shift+F effectue une recherche dans tous les fichiers. Ces fonctions sont indispensables pour naviguer dans les grandes bases de code.
Panneau Problèmes
Le panneau Problèmes (Ctrl+Shift+M) répertorie toutes les erreurs et tous les avertissements ESLint et TypeScript dans les fichiers ouverts. C’est le moyen le plus rapide de voir ce qui doit être corrigé avant de valider vos modifications.
Vérification rapide
Que développe l’abréviation Emmet ul>li*3 dans VSCode ?
Récapitulatif : flux de travail VSCode
Installez ESLint, Prettier et les extensions propres à chaque langage. Utilisez Emmet pour écrire rapidement du HTML et du CSS. Apprenez les raccourcis clavier (Cmd+P, Cmd+Shift+P, Cmd+D). Définissez formatOnSave dans .vscode/settings.json. Utilisez plusieurs curseurs pour les modifications répétitives. Utilisez Accéder à la définition pour naviguer dans le code.
Questions Fréquemment Posées
La leçon « VSCode : extensions, Emmet et raccourcis » est-elle gratuite ?
Oui — le texte complet de « VSCode : extensions, Emmet et raccourcis » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « VSCode : extensions, Emmet et raccourcis » ?
Installez les extensions essentielles, utilisez les abréviations Emmet pour écrire instantanément du HTML et du CSS, et apprenez les raccourcis clavier qui accélèrent la modification. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « VSCode : extensions, Emmet et raccourcis » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Chrome DevTools : Elements, Console, Network
- VSCode : extensions, Emmet et raccourcis
- Configuration de Prettier et ESLint
- Compatibilité des navigateurs et caniuse.com