Brackets c’est bien, avec Emmet c’est mieux

Emmet c’est quoi ? Emmet est une extension pour votre IDE qui va vous faire gagner un temps précieux. Vous pouvez l’installer sur divers IDE tel que Brackets, Eclipse, NetBeans, Sublime Text, NotePad++, … Une fois l’extension Emmet installée sur votre machine, vous allez pouvoir utiliser une syntaxe « raccourcie » pour générer des fragments de codes. […]

Emmet c’est quoi ?

Emmet est une extension pour votre IDE qui va vous faire gagner un temps précieux. Vous pouvez l’installer sur divers IDE tel que Brackets, Eclipse, NetBeans, Sublime Text, NotePad++, …
Une fois l’extension Emmet installée sur votre machine, vous allez pouvoir utiliser une syntaxe « raccourcie » pour générer des fragments de codes. Avec une ligne vous allez en générer de nombreuses.

Emmet comment ça marche ?

Rien de tel qu’un exemple pour comprendre le fonctionnement d’Emmet :

// Code a inscrire
div>ul.ma-class>li*3
// Résultat
<div>
<ul class= »ma-class »>
<li></li>
<li></li>
<li></li>
</ul>
</div>

// Code a inscrire
div>(header>nav>ul>li*3>a)+div.content{Lorem ipsum}+footer>p.adresse{5 rue xxx, 17000 LA ROCHELLE – Tél:05 04 03 02 01 – Email : contact@nexi.fr}
// Résultat
<div>
<header>
<nav>
<ul>
<li><a href= » »></a></li>
<li><a href= » »></a></li>
<li><a href= » »></a></li>
</ul>
</nav>
</header>
<div class= »content »>Lorem ipsum</div>
<footer>
<p class= »adresse »>5 rue xxx, 17000 LA ROCHELLE – Tél:05 04 03 02 01 – Email : contact@nexi.fr</p>
</footer>
</div>

// Code a inscrire
table>tr>td[title= »Lorem ipsum » class= »xxx »]*3
// Résultat
<table>
<tr>
<td title= »Lorem ipsum » class= »xxx »></td>
<td title= »Lorem ipsum » class= »xxx »></td>
<td title= »Lorem ipsum » class= »xxx »></td>
</tr>
</table>

// Code a inscrire
p>{Cliquez }+a{ici}+{ pour continuer}
// Résultat
<p>Cliquez <a href= » »>ici</a> pour continuer</p>

// Code a inscrire
ul>li.nom-class$*3
// Résultat
<ul>
<li class= »nom-class1″></li>
<li class= »nom-class2″></li>
<li class= »nom-class3″></li>
</ul>

// Code a inscrire
ul>li.nom-class$$$*3
// Résultat
<ul>
<li class= »nom-class001″></li>
<li class= »nom-class002″></li>
<li class= »nom-class003″></li>
</ul>

// Code a inscrire
lorem
// Résultat
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea laudantium adipisci non similique nihil, beatae autem provident molestias amet quae odio illo deserunt, ipsum ducimus, nulla cupiditate voluptas. Ullam, explicabo.

Exemple d’autres raccourcies clavier pour Emmet :

emmet-raccourci-clavier

  • Ctrl + Alt + -> ou Ctrl + Alt + <- pour passer d’un li à un autre
  • Ctrl + / pour mettre en commentaire (ou décommenter) une zone
  • Ctrl + K pour supprimer une balise (ouvrante ET fermante)
  • Shift + Ctrl + M pour faire passer un texte sur plusieurs lignes « inline »
  • Bref Emmet est le plugin à avoir au quotidien …

Source :


Cet article a été rédigé par Cédric le 20 novembre 2014 Mots clés : , , - Dans : Développement

Articles recommandés
Il arrive parfois que l’on est besoin de lire un fichier CSS. Malheureusement lire un fichier css compressé n’est pas simple. Voici donc un outil (en ligne) vous permettant de décompresser un fichier CSS très rapidement pour en améliorer la lecteur / recherche.Lire la suite

OU

Inscrivez-vous à la newsletter

Votre adresse email ne sera pas vendue à un tiers, elle ne sevira qu'aux envois des newsletters de Nexi Conseils. Vous pouvez vous désabonner à n'importe quel moment.
Conformément à la loi « informatique et libertés » du 6 janvier 1978 modifiée en 2004, vous bénéficiez d’un droit d’accès et de rectification aux informations qui vous concernent, que vous pouvez exercer en vous adressant à SARL NEXI CONSEILS - contact@nexi.fr - 09 64 32 29 90.

retour