Emmet горячие клавиши - краткие команды - шпаргалка

Сегодня нам обязательно надо поговорить о кратких командах в emmet...

Будем использовать программу sublime text 3, так как она очень прогрессивная.

Итак

Горячие клавиши или краткие команды emmet

Нужно сразу отметить порядок: вводим краткую форму записи и затем жмем клавишу Tab:

Итак, шпаргалка emmet:

"краткое сочетание" + Tab (в notepad мы настроили на Alt+Z);

1.

! - выведет краткую форму html документа;

Можно еще так: Html:5

Можно еще так: «html:xt» для XHTML и «html:4s» для HTML4.

2.

ul>li*5 - выведет 5 li, заключенных в ul;

div#goto или еще кратче #goto - выведет <div id="goto"></div>

div.goto или еще кратче .goto - выведет <div class="goto"></div>

3. ul>li*10>a{item$}

выведет это:

<ul>
    <li><a href="/">item1</a></li>
    <li><a href="/">item2</a></li>
    <li><a href="/">item3</a></li>
    <li><a href="/">item4</a></li>
    <li><a href="/">item5</a></li>
    <li><a href="/">item6</a></li>
    <li><a href="/">item7</a></li>
    <li><a href="/">item8</a></li>
    <li><a href="/">item9</a></li>
    <li><a href="/">item10</a></li>
</ul>

3. Можно группировать теги:

(div>p)+(span>em) 

выдасть такое:

<div>
    <p></p>
</div>
<span><em></em></span>

4. Можно создавать тег сразу с нужным нам классом:

div.class+div#id

 получаем:

 <div class="class"></div>
<div id="id"></div>

5. Вывод атрибутов:

div[title="Hello" myattr=3] 

даст такое:

<div title="Hello" myattr="3"></div>

6. Фигурные скобки создадут вложение:

h1{Заголовок} 

выдаст нам сразу:

<h1>Заголовок</h1>

Конечно, мне такое не особо интересно набирать, я бы сделал полегче, но знайте, что такой способ тоже есть.

7. Делаем рыбу из текста - это так называемый текстовый заполнитель Lorem

Пишем: Lorem5 - и выведется 5 разных слов, меняем 5 на 200 и вы увидите сразу 200 слов). Сказка.

Emmet для CSS

Плагин Emmet отлично справляется и с CSS:

например вводим: m100 и получаем:

margin: 100px