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 :
- 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 : developpement, IDE, plugin - Dans : Développement