emmet

Emmet : le plugin incontournable pour tous les front-end dev

L’apprentissage du code, c’est un chose nécessaire mais relativement rapide à appréhender. Ce qui l’est souvent moins, c’est de pouvoir produire du code rapidement.

La productivité c’est finalement la combinaison de plusieurs facteurs indépendants les uns des autres :

  • vos connaissances techniques
  • le logiciel (et/ou les plugins) que vous utilisez pour coder
  • votre connaissance des raccourcis clavier
  • votre dactylographie

Pour coder rapidement et proprement, il faut maîtriser tout ça d’un coup. Dans cette liste, il n’y a finalement qu’un facteur sur lequel on n’a que peu d’emprise en formation : la vitesse de frappe et la connaissance de votre clavier.

Pour tout le reste, il est tout à fait possible d’acquérir tous les autres facteurs en formation.

Le plus facile et rapide à atteindre est sans aucun doute d’avoir le bon logiciel et les bons plugins installés sur sa machine pour générer du code plus rapidement. Pour ce faire, je vous recommande de choisir un bon éditeur front-end (comme SublimeText, Atom ou Brackets par exemple) et de l’équiper directement du plugin le plus utile qui peut équiper bon nombre d’éditeurs front-end : Emmet.

Ce plugin est disponible pour les logiciels suivants :

Emmet va augmenter votre productivité de plusieurs façons différentes par une série de raccourcis :

  • ! + tabulation : document de base avec doctype, html, head, body écrit pour vous
  • si vous écrivez le nom d’une balise + tabulation : écrit la balise ouvrante et fermante pour vous et place le curseur entre les 2
  • si vous écrivez nav>ul>li : vous avez une imbrication parfaite de li dans un ul et dans une nav
  • en réalité, vous pouvez combiner des sélecteurs css pour écrire de l’HTML (> , + , * , [attribut] , {texte dans la balise}), ça c’est la première vraie force d’Emmet, côté HTML.

Vous pouvez retrouver tous les raccourcis HTML ici.

Mais Emmet intervient aussi côté CSS de cette manière-ci par exemple :

  • pos:a : écrit position : absolute;
  • fl : écrit float : left;
  • d:b : écrit display : block;
  • mt100 : écrit margin-top:100px;
  • tac : écrit text-align:center;
  • en réalité, il existe donc une abréviation pour chaque propriété et valeur css sur cette page

Emmet va changer votre vie de dev front-end, essayez-le !

Publié le : 05/05/2015

Auteur : Olivier Céréssia

Catégories