Emmet
Bon, tout éditeur de code sans préprocesseur, ou outil d’aide à l’écriture rapide de code, passe à côté d’un grand confort d’utilisabilité.
Indépendamment de l’éditeur, il est une équipe qui travaille depuis plusieurs années à cela avec le projet Zen Coding, devenu dorénavant Emmet.
Emmet n’est pas exclusif à Sublime Text. Emmet s’adapte à votre éditeur, quel qu’il soit, y compris donc sous forme de package pour Sublime Text.
Installer le package
Ouvrez la palette de commandes et tapez Instal… sélectionnez Package Control : Install Package… dans la nouvelle boite d’invite, tapez et sélectionnez Emmet. Voilà, maintenant Emmet est disponible sous Sublime Text.
Alors, vu que Sublime Text était déjà phénoménal d’utilisabilité, en compagnie d’Emmet, cela devient un incontournable de l’édition de code orienté HTML et CSS.
Tout se passe au travers d’abréviations et ne fonctionne que dans des documents de type HTML ou CSS. Chaque abréviation correspond à une série de chaînes de caractères que l’on valide par la touche de tabulation du clavier.
Pour le mettre en évidence, créez un nouveau document, puis Ctrl Shit P, tapez HTML et validez Set Syntax HTML…
Saisissez le caractère ! Et Tabulez… De ! Nous passons à :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
De plus, nous nous retrouvons avec le mot Document en surbrillance et le curseur prêt à recevoir notre saisie. Donnez donc un titre au document… cela fait, appuyez à nouveau sur la touche de tabulation… nous basculons au sein de la balise <body>. Cool non ?
Les abréviations
Les possibilités d’abréviations sont nombreuses, que l’on soit en train d’écrire du HTML ou du CSS, cela nous surprend toujours.
Pour du HTML, essayez par exemple les abréviations suivantes (pensez à tabuler juste après l’abréviation) :
header>h1{Titre}+h2{sous titre}+nav>ul>(li>a[href="lien-$$.php"]{Menu $$})*3
ou
header>nav[role="navigation"]^aside+main[role="main"]>(article>h1{titre d'article}+(section>h2{titre de section}+p>lorem)*3)*2^footer
Bien sûr, tous ces fragments de code peuvent être aussi bien stockés dans des notes (pour être réutiliser en fonction des projets) ou écrits à la volée en fonction de nos besoins…
Quoi qu’il en soit, ils ne sont là qu’à titre d’exemple, pour montrer la facilité avec laquelle il est possible de rapidement brosser des maquettes et autres prototypes.
Aller plus loin
Pour aller plus loin et explorer l’ensemble des possibilités, autant en HTML qu’en CSS, il est conseillé de s’orienter vers la documentation et la fameuse page des cheat-sheet.
2 réponses
[…] Emmet […]
[…] du webmaster. On a vu l’éditeur de code, les divers packages qu’on peut lui associer dont Emmet, et l’on vient de survoler Sass, compass, breakpoint et susy… nous pouvons dire que […]