Emmet toolkit – Le bloc note d'un informaticien

Sommaire

I Introduction

Originellement connu sous le nom de « Zen Coding » (2009-2012), Emmet est un moteur de complétion principalement dédié écrire du code HTML, CSS et XSL.

L’idée est d’obtenir à partir d’une écriture condensée des lignes de codes.

Exemple :

span>textearea

donne

    <span>
        <textearea></textearea>
    </span>

II Installation

Ce mode de complétion est par exemple nativement intégré dans des ide ou éditeurs de code tel que Visual Studio Code par exemple.

Pour les EDI ou éditeurs qui n’intègrent pas ce moteur de complétion, la liste des plugins se trouve ici : https://emmet.io/download/. A savoir qu’il est possible de faire de l’Emmet dans VIM 🙂

III Quelques exemples pour du code HTML

III.1 Élément simple

Pour écrire une balise : « div » donne

<div></div>

III.2 Éléments enfants via « > »

L’imbrication des éléments se fait par le caractère « >«

Ainsi « div>span>a » donne :

<div><span><a href=""></a></span></div>

III.3 Éléments de même parent via « + »

L’ajout de plusieurs éléments sous le même parent utilise le symbole « + ».

Ainsi « div>A+span+textarea » donne:

<div><A></A><span></span><textarea name="" id="" cols="30" rows="10"></textarea></div>

Autre exemple : « div+div+span » donne

    <div></div>
    <div></div>
    <span></span>

III.4 Mélange des opérateurs

Les opérateurs peuvent être mélangé à souhait.

Exemple « div>ul>li+li+li » donne :

    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

III.5 Remonter d’un niveau au sein d’une chaine via « ^ »

Lors de l’écriture condensée les chaines s’imbriques suivant plusieurs niveaux. Il peut y avoir le besoin de remonté d’un niveau et continuer à écrire son code. Pour cela on utilise l’opérateur « ^ ».

L’exemple « div>ul>li^span » donne :

    <div>
        <ul>
            <li></li>
        </ul>
        <span></span>    <-- le span n'est pas dans le <ul>
    </div>

III.6 Le multiplicateur via « * »

Il est possible de répeter autant de fois l’écriture d’une balise. L’opérateur « * » sera utilisé.

Ainsi « ul>li*5 » donne :

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

ou « ul>li*2^ul>li*4 » donne :

    <ul>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

III.7 Le groupe via « () »

Il est possible de définir un groupe qui agira seul une fois combiné avec d’autres séquence. Cela évite d’utiliser à plusieurs reprises la remontée de chaîne.

Ainsi « (div>ul>li*3)+div » donne :

    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div></div>

et « (div>ul>li*3)>div » donne exactement le même résultat :

    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div></div>

III.8 Opérateurs d’attributs

Grâce à ces opérateurs il va être possible de définir un objet ou une classe pour une balise. Il sera également possible de mettre en place un compteur.

III.8.1 Opérateur d’objet (id) via « # »

Ainsi « div#mon_id » donne :

<div id="mon_id"></div>

III.8.2 Opérateur de classe via « . »

L’exemple « ul>li.puce » donne :

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

III.8.3 Opérateur d’attribut des balises html via « [] »

Pour spécifier un u plusieurs attributs il faut utiliser l’opérateur « [] » qui contiendra tous les attributs souhaités.

L’exemple « img[width= »100″ height= »50″] » donne :

<img src="" alt="" width="100" height="50">

III.8.4 Opérateur de numérotation via « $ »

Cet opérateur permet de faire un incrément de numéro.

L’exemple « ul>li.ma_classe$*5 » donne :

    <ul>
        <li class="ma_classe1"></li>
        <li class="ma_classe2"></li>
        <li class="ma_classe3"></li>
        <li class="ma_classe4"></li>
        <li class="ma_classe5"></li>
    </ul>

Il est possible d’inverser la numérotation. Ainsi le code « div>div.ma_classe$@-*5 » donne :

    <div>
        <div class="ma_classe5"></div>
        <div class="ma_classe4"></div>
        <div class="ma_classe3"></div>
        <div class="ma_classe2"></div>
        <div class="ma_classe1"></div>
    </div>

Il est également possible de commencer par un numéro prédéfini. AInsi « div>ul.ma_classe$@10*5 » donne :

    <div>
        <ul class="ma_classe10"></ul>
        <ul class="ma_classe11"></ul>
        <ul class="ma_classe12"></ul>
        <ul class="ma_classe13"></ul>
        <ul class="ma_classe14"></ul>
    </div>

III.8.5 Opérateur de texte via « {} »

Cet opérateur permet de définir du texte entre les balises.

Ainsi « p{mon texte} » donne :

<p>mon texte</p>

Autre exemple : « p>{mon texte}+u{souligné}{et pas ici et au sein du paragraphe} » donne

<p>mon texte<u>souligné</u>et pas ici et au sein du paragraphe</p>

III.9 générer des « Lorem ipsum »

Il faut utiliser l’abréviation « lorem » qui donne :

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero cumque aut odit tempora atque, enim, accusamus reprehenderit quae, qui corrupti pariatur neque. Consequuntur velit natus perspiciatis quos provident aliquid in?

Il est possible de définir un nombre de mot an ajoutant un chiffre ainsi « lorem5 » donne :

Lorem ipsum dolor sit amet.

Et avec la multiplication comme « div*4>lorem10 » cela donne

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, minus?</div>
    <div>Voluptas accusantium assumenda perspiciatis earum omnis quasi illum, maxime aspernatur!</div>
    <div>Rerum magnam minima aspernatur quidem explicabo tempore magni consectetur nam.</div>
    <div>Omnis distinctio laboriosam fuga repellat reiciendis recusandae eius eligendi illo.</div>

