June 7, 2022

Гайд по Emmet

Emmet - довольно классный инструмент, который помогает вам писать HTML очень и очень быстро. Это похоже на волшебство. Emmet - это не что-то новое, он существует уже много лет, и для каждого редактора есть плагин.

Всем, кто только начинает осваиваться в программирование эта статья точно пойдет на пользу!

В VS Code Emmet интегрирован "из коробки", и всякий раз, когда редактор распознает возможную команду Emmet, он покажет вам всплывающую подсказку.

Если то, что вы пишете, не имеет других интерпретаций, и VS Code считает, что это должно быть выражение Emmet, то оно будет показано непосредственно во всплывающей подсказке, достаточно красиво:

Тем не менее, я действительно не знала, как использовать его во всех его тонкостях, пока не начала исследовать и писать об этом)

Я хочу использовать его в своей повседневной работе, поэтому вот что я узнала:

Создайте HTML-файл с нуля

Напечатайте ! и вы получите базовый шаблон HTML для работы:

> и +

  • > означает ребенка
  • + означает элемент на том же уровне

Вы можете комбинировать их для выполнения более сложных разметок:

Level up

Используя ^ вы можете повысить уровень обратно с любого момента, когда вы использовали > для создания дочернего:

Вы можете использовать его несколько раз:

Применяем умножение

Любой тег может быть добавлен несколько раз с помощью *:

Группировка выражений

С умножением все начинает становиться немного сложнее. Что делать, если вы хотите умножить 2 элемента? Вы группируете их в круглые скобки ( ):

Атрибуты id и class

id и class, вероятно, являются наиболее часто используемыми атрибутами в HTML.

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

Вы можете добавить несколько классов:

Добавление уникального class или id

id должен быть уникальным на вашей странице в любое время.

class может быть повторен, но иногда вам нужен инкрементный класс для ваших элементов.

Вы можете сделать это с помощью $:

Другие атрибуты

Атрибуты, отличные от class и id, должны быть добавлены с помощью скобок []:

Вы можете добавить сразу несколько атрибутов:

Добавление контента

Конечно, вы также можете заполнить HTML-элементы содержимым:

Добавление инкрементного числа в разметку

Число обычно начинается с 1, но вы можете заставить его начинаться с произвольного числа:

Теги для заголовка страницы

Общие теги

Семантические теги

Теги для форм


На этом сегодня все, надеюсь эта статья поможет вам вывести скорость разработки на новый уровень 🔥

Не забывайте подписываться на телеграм канал!