Emmet est un plugin d'Atom qui peut être utile pour accroître votre productivité grâce à de nombreux raccourcis vous épargnant la saisie de code répétitif et ennuyeux. J'utilise Emmet pour automatiser la création de listes, pour la numérotation incrémentée de classes, pour CSS etc. Voici quelques-uns des raccourcis les plus utiles, au cas où vous les auriez oubliés. Dans les exemples qui suivent, la syntaxe en blanc correspond à Emmet, en tapant la touche tabulation on obtient la syntaxe colorée HTML.
Commencer avec un nouveau document HTML prend moins d'une seconde. Il suffit de taper ! ou html:5 puis faire "tabulation" ou "enter" selon votre éditeur de texte (dans un document vierge préalablement enregistré avec une extension .html ) et vous verrez apparaître un doctype HTML5 structuré avec quelques éléments de base.
La syntaxe d'Emmet pour décrire les éléments reprend les sélecteurs CSS, il est donc facile de s'y habituer. Essayez de combiner un nom d'élément (p.ex. p ) et un identifiant (p.ex. p#description ).
En emboîtant nos abréviations, nous pouvons construire une page entière de code en n'écrivant qu'une seule ligne. L'opérateur "descendant" (child), représenté par > vous permet d'emboîter les éléments. L'opérateur sibling (pour les éléments de même niveau dans le DOM), représenté par + vous permet de placer les éléments les uns à côté des autres. Enfin, l'opérateur ascensionnel, représenté par ^ vous permet de remonter d'un niveau dans l'arbre.
Pour profiter vraiment des emboîtements sans que votre code ne devienne une bouillie d'opérateurs, le mieux est de les regrouper - comme en mathématiques - en utilisant des parenthèses. Par exemple (.foo>h1)+(.bar>h2)
Vous pouvez choisir le nombre de fois qu'un élément doit apparaître, en utilisant l'opératuer *, exemple ul>li*3
Et si l'on voulait ajouter une numérotation ? Il suffit d'insérer l'opérateur $ dans le nom de l'élément ou de l'attribut, ou dans la valeur de l'attribut, pour obtenir cette numérotation. Si vous tapez ul>li.item$*3
Emmet vous aide également pour CSS. Vous pouvez injecter des valeurs directement dans des abréviations CSS. Imaginons que vous vouliez définir une largeur, tapez w100.
Certaines propriétés, comme background, background-image , border-radius , font , @font-face , text-outline , text-shadow possèdent quelques options supplémentaires que vous pouvez activer en utilisant le signe +. Par exemple, @f+