Mémento Emmet - Automatiser son code

Soumis par Stéphane ARRAMI le mar 17/10/2017 - 10:19

Emmet est un plugin pour éditeurs de textes qui vous aide à créer du HTML et CSS plus rapidement.

Son principe est relativement simple : une fois l’abréviation Emmet tapée, appuyez sur [TAB] pour l’exécuter.

1. Créer un document complet html

Le point d’exclamation ! permet de générer le doctype, les balises, ainsi que la règle d’encodage du document HTML.

Enregistrez d'abord votre nouveau document MAJ + Ctrl + S au format html.

Tapez ! puis appuyez sur tab.

!

2. Créer et imbriquer des balises

Le chevron > permet de générer une structure de balises imbriquées.

Exemple : 

nav>ul>li

  puis tab

3. Créer plusieurs occurences d'une même balise

L’étoile * permet de créer une série de plusieurs balises du même type.

Exemple :

<section>*3

4. Créer plusieurs balises non imbriquées entre elles.

Le plus + permet de créer une suite de différentes balises.

Exemple :

h1+h2+p

5. Combiner les abbréviations

Les parenthèses () permettent de grouper des abbréviations Emmet pour créer des structures plus complexes.

Exemple :

(nav>ul>li)+(section*2)+(h1+h2+p)

6. Insérer du contenu dans une balise

Les accolades {} permettent d’ajouter du texte dans une balise générée.

Exemple :

header>h1{mon titre }

7. Enumérer dans une série de balises

Le dollar $ permet d’énumérer des balises par une incrémentation.

En ordre décroissant avec [email protected]

Exemple :

ul>li{Élément n°$}*3
ul>li.element{[email protected]}*3

8. Créer des balises avec un identifiant

Le dièse # permet d’attribuer un id à une balise générée.
Quand la balise n’est pas précisée devant l’id, une balise <div> est créée par défaut (<div id=""></div).

Exemples :

p#mon_id
p#id1+p#id2

9. Créer des balises avec une classe

Le point . permet d’attribuer une classe à une balise générée.

Exemple

p.ma_classe

10. Remonter d'un élément enfant

div>p>em{coucou}^a+p

11. Ajouter un attribut

Les crochets associés à la syntaxe [attr_name="valeur"] permettent d'attribuer un attribut à la balise générée.

Exemple :

img[src="https://citywizz.com/monimage.jpg" alt="Mon image"]

Exemple de génération d'une balise canvas

canvas#dessin[width="600px"][height="300px"]

rendu

 <canvas id="dessin" width="600px" height="300px"></canvas>

Installer Emmet

Sublime Text : Ctrl  Maj P Install puis emmet pour installer l"extension.

Brackets.io : appuyez sur l'icône en forme de lego (le manager d'extensions)

 

Emmet