Веб-разработчики всегда ищут новые способы для ускорения нашего процесса разработки. Один из лучших способов ускорить вашу разработку и стать более продуктивным — это выбрать правильную IDE для вашего кода. Я пробовал много IDE, но он, с которым я считаю себя наиболее продуктивным, с возвышенным текстом , потому что скорость, с которой я могу выполнять различные задачи.
Большая часть этой производительности обусловлена огромным количеством плагинов, доступных для IDE. В этой статье мы рассмотрим один из самых производительных плагинов для фронт-энда разработки под названием Emmet, ранее известный как Zen Coding .
Emmet — это плагин для экономии времени, который вы можете использовать в различных IDE, и он позволяет создавать комбинации ярлыков для быстрого создания HTML. Вы можете ввести несколько различных ярлыков, и он автоматически создаст HTML для вас.
Простым примером этого будет создание списка из 5 элементов списка, вместо того, чтобы вводить это.
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Все, что вам нужно сделать, это ввести ниже и нажмите вкладку, и HTML будет создан для меня.
ul>li*5
Вы можете делать подобные сокращения почти с любым элементом HTML, поэтому давайте сделаем что-то более сложное, чем список. Давайте создадим полную HTML-страницу с заголовком, телом, div-оберткой, div заголовка с панелью навигации, div содержимого с h1 и количеством абзацев, область боковой панели и div нижнего колонтитула.
Ниже приведена полная команда, которую мы будем использовать для создания этой базовой HTML-страницы.
html:5>div#wrapper>div#header>div.logo+ul.navigation>li*5>a{Item $}^^^+div#content>h1+p*4^div#sidebar>ul>li*5^^div#footer
Это выведет следующий HTML.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo"></div>
<ul class="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
<div id="content">
<h1></h1>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div id="sidebar">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Если вы не использовали Emmet до того, как эта команда не будет иметь особого смысла, давайте разберем ее и рассмотрим, как она создается.
Создание базовой HTML-страницы с помощью Emmet
Сначала мы начнем с создания типа документа HTML5, который выполняется в Emmet с помощью команды ниже. Это не только создаст HTML-тип документа, но также создаст теги head и body для вашей HTML-страницы.
html:5
Создать обертку Div
После создания HTML-страницы фокус будет установлен внутри тега body, где мы хотим разместить дочерний элемент DIV с идентификатором оболочки. Чтобы создать дочерний элемент в Emmet, мы используем select > , Emmet теперь поместит следующий элемент внутри предыдущего элемента. Следующий элемент будет div и будет использовать селектор CSS для идентификатора # и определять имя идентификатора.
html:5>div#wrapper
Создайте заголовок с логотипом и навигацией
Внутри div-оболочки мы собираемся добавить DIV для заголовка, затем DIV для логотипа и список пунктов меню, используемых для навигации по сайту.
Элемент header будет дочерним элементом DIV-оболочки, поэтому мы используем команду >, за которой следует заголовок div # , чтобы создать DIV с идентификатором заголовка. Внутри этого DIV мы собираемся создать логотип DIV, который снова будет использовать >, за которым следует div.logo . На этот раз вместо того, чтобы использовать #, чтобы добавить идентификатор, который мы используем . добавить имя класса в div.
Также внутри элемента заголовка мы собираемся добавить элемент списка навигации, который будет родственным элементом элемента логотипа внутри элемента заголовка, чтобы создать элемент родственного элемента, мы используем команду + с последующим ul.navigation> li * 5> a {Item $} . Это создаст элемент списка с именем класса навигации, дочерним элементом которого будет 5 раз внутри, и это будет якорный тег со словом Item в них.
html:5>div#wrapper>div#header>div.logo+ul.navigation>li*5>a{Item $}
Создать область содержимого
На нашей базовой странице мы собираемся создать область содержимого, которая будет расположена на том же уровне, что и заголовок DIV, но текущий фокус будет находиться внутри элементов списка навигации, поэтому нам нужно перейти вверх по дереву и получить вернуться на тот же уровень, что и заголовок DIV. Чтобы увеличить дерево DOM в Emmet, вы используете команду ^ , так как в данный момент мы находимся внутри элемента списка, нам нужно увеличить 3 элемента, чтобы вернуться на тот же уровень, что и заголовок DIV.
Затем мы можем создать наш родственный элемент в области содержимого ^^^ + div # content , область содержимого, скорее всего, будет использоваться для текста, такого как статья, поэтому мы можем поместить h1 вверху, за которым следует несколько тегов абзаца. Поскольку заголовок и абзацы находятся внутри содержимого DIV, мы использовали дочерний селектор > h1 + p * 4 .
html:5>div#wrapper>div#header>div.logo+ul.navigation>li*5>a{Item $}^^^+div#content>h1+p*4
Создать боковую панель
На том же уровне, что и DIV для содержимого, мы собираемся создать еще один DIV, который будет использоваться для содержимого боковой панели. В нем будет несколько элементов списка, чтобы мы могли быстро добавить ссылки или текст в этот раздел.
Как и в предыдущем заявлении, означающем, что мы находимся внутри содержимого DIV, нам нужно активизировать дерево с помощью ^, а затем создать боковую панель DIV с элементами списка внутри нее, аналогично тому, как мы делали раздел навигации, ^ div # sidebar> ul> li * 5 .
html:5>div#wrapper>div#header>div.logo+ul.navigation>li*5>a{Item $}^^^+div#content>h1+p*4^div#sidebar>ul>li*5
Создать нижний колонтитул
Наконец, мы можем создать DIV нижнего колонтитула, так как мы завершили последнюю команду внутри элемента списка на боковой панели, нам нужно перейти на два уровня, чтобы он находился на том же уровне, что и боковая панель DIV, и затем мы можем просто создать DIV с идентификатор нижнего колонтитула ^^ div # нижнего колонтитула .
html:5>div#wrapper>div#header>div.logo+ul.navigation>li*5>a{Item $}^^^+div#content>h1+p*4^div#sidebar>ul>li*5^^div#footer
Вывод
Это был просто базовый обзор использования Emmet, с ним можно сделать гораздо больше вещей, таких как сокращения CSS. Но, надеюсь, из этого примера вы поймете, как вы можете использовать это для быстрого создания структуры HTML-страницы с одной строкой сокращений.
Если вы хотите узнать больше о том, как использовать Emmet, ознакомьтесь с их документацией.