Работа с 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=""></a></li>
            <li><a href=""></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>

# — присваивает ID

#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="glukam.net"]{наш сайт}
<a href="glukam.net" title="Твой IT друг">наш сайт</a>

{ } — текст

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

0
Автор: n1t

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *


CAPTCHA Image
Reload Image