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;
Поддержать автора