Emmet html что это

Повышение скорости написания кода: Emmet и его использование в VSCode

Emmet — это утилита для текстовых редакторов, которая упрощает и повышают скорость написания кода. Первоначально слово «Emmet» означало муравей — маленькое насекомое, которое может нести в 50 раз больше своего веса. Чтобы использовать Emmet, нужно скачать и установить плагин для используемого текстового редактора. Список всех плагинов доступен на официальном сайте. Если вы используете Visual Studio Code, то устанавливать плагин не нужно, он уже встроен.

Аббревиатуры

Аббревиатуры — это специальные выражения, которые преобразуются в структурированный блок кода. Во многих редакторах также создаются метки табуляции, по которым вы можете быстро перемещаться между важными местами сгенерированного кода с помощью клавиши Tab.

У Emmet нет предопределенного набора имен тегов, вы можете написать любое слово и преобразовать его в тег: div → , foo →​ и так далее. Преобразование происходит по нажатию клавиши. Обычно это клавиша Tab. В VSCode, чтобы выполнять преобразование по нажатию клавиши Tab, добавьте следующую настройку:

Создание базовой структуры html

Для создания базовой структуры html напишите символ ! и нажмите клавишу Tab. В результате файл заполнится следующим содержимым:

Операторы вложенности

Операторы вложенности используются для позиционирования элементов внутри сгенерированного дерева.

Дочерний элемент

Оператор > позволяет вкладывать один элемент в другой:

Соседний элемент

Оператор + позволяет разместить элементы рядом друг с другом на одном уровне:

Повторение

Оператор * позволяет определить, сколько раз должен выводиться элемент:

Группировка

Круглые скобки позволяют выделить в аббревиатуре отдельные поддеревья:

Вы можете вкладывать группы друг в друга и повторять их с помощью оператора умножения:

Атрибуты операторов

Вы можете указать атрибуты для выводимых элементов.

Указание класса и id

Оператор . позволяет указать класс. Оператор # предназначен для указания id:

Произвольные атрибуты

Квадратные скобки позволяют задавать элементу произвольные атрибуты:

td[title=»Hello world!» colspan=3] →

Произвольные атрибуты имеют следующие особенности:

1. Для разделения атрибутов используется пробел.
2. Если не указано значение атрибута, то его значением станет пустая строка с меткой для табуляции (если ваш редактор поддерживает метки табуляции).
3. Можно использовать одинарные и двойные кавычки для указания значений атрибутов.
4. Если значение атрибута не содержит пробелов, то его не обязательно заключать в кавычки.

Нумерация

Оператор $ позволяет создавать нумерацию. Для этого поместите данный оператор после имени элемента, имени атрибута или значения атрибута:

Оператор $ можно поместить в любом месте имени:

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

Начальное значение и направление нумерации

Модификатор @ позволяет изменить начальное значение и направление нумерации (по возрастанию или убыванию). Чтобы изменить направление нумерации, добавьте модификатор @- после оператора $ :

Чтобы изменить начальное значение счетчика, добавьте модификатор @N к оператору $ :

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

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

Фигурные скобки позволяют добавить текст в элемент:

Неявные имена тегов

Во многих случаях можно не писать имя тега. Например, вместо div.content вы можете написать .content , что преобразуется в . Emmet смотрит на родительский тег каждый раз, когда вы расширяете аббревиатуру без имени тега. Если родительcкий элемент является блочным, то будет выбрать тег div , в противном случае — span . При этом есть несколько исключений:

1. li для ul и ol .
2. tr для table , tbody , thead и tfoot .
3. td для tr .
4. option для select и optgroup .

Генератор «Lorem Ipsum»

Аббревиатуры «lorem» и «lipsum» генерируют случайный текст. Каждый раз, когда вы выполняете преобразование данных аббревиатур, генерируется текст из 30 слов, разбитый на несколько предложений.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Et hic incidunt repellat, quos veritatis a tenetur deserunt accusantium ab ad adipisci ex rerum distinctio corrupti omnis asperiores, numquam exercitationem sapiente.

Вы можете указать количество генерируемых слов. Например, lorem10 сгенерирует текст из 10 слов. Также, вы можете использовать оператор повторения * , чтобы создать несколько элементов со случайным текстом:

• Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, temporibus.
• Earum totam eius repudiandae sit optio, consectetur ipsum officiis enim?
• Ex, molestias. Minima ducimus quaerat et earum commodi natus autem?

Добавление аббревиатур и фрагментов

Некоторые аббревиатуры преобразуются в элементы с предустановленными атрибутами. Список таких аббревиатур для различных языков вы можете посмотреть в официальном репозитории в каталоге snippets. Например, аббревиатуры для html находятся в файле html.json.

Способ добавления аббревиатур вы можете узнать в документации плагина, который используете в текстовом редакторе. Если используется Visual Studio Code, то вам нужно создать файл snippets.json . Таких файлов может быть несколько, например, один с глобальными настройками, а другой с локальными на уровне проекта. Затем, в файле настроек VSCode, добавьте параметр emmet.extensionsPath , содержащий массив путей к каталогам, содержащим файл snippets.json . Рассмотрим на примере: создайте каталог .vscode в текущем проекте. В каталоге .vscode создайте файлы settings.json и snippets.json . Вот как это сделать через терминал:

В файл settings.json добавьте следующую настройку:

В файле snippets.json для каждого языка записываются его псевдонимы и фрагменты. На данный момент в VSCode используется Emmet 2.0. В данной версии аббревиатуры и фрагменты задаются через один параметр snippets . Создадим несколько аббревиатур для html и css :

Подробности создания аббревиатур и фрагментов в VSCode можно найти в официальной документации.

Источник

Прощай, Zen Coding. Привет, Emmet!

Еще в 2009 году, Сергей Чикуёнок опубликовал статью, в которой представил новый способ написания HTML и CSS кода. Этот революционный плагин, назывался Zen Coding, он помогал многим разработчикам на протяжении многих лет и в настоящее время вышлел на новый уровень.

Emmet, ранее известный как Zen Coding, является самым производительным и экономным во времени плагином для текстового редактора. Простые сокращения мгновенно расширяются в сложные фрагменты кода, Emmet превратит вас в более продуктивного разработчика.

Для тех, кто предпочитает смотреть, а не читать, вот видео любимых трюков автора.

Как это работает?

Посмотрим правде в глаза: написание HTML-кода требует времени, со всеми тегами, атрибутами, кавычками, скобками и так далее. Конечно, в большинстве текстовых редакторов есть подсказки, которые сильно помогают, но все равно придется много печатать. Emmet мгновенно преобразовывает простые аббревиатуры в полноценные блоки кода.

HTML аббревиатуры

Инициализаторы

Подготовка к работе с новым HTML документом занимает менее чем секунду. Просто введите ! или html:5, нажмите «Tab», и вы увидите HTML5 doctype с несколькими тегами и отправной точкой для вашего приложения.

• html:5 или ! для HTML5 doctype
• html:xt для XHTML transitional doctype
• html:4s для HTML4 strict doctype

Легко добавить классы, IDы, текст и атрибуты

