1. HTML и CSS
  2. 5 советов для работы с Emmet

5 советов для работы с Emmet

Emmet — плагин для текстовых редакторов, который позволяет быстрее писать HTML и CSS-код.

Проверить данный плагин можно на сайте jsfiddle.net, для этого надо написать строку и нажать на Tab.

1. Сгенерировать тег

Чтобы сгенерировать тег, надо просто набрать текст и вызвать команду Emmet. Текущий текст преобразится в открытый и закрытый тег.

p     => <p></p>
div   => <div></div>
a     => <a href=""></a>
input => <input type="text">

Также можно сгенерировать несколько тегов через символ >.

ul>li =>

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

2. Класс и ИД

Если к строке добавить .class или #id, то текст преобразится в тег с указанным классом или ИД.

div.post        => <div class="post"></div>
div#post-3      => <div id="post-3"></div>
div.post#post-3 => <div class="post" id="post-3"></div>

3. HTML-страница по умолчанию

Можно сгенерировать HTML-страницу по умолчанию. Для этого надо набрать символ ! и выполнить команду Emmet.

! =>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  
</body>
</html>

4. Сгенерировать текст

Когда надо сгенерировать текст, то можно использовать команду lorem{число слов}.

lorem2  => Lorem ipsum.
lorem4  => Lorem ipsum dolor sit.
lorem10 => Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, atque!

5. CSS

Emmet также работает с CSS.

m10 => margin: 10px;
p10 => padding: 10px;

fz16  => font-size: 16px;
fw700 => font-weight: 700;

ta  => text-align: left;
tar => text-align: right;
tac => text-align: center;