Emmet : Coder plus rapidement en HTML & CSS avec 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 les 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 séparée d’une extension.

Vous vous demandez peut-être comment Emmet booste l’espace de travail (workspace) d’un webmaster, si c’est le cas, permettez-moi de vous faire entré dans le bain si vous n’avez toujours pas une idée de quoi il s’agit.

Prenons ce code :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
  
</body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

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.

p : <p></p>

Certaines balises se voient compléter par leurs attributs requirents.

a : <a href=""></a>

img : <img src="" alt="" />

input : <input type="text" name="" />

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.

balise.text-center : <balise class="text-center"></balise>
balise#wrapper : <balise id="wrapper"></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 par exemple dans ul, li est généré. plus d’infos.

.col-md-12 : <div class="col-md-12"></div>
#send      : <div id="send"></div>
ul>.list-group : <ul><li class="list-group"></li></ul>

Vous pouvez enchaîner les  abréviations comme suit

p#send.col-md-4.col-sm-6.col-xs-12

//Génère 

<p id="wrapper" class="col-md-4 col-md-6 col-xs-12">
	
</p>

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

p[style=text-align: center]

//Génère

<p style="text-align:center"></p>

Famille, Quantification, Groupement

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

p.text-center>.row 
//Génère
<p class="text-center">
   <div class="row">
      
   </div>
</p>

Vous pouvez remontez vers un parent avec ^

ul>li^.center

//génère

<ul>
    <li></li>
</ul>
<div class="center"></div>

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

.row>.col-md-6+.col-md-6

//Génère

<div class="row">
   <div class="col-md-6"></div>
   <div class="col-md-6"></div>
</div>

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 (*)

ul.list>li*4

//Génère

<ul class="list">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

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 ()

html>(head>title+meta[charset=utf-8])+body

//Génère

<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	
</body>
</html>

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

POUR VOUS
PWA : Comprendre les Applications Web Progressives

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

lorem

//Génère 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus deserunt, saepe ipsa aperiam autem ab! 
Magnam tenetur quas aut voluptas optio ab possimus accusantium perspiciatis quibusdam repellendus. Libero, 
ducimus, magni?

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

4 Commentaires

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

Ajouter un commentaire