Emmet в VS Code для HTML

Emmet — это бесплатный инструмент, напоминающий авто подстановку слов в вашем телефоне, позволяющий значительно ускорить работу при написании HTML и CSS кода. Давайте рассмотрим возможности Emmet в VS Code, для этого в статье будет приведено несколько примеров с использованием сокращений.

Emmet — это бесплатный инструмент, напоминающий авто подстановку слов в вашем телефоне, позволяющий значительно ускорить работу при написании HTML и CSS кода. Давайте рассмотрим возможности Emmet в VS Code, для этого в статье будет приведено несколько примеров с использованием сокращений.

Динамическое добавление текста в списки

Зачастую нужно наполнить блок текстом заполнителем. Используя Emmet в VS Code вы можете создавать HTML теги и заполнять их контентом с помощью lorem, рассмотрим на примере списков:

ul>li*3>lorem10

этот код развернется в:

<ul>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Consectetur adipiscing elit.</li>
  <li>Sed do eiusmod tempor.</li>
</ul>

Создание заголовков с нумерацией

В верстке страниц нужно задать размер шрифта и отступы для заголовков статей. Создадим быстро все шесть заголовков используемых в HTML. Воспользуемся символом $, который позволяет добавлять нумерацию к тексту или атрибутам:

h${Заголовок H$}*6

это приведет к следующему:

<h1>Заголовок H1</h1>
<h2>Заголовок H2</h2>
<h3>Заголовок H3</h3>
<h4>Заголовок H4</h4>
<h5>Заголовок H5</h5>
<h6>Заголовок H6</h6>

Генерация таблицы

Создание таблицы также можно сократить до небольшой строчки кода, выведя необходимое количество строк и столбцов:

table>tr*3>td*4

На выходе мы получим такую структуру:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Если вам нужно заполнить таблицу данными, воспользуйтесь инструментом на этом сайте Таблица HTML онлайн генератор

Комбинированные структуры

Можно также реализовать и более сложные конструкции DOM — дерева, посмотрите как этого можно достичь на примере следующей строки, заметьте что здесь добавлены круглые кавычки:

div.wrapper>(header>h1{Заголовок}+nav>ul>li*3)+(main>section*2>p{Содержимое})+footer>p{Подвал}

на выходе получится несколько секций с внутренними блоками:

<div class="wrapper">
  <header>
    <h1>Заголовок</h1>
    <nav>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <p>Содержимое</p>
    </section>
    <section>
      <p>Содержимое</p>
    </section>
  </main>
  <footer>
    <p>Подвал</p>
  </footer>
</div>

Списки с уникальными классами

Сокращение Emmet с использованием $@ позволит сгенерировать элементы с уникальными значениями:

ul>li.item-$@-*3

это позволит присвоить каждому элементу отдельный класс

<ul>
  <li class="item-1"></li>
  <li class="item-2"></li>
  <li class="item-3"></li>
</ul>

Настройка Emmet в VS Code

Можно создать собственный сниппет для последующего использования в проектах. Для примера создадим сниппет для вставки формы обратной связи. Откройте File > Preferences > User Snippets (Файл > Настройки > Пользовательские сниппеты), выберите html, вставьте следующий сниппет:

{
    "My Forms": {
        "prefix": "myForm",
        "body": [
            "<form action="">",
            "  <input type="text" placeholder="Ваше имя">",
            "  <input type="tel" placeholder="Ваш телефон">",
            "  <input type="email" placeholder="Ваш email">",
            "  <button type="submit">Отправить</button>",
            "</form>"
        ],
        "description": "Базовая форма для сбора контактов"
    }
}

Теперь при введении myForm будет выводить следующее:

<form action="">
  <input type="text" placeholder="Ваше имя">
  <input type="tel" placeholder="Ваш телефон">
  <input type="email" placeholder="Ваш email">
  <button type="submit">Отправить</button>
</form>

Если вы работаете с файлами, которые не имеют расширения .html, настройте Emmet для их поддержки.

"emmet.includeLanguages": {
  "plaintext": "html"
}

Полезные советы при работе с Emmet

• Воспользуйтесь сочетанем клавиш Ctrl+Space, чтобы открыть подсказки Emmet, или если сниппет не сработал автоматически.
• Комбинируйте сокращения для создания сложных структур.
• Экспериментируйте с настройками Emmet в VS Code, чтобы сделать работу максимально комфортной

С помощью сниппетов вы можете создать свои собственные шаблоны для любых часто используемых фрагментов кода, значительно ускорив свою работу.

Не пропустите эти статьи

Анимация details: два подхода на CSS и JavaScript

С помощью элемента details в HTML удобно реализовать раскрывающиеся блоки, такие как FAQ или аккордеоны.…

Как обрезать текст на CSS: техники и примеры

В процессе верстки блоков контента часто требуется соответствие внешнего интерфейса дизайну макета сайта. Это часто…

Как использовать псевдоэлементы с элементами input after и before

.Псевдоэлементы ::before и ::after часто используют для декорации элементов в html тегах, чтобы избежать нагромождения…

Условия cookie на сайте: как создать всплывающее окно с предупреждением

Как создать всплывающее окно о cookie на сайте с помощью JavaScript и соблюсти GDPR.