Qu'est ce que Emmet ?

Emmet est un plugin pour les éditeurs de texte et les IDE qui permet aux développeurs d'écrire plus rapidement du code HTML/CSS en utilisant des abréviations.
Il est tellement pratique qu'il a été intégré par défaut dans certains éditeurs tels que PHPStorm et VSCode.
Beaucoup de développeurs n'ont pas connaissance de cet outil et pourtant, avec très peu d'entrainement, il vous permettra de gagner énormément de temps à l'aide de quelques abréviations simples à retenir.
Le principe de base est que vous devez écrire une instruction suivie d'un appui sur la touche tab de votre clavier.
Par exemple, pour générer le bloc "doctype" qu'on retrouve sur n'importe quel site web, il vous suffit d'écrire le caractère ! et d'appuyer sur tabulation.

Cheat sheet

! //Un point d'exclamation suivi d'une frappe sur la touche tab génèrera le code HTML ci-dessous <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
Quelques exemples d'instructions pratiques

Chaque exemple donné ci-dessous doit évidemment être suivi d'un appui sur tabulation.

// génerer une simple div div //résultat <div></div> // tous les élément html peuvent être généré de cette manière h1 //résultat <h1></h1> //Il est également possible de donner un attribut id ainsi que des classes aux éléments générés h1#mon-titre.text-success.bg-primary //résultat <h1 id="mon-titre" class="text-success bg-primary"></h1> //Pour générer des éléments enfants on peut utiliser le chevron fermant > ul>li //résultat <ul> <li></li> </ul> //Multiplication div*5 //résultat <div></div> <div></div> <div></div> <div></div> <div></div> //Insérer du texte h3{Mon titre h3} //résultat <h3>Mon titre h3</h3> //Pour une structure plus complexe, on peut remonter depuis un enfant vers un élément parent à l'aide de ce symbole : ^ .row>.col-md-12>ul>li*3^^^.row>.col-md-12>h3{On est remonté des <li> vers la racine pour créer une nouvelle ligne} //résultat <div class="row"> <div class="col-md-12"> <ul> <li></li> <li></li> <li></li> </ul> </div> </div> <div class="row"> <div class="col-md-12"> <h3>On est remonté des '<li>' vers la racine pour créer une nouvelle ligne</h3> </div> </div> //on peut évidemment combiner tout ça pour générer une structure plus complexe .table-responsive>table.table-bordered.stable-stripped>thead>tr>th{titre colonne}*5^^tbody>tr*4>td{cellule}*5 //résultat <div class="table-responsive"> <table class="table-bordered stable-stripped"> <thead> <tr> <th>titre colonne</th> <th>titre colonne</th> <th>titre colonne</th> <th>titre colonne</th> <th>titre colonne</th> </tr> </thead> <tbody> <tr> <td>cellule</td> <td>cellule</td> <td>cellule</td> <td>cellule</td> <td>cellule</td> </tr> <tr> <td>cellule</td> <td>cellule</td> <td>cellule</td> <td>cellule</td> <td>cellule</td> </tr> <tr> <td>cellule</td> <td>cellule</td> <td>cellule</td> <td>cellule</td> <td>cellule</td> </tr> <tr> <td>cellule</td> <td>cellule</td> <td>cellule</td> <td>cellule</td> <td>cellule</td> </tr> </tbody> </table> </div>
Projet de découverte du language PHP.