Emmet code abrégé

• > : inclure un élément dans un autre (ex: h1>p : <h1><p></p></h1>)
• + : éléments au même niveau (ex: h1+h2 : <h1><h2></h2></h1>)
• ^ : remonte l'élément dans le DOM (ex: p>span^p : <p><span></span></p><p></p>)
• * : multiplie l'élément précédent (ex: ul>li*2 : <ul><li></li><li></li></ul>)
• $ : permet de numéroter des éléments (ex: ul>li{texte$$}*2 : <ul> <li>texte01</li> <li>texte02</li> </ul>)
• ( ) : groupe un ensemble d'abréviation (ex: (h1>h2)+(h1>h2) : <h1><h2></h2></h1> <h1><h2></h2></h1>)
• h1.foo : insérer comme classe. (<h1 class="foo"></h1>)
• h1#foo : insérer comme id. <h1 class="foo"></h1>

  Si aucune balise n'introduit la classe ou id, la balise est implicite en fonction de la balise précédente
  (div par défaut, li pour ul, td pour tr, ...)

• h1{foo} : insérer comme contenu d'une balise. (<h1>foo</h1>)
• a[href=#] insérer comme attribut d'une balise; (<a href="#"></a>)
• a : attribut par défaut balise a. (<a href=""></a>)
• img : attribut par défaut balise img. (<img src="" alt="">)


• lorem : génére du texte lorem ipsum (30 mots). on peut indiquer le nombre de mots désirés (ex: lorem3)

Emmet raccourcis clavier

Adapté pour un clavier AZERTY par Lomart

• Tab ou Maj+Tab: indentation automatique des lignes sélectionnées
• Ctrl-E or Tab: Développer l'abréviation
• Ctrl-D: Apairage balise (voir la paire de balises ouvrante et fermante)
• Shift-Ctrl-D: Apairage inverse balise
• Shift-Ctrl-A: Entoure le code sélectionné avec une balise
• Ctrl-Alt-Right: Prochain point à éditer
• Ctrl-Alt-Left: Précédent point à éditer
• Ctrl-L: Selection de la ligne
• Ctrl-Shift-M: Jonction des lignes
• Ctrl-:: Bascule commentaire
• Ctrl-J: Sépare/Joint balise
• Ctrl-K: Supprime une paire de balise
• Shift-Ctrl-Y: Evaluer une expression mathématique
• Ctrl-Up: Incrémente un nombre par 1
• Ctrl-Down: Décrémente un nombre par 1
• Alt-Up: Incrémente un nombre par 0.1
• Alt-Down: Décrémente un nombre par 0.1
• Ctrl-Alt-Up: Incrémente un nombre par 10
• Ctrl-Alt-Down: Décrémente un nombre par 10
• Ctrl-.: Sélectionne le prochain item
• Ctrl-?: Sélectionne le précédent item
• Ctrl-B: Reflect CSS Value

Appuyez sur F11 quand le curseur est dans la zone d'édition pour basculer en plain écran. Esc peut aussi être utilisé pour quitter le mode plein écran.

Un aide mémoire sur le langage Emmet