Поскольку синтаксис Emmet для описания элементов похож на CSS селекторы, привыкнуть к нему очень легко. Попробуйте объединить название тега с идентификатором (например, p#desc).

Кроме того, вы можете комбинировать классы и идентификаторы. Например, p.bar#foo выведет:

Теперь давайте посмотрим, как указать содержимое и атрибуты для HTML элементов. Фигурные скобки используются для содержания. К примеру, h1 преобразится в:

Вложенность элементов

Используя вложенные сокращения, вы можете построить целую страницу, используя всего одну строку кода. Во-первых, дочерний селектор, в лице >, позволяет вкладывать элементы. Селектор соседних элементов, в лице +, позволяет размещать элементы рядом друг с другом, на том же уровне. Наконец, новый оператор перехода на уровень выше, в лице ^, позволяет перейти по дереву элементов вверх на один уровень.

Группировка

Чтобы эффективно использовать вложения не превращая их в запутанный беспорядок операторов, вам нужно сгруппировать несколько кусков кода. Это как математика — нужно просто использовать скобки вокруг определенных частей.
Например, (.foo>h1)+(.bar>h2) преобразится в:

Неявные имена тегов

Чтобы объявить тег с классом, просто введите div.item, сокращение преобразуется в .
В прошлом, вы могли бы опустить имя тега div, так что, просто нужно было ввести .item, и он бы генерировал . Теперь Emmet умнее. Он проверяет имя родительского тега каждый раз, когда вы разворачиваете сокращение с неявным именем. Так что, если вы объявляете .item внутри

, он будет генерировать вместо . 

 

Вот список всех неявных имен тегов: 

  
li для ul и ol
  
tr для table, tbody, thead и tfoot
  
td для tr
  
option для select и optgroup



Умножение

Вы можете определить, сколько раз элемент должен быть выведен с помощью оператора *. 
Например, ul>li*3 превратится в: 

Нумерация

Как на счёт комбинации оператора умножения и нумерации? Просто поставьте оператор $ в конце названия атрибута или элемента и будем вам счастье! Например ul>li.item$*3 превратится в:

CSS аббревиатуры

Значения

Emmet предназначен для упрощения написания не только HTML, но и CSS кода. Допустим, вы хотите задать ширину. Сокращение w100 превратится в:

Значение px ставится по умолчанию. Другие единицы измерения используют свои символы. К примеру h10p+m5e:

Дополнительные опции

У некоторых свойств — таких как background-image, border-radius, font, @font-face, text-outline, text-shadow — есть некоторые дополнительные варианты, которые вы можете активировать при помощи знака +. Например, @f+ произведет:

Автоматический поиск

Модуль CSS использует автоматический поиск, чтобы найти неизвестные сокращения. Так, каждый раз, когда вы ищите неизвестное сокращение, Emmet попытается найти самое близкое значение. Например, ov:h, ov-h, ovh и oh произведет то же самое:

Приставки браузеров

CSS3 крут, но вендорные префиксы — реальная боль для всех нас. Теперь уже нет, Emmet нам поможет.
Например, trs будет преобразовано в:

-webkit-transform: ; -moz-transform: ; -ms-transform: ; -o-transform: ; transform: ; 

Также вы можете приписать свои префиксы. Просто используйте приставку —. Так, -super-foo преобразится в:

-webkit-super-foo: ; -moz-super-foo: ; -ms-super-foo: ; -o-super-foo: ; super-foo: ; 

Что, если вы не хотите все те приставки? Нет проблем, просто укажите первые буквы их названий.
Например, -wm-trf преобразуется в:

-webkit-transform: ; -moz-transform: ; transform: ; 

Градиенты

Говоря о раздражающих особенностях CSS3, мы не можем забыть градиенты. Все те сложные выражения, что вы писали вручную, можно заменить на одну аббревиатуру.
К примеру lg(left, #fff 50%, #000) преобразуется в:

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000)); background-image: -webkit-linear-gradient(left, #fff 50%, #000); background-image: -moz-linear-gradient(left, #fff 50%, #000); background-image: -o-linear-gradient(left, #fff 50%, #000); background-image: linear-gradient(left, #fff 50%, #000); 

Дополнительные возможности

Lorem ipsum

Забудьте о сторонних сервисах, которые производят текст “Lorem ipsum”. Теперь вы можете сделать это быстро в своем редакторе. Просто используйте lorem или lipsum для сокращения. Вы можете определить сколько слов требуется вывести. Например, lorem10 выведет:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus. 

Кроме того, lorem может быть присвоен к другим элементам. Например, p*3>lorem5 преобразуется в:

Lorem ipsum dolor sit amet.
 
Voluptates esse aliquam asperiores sunt.
 
Fugiat eaque laudantium explicabo omnis!
 

Настройка

1. Чтобы добавить Ваш собственный или обновить существующий отрывок, отредактируйте snippets.json.
2. Чтобы изменить поведение фильтров и действий Emmet, попытайтесь редактировать preferences.json.
3. Чтобы определить, как HTML или XML должны выполняться, отредактируйте syntaxProfiles.json.

И намного больше!

Это только вершина айсберга. Emmet имеет еще много других замечательных функций, таких как кодирование и расшифровка изображений data:URL, обновление размеров изображения и увеличение и снижение числа и т.д..
Посетите новый веб-сайт, удивительную документацию и удобную шпаргалку!

Поддерживаемые редакторы можно посмотреть на этой странице.

UPD. Огромное спасибо skaflock за помощь в исправлении ошибок.

Источник