IV avec du CSS

IV.1 Présentation générale

L’utilisation d’Emmet pour le CSS semble plus fastidieux. En effet, moins intuitif au premier abord, il faudra utiliser des abréviations spécifiques intuitives ou pas….

Ainsi « m » pour margin donne :

margin: ;

il est possible d’y insérer des valeurs comme « m10px » qui donner :

margin: 10px;

Il est églement possible d’ajouter d’autres attributs comme important. Le symbole « ! » sera utilisé. Dans cette chaine ‘m20px! donnera :

margin: 20px !important;

Pour ajouter plusieurs valeurs, l’exemple « m10px-12px-10px-12px » donne :

margin: 10px -12px -10px -12px;

IV.2 Liste des abréviations

Les lister ici ne va qu’alourdir la page. Pour cela ne pas hésiter à utiliser l’aide mémoire fournit sur le site officiel : https://docs.emmet.io/cheat-sheet/

V Personnalisation

V.1 Introduction

Il est possible de définir ces propres « mot de complétions ». Pour cela il faut les renseigner dans un fichier JSON. D’après le site officiel tous les éléments EMMET supplémentaires doivent être inscrits dans un fichier nommé « snippets.json ». Dans le cas de l’EDI Vscode ce sera différent.

V.2 Avec Visual Studio Code

Sous Visual Studio Code, il peut y avoir autant de fichier .json que souhaité, et ce, par type de langage si on le souhaite et sous les noms de fichiers que l’on veut.

Pour cela, cliquer sur le bouton paramètres (roue crantée) puis sur « User Snippets » :

Il apparaît en haut de l’EDI une liste de fichiers de configuration existante ou à créer. Dans notre cas nous allons utiliser le fichier existant html.css

Ainsi le fichier est ouvert comme suivant :

On remarquera que le fichier est stocké dans le profil utilisateur dans …../.config/Code/User/snippets/html.json

V.3 Exemple de snippets

V.3.1 Structure d’un snippet

La définition d’un « snippet » doit utiliser une structure json. Cette structure comprendra les 3 sections suivantes :

le nom du snippet ;
- le « description » du snippet qui permettra de donner une description plus complète ;
- le « prefix » du snippet, c’est à dire la forme condensée ;
- le « body » qui contiendra le code long associé.

V.3.2 Exemple simple

Ci-dessous un premier exemple pour comprendre :

	"mon snippet" : {
		"prefix" : "mon_snippet",
		"body" : "<div class= \"Mon_snippet\">\r\tMon texte\r</div>",
		"description" : "mon premier snippet"
	}

Ce qui dans l’EDI se verra de la manière suivante :

et qui générera le code suivant :

	<div class= "Mon_snippet">
		Mon texte
	</div>

Pour la mise en forme ainsi de la propriété « body » du texte il a été utilisé :

\r pour le retour à la ligne,
\t pour la tabulation

Pour éviter d’écrire des retours à la ligne et avoir un body plus joli à lire, la propriété body peut être un tableau :

    "mon_snippet2": {
        "prefix": "mon_snippet",
        "body": [
          "<div class= \"Mon_snippet\">",
          "  Mon texte",
          "</div>"
        ],
        "description": "mon_snippet2"
      }

V.3.3 Snippet avec code condensé

Le « body » d’un snippet peut contenir du code condensé comme suivant :

	"mon snippet" : {
		"prefix" : "mon_snippet",
		"body" : "ul>li*3",
		"description" : "mon premier snippet"
	}

Mais ce n’est pas conseillé (avec Visual Studio Code) car :

il faudra « tabuler 2 fois »,
le code à relire sera plus compliqué…

V.3.4 Les « TabStop »

Tous les éditeurs ne prennent pas en compte cette fonctionnalité. Pour l’EDI Visual Studio Code c’est le cas.

Les « TabStop » permettent de modifier le code généré très rapidement par simple appui sur le bouton Tabulation. A chaque fois le curseur sera positionné sur l’élément prêt à être modifier. Pour quitter ce mode d’édition, il suffira de taper sur la touche »Echap ».

Les « TabStop » sont représenté par le symbôle « $ » suivi d’un numéro comme par exemple $1 ou ${texte} pour sélectionner une propriété entière.

Premier exemple :

    "mon_snippet2": {
        "prefix": "mon_snippet",
        "body": [
          "<div class= \"${Mon_snippet}\">",
          "  Mon texte",
          "</div>",
		  "<div class= \"${Mon_snippet}\">",
          "  Mon texte",
          "</div>"
        ],
        "description": "mon_snippet2"
      }

ce qui générera :

  <div class= "Mon_snippet">
	Mon texte
  </div>
  <div class= "Mon_snippet">
	Mon texte
  </div>

Ensuite le curseur se placera au début de « Mon_snippet ». Puis dès écriture, la chaine « Mon_Snippet » sera entièrement remplacée, et ce, pour les 2 div simultanément.

Bref, cela augmente encore plus la rapidité d’écriture du code … 🙂

VI Pour allez plus loin

Ici s’arrête l’aperçu du mode d’écriture en mode EMMET. L’ensemble des fonctionnalités n’ont pas été abordées comme les filtres et les actions. Pour aller plus en profondeur ne pas hésiter à consulter :

le site officiel : https://docs.emmet.io/
le site de Visual Studio Code pour son implémentation de manière générale : https://code.visualstudio.com/docs/editor/emmet

L’EMMET code ne se limite pas non plus au HTML ou au CSS. Il peut être utilisé pour des langages comme JavaScript, PHP ou java …

Outils :

éditeur online pour l’écriture de snippets : https://snippet-generator.app/
- très utile car à partir d’un copier/coller d’un code et deux propriétés à renseigner, le snippets est directement généré en JSON

Emmet toolkit