Cheat Sheet Emmet
Retrouvez ici les commandes indispensables
Présentation :
Fondamentalement, la plupart des éditeurs de texte vous permettent de stocker et de réutiliser couramment utilisé des morceaux de code, appelés « snippets» . Alors que les "snippets" sont un bon moyen d' accroître votre productivité, les implémentations ont un problème récurrents : vous devez définir l'extrait d'abord et vous ne pouvez pas les étendre dans l'exécution.
Emmet prend l'idée de "snippets" à un tout nouveau niveau : vous pouvez taper des balises CSS qui peuvent être analysés de façon dynamique, et produire un rendu en fonction de ce que vous tapez dans l'abréviation. Emmet est développé et optimisé pour les développeurs web dont le flux de travail dépend de HTML / XML et CSS , mais celui ci peut-être utilisé avec des langages de programmation.
Voici les exemples :
a{Click me} = <a href="">Click me</a>
p[title="Hello world"] = <p title="Hello world"></p>
nav>ul>li = <nav> <ul> <li> </li> </ul> </nav>
div+div<p<span+em^bq = </div></div> </div> </p></span></span></em></em></p> </blockquote></blockquote> </div>
ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
ul>li.item$*5
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>
div+p+bq
<div></div> <p></p> <blockquote></blockquote>
div>(header>ul>li*2>a)+footer>p
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>
.class1 <div class="class1"></div>
#id1 <div id="id1"></div>