Emmet : Coder plus rapidement en HTML & CSS avec le plugin Emmet

La plus part des éditeurs dispose d’un système d’autocomplétion de balise, et une fonctionnalité de suggestions de balises et/ou attributs CSS que vous tapez. Bref, une manière d’aider le développeurs à faire des choses rapidement. Je vous présente un autre surplus outil qui vous permettra d’aller encore plus rapidement, Emmet !

Emmet, écrivez moins, codez plus

Emmet est un plugin qu’on intègre dans un éditeur texte ou un IDE qui permet d’écrire plus rapidement ses codes HTML & CSS. La plus part des éditeurs et IDE web l’intègre par défaut comme PHPStorm mais d’autres nécessitent l’installation d’une extension.

Vous vous demandez peut-être comment Emmet booste l’espace de travail (workflow) d’un webmaster, si c’est le cas, permettez-moi de vous faire entré dans le bain si vous en connaissez pas.

Prenons ce code :

Le code le plus basique en HTML qui fait environ déjà 10 lignes de code, avec Emmet, on peut l’écrire qu’en une seule ligne et en quelque caractère .

Animation de la génération d'esquelette html avec git

J’utilise PHPStorm qui ajoute d’autres informations tel que meta viewport

Et opps, comme par magie, j’ai mon code généré. Vous voyez comment Emmet peut vous simplifiez la vie ? Convaincu ? Découvrons Emmet…

Installer Emmet

Emmet est disponible sous forme de plugins ou extensions dans différentes éditeurs. Vous trouverez comment l’installer dans votre éditeurs dans la cette page de téléchargement

Voir aussi  PHPStorm un environnement de développement intégré WEB pour le pro

Les bases d’emmet

Avec emmet, on écrit la syntaxe d’une abréviation suivi de la touche tabulation pour voir la génération du code correspondant. Le cas de l’abréviation suivante suivi de la touche tabulation

Génère

Les balises

Vous n’avez besoin que de taper le nom d’une balise pour générer l’ouverture et fermeture de celle ci

Certaines balises se voit complété par leurs attributs requirent.

Attributs

Pour définir les classes d’une balise, il faut précéder le nom de la classe par un point (.) et un nom précédé d’un dièse (#) défini l’id vu qu’il en existe qu’un au sein d’une balise.

Quand le nom de la balise n’est pas renseigné, une balise implicite est généré sur base de l’élément parent. Si vous êtes dans ul, li est généré. plus d’infos.

Vous pouvez enchaîner les  abréviations comme suit

Voir aussi  L'endroit idéal pour Apprendre HTML et CSS en RDC

Hormis les classes et identifiants, les autres attributs sont renseignés entre crochet

Famille, Quantification, Groupement

Vous pouvez déterminer les enfants d’une balise avec >

Vous pouvez remontez vers un parent avec ^

Vous pouvez ajouter un frère d’une balise avec +

Vous pouvez aussi quantifier le nombre d’éléments à générer avec le nombre d’éléments à générer précédé de l’astérisque (*)

Enfin, De fois on a besoin de ne pas à remonter d’un parent (^),  redescendre (>) d’un enfant et vice-versa. Pour cela, vous pouvez grouper vos éléments de cette manière avec les parenthèses ()

Voir aussi  Faciliter vos animations CSS3 avec Animate.css

Je vous laisse découvrir d’autres syntaxes dans la documentation.

Lorem ipsum

Quand on développe, on a souvent besoin du texte enfin d’anticiper le résultat de ses utilisateurs , Vous pouvez généré rapidement le faux-texte

Les actions

Hormis les syntaxes, Emmet dispose des différentes actions aussi très pratiques qui se font à travers les combinaisons de touche ou raccourcis par exemple le raccourci sfhit + ctrl + j qui permet de coder le lien d’une image en base64. si vous positionnez le curseur dans la valeur de l’attribut src ou dans la valeur de la fonction url() (background par exemple).

Il existe aussi des abréviations pour le CSS

Ajouter un commentaire

4 Commentaires

  1. snipe 14 janvier 2018
    • Goms 14 janvier 2018
  2. MKE 13 janvier 2018
    • Goms 13 janvier 2018