L’autocompletion avec Emmet
Cette fonctionnalité permet de compléter automatiquement les morceaux de code que vous commencez à écrire :
Cet exemple est déjà avancé, commençons par quelque chose de plus simple :
- Créez un nouveau fichier index.htm
- Commencez à écrire le mot html en début de fichier
- Normalement après avoir écrit les lettre ht, vous devriez avoir une suggestion emmet :
Sélectionnez maintenant la suggestion “html:5” puis appuyez sur la touche tab ou la touche entrée de votre clavier, et magie ! Tout le code d’un document HTML5 de base a été ajouté au fichier :
Ce qu’il faut retenir, c’est que c’est la touche tab ou la touche entrée qui permet de compléter son code.
Continuons maintenant en ajoutant quelques balises html. Vous n’avez pas besoin de commencer à écrire votre balise avec le symbole < , il suffit de commencer à écrire le nom de la balise, puis une fois les suggestions affichées, d’appuyer sur tab.
Faites maintenant des essais dans votre fichier avec les balises h1, h2, p, ul, li, a, img, etc.
Emmet ne se limite pas au HTML mais à tous les langages supporté par VSCode. On verra par la suite qu’il pourra même retrouver les fonctions que l’on a écrit soi-même.
Faisons un autre essai avec un fichier CSS :
- Créez un fichier CSS styles.css
- Juste avant la fin de la balise head de votre fichier index.htm, commencez à taper link puis tapez entrée pour valider la suggestion
- La balise link a automatiquement été générée. Dans l’attribut href de la balise, commencez à taper le nom de votre fichier CSS styles.css
- Le fichier est automatiquement trouvé et en validant l’url est ajoutée !
- Editez maintenant le fichier styles.css
- Créez une classe css, par exemple .maclass { }
- Emmet permet de retrouver les propriétés CSS sans avoir à taper le mot “correctement”, c’est à dire sans avoir à taper toutes les lettres d’une propriété.
Par exemple, si je souhaite ajouter la propriété background-color, je peux écrire bacol et Emmet va me proposer, entre autres, la propriété background-color.
Il suffit donc que les lettres que je tape soient contenues (dans l’ordre des lettres du mot) dans la propriété pour que Emmet la suggère. - Une fois le nom de la propriété validée, Emmet va suggérer des valeurs, qui peuvent aussi être recherchée en commençant à taper le nom de la valeur.
- Prenez un moment pour faire des essais avec par exemple border-top-left-radius, ou margin-top, etc.
L’utilisation d’Emmet fait gagner du temps et permet d’éviter de nombreux problèmes de syntaxe !
Voyons un dernier exemple pour l’édition du html :
Il est aussi possible de créer rapidement une structure de balises html.
Admettons que je souhaite créer une balise section, qui va contenir 2 balises div, qui vont contenir une balise ul, qui vont contenir 5 balise li chacune.
Plutôt que d’écrire toutes les balises, faire des copier/coller, avec emmet on pourra écrire :
section>div*2>ul>li*5
Après validation, notre structure est créée !
Une dernière note importante ! Si la suggestion Emmet n’apparait pas, il suffit de supprimer le dernier caractère et de le taper à nouveau.
Par exemple, si vous copiez/collez section>div*2>ul>li*5 dans votre fichier html, par défaut la suggestion Emmet n’apparait pas.
Supprimez puis tapez à nouveau le dernier caractère, dans ce cas le chiffre 5, et la suggestion apparait.
Vous l’aurez compris, savoir bien utiliser Emmet permet de faciliter le développement et d’éviter de nombreuses erreurs ! À maitriser a-bso-lu-ment !