Работа с Emmet (шпаргалка)

Что такое Emmet ?

Emmet — это плагин для редакторов кода позволяющий экономить ваше время при написании кода. Чаще всего плагин Emmet устанавливают на Sublime Text 3, но так же он есть для Breckets и Visual Studio.

О том где скачать Emmet и как установить данный плагин в Sublime text 3 и Breckets и Visual Studio можете прочесть в отдельных статьях.

Как работает Emmet   ? 

После того как вы установили данный плагин, вы сможете набирать сокращенные значения и по нажатию Tab эти значения будут превращаться в большие участки кода. Для примера создадим небольшую таблицу, наберем в редакторе:

table>(tr>td.header>)(tr>td.content+td.sidebar)>(tr>td.footer>)

Нажимаем tab и получаем следующее:

<table>    <tr>        <td class="header"></td>    </tr>    <tr>        <td class="content"></td>        <td class="sidebar"></td>    </tr>    <tr>        <td class="footer"></td>    </tr></table>

Таким образом мы намного сокращаем время разработки и делаем ее намного удобнее.

Думаю теперь понятно преимущество работы с Emmet. Давайте теперь рассмотрим как работать с этим плагином, его возможности и какие знаки что значат.

nav>ul>li

<nav>     <ul>         <li></li>     </ul> </nav>

div+p+bq 

<div></div><p></p><blockquote></blockquote>

(header>ul>li*2>a)+footer>p 

<div>    <header>        <ul>            <li><a href="https://glukam.net"></a></li>            <li><a href="https://glukam.net"></a></li>        </ul>    </header>    <footer>        <p></p>    </footer></div> 

ul>li*3

<ul>    <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>

#glukam <!-- или --> li#glukam

<div id="glukam"></div><!-- или --> <li id="glukam"></li>

.header li.menu p.class1.class2.class3

<div class="header"></div> <li class="menu"></li> <p class="class1 class2 class3"></p>

a[title="Твой IT друг" href="https://glukam.netglukam.net/old"]{наш сайт}

<a href="https://glukam.netglukam.net/old" title="Твой IT друг">наш сайт</a>

P{коронавирус уходи}

<P>коронавирус уходи</P>

На этом я заканчиваю нашу небольшую статью про эммет. На мой взгляд это самые основное что может пригодится в повседневном использовании плагина и заучивать остальные сокращения думаю нет смысла. Думаю это равноценно тому что выучить новый язык программирования. Но если вам мало, вы можете ознакомиться с технической документацией про Emmet на официальном сайте : https://docs.emmet.io/