Что такое плагин emmet

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

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

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

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

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

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

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

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

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

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

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

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

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

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

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

Квадратные скобки используются для атрибутов. Итак, a[href=#] выдаст следующее:

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

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

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

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Группировка

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

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

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

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

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

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

Значения

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

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

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

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

Вы уже знаете много интуитивных сокращений, таких как @f, который преобразуется в:

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

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

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

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

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

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

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

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

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

Градиенты

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

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

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

Lorem ipsum

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

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

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

Настройка

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

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

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

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

Источник

Ускоряем вёрстку, используя Emmet. Руководство по командам и возможностям

Оказывается, можно верстать много, а печатать мало!

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Emmet — бесплатный плагин для текстовых редакторов, который напоминает автоподстановку текста в смартфоне, но более функциональную. Скачать его можно по ссылке, выбрав нужную вам IDE или редактор кода. На сайте есть инструкции по установке (разделы Installation или How to install).

Emmet использует специальный синтаксис для сокращений: вы вводите несколько символов — начало названия тега или свойства, а программа предлагает самостоятельно дописать остальное, выбрав из выпадающего списка. Остаётся нажать Tab или Enter, и нужный вам код написан целиком.

Чтобы использовать Emmet, его нужно сначала освоить — это потребует немного усилий. Зато потом плагин сэкономит вам кучу времени и нервов, сделает вёрстку намного эффективнее. Так что давайте учиться!

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

В IT пришёл из наружной рекламы, где проработал с десяток лет. В Skillbox изучает веб-вёрстку. Увлекается археологией, диджеингом и плёночной фотографией.

Содержание

Установка

Emmet — это не отдельная программа, а дополнение, которое устанавливается в ваш редактор кода. Слушателям курса по веб-вёрстке мы рекомендуем использовать VSCode. В него Emmet уже встроен, и ничего не нужно делать дополнительно — просто бери и пользуйся.

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

Примечание: если вы используете какой-то другой редактор, то можете найти справку по установке на официальном сайте дополнения или в документации к вашему редактору.

Emmet на практике: пишем HTML

Теперь разберём, как использовать Emmet в ваших рабочих проектах.

Первое, что мы обычно делаем при создании HTML-разметки, — пишем базовую структуру, где объявляем тип документа, указываем язык страницы, кодировку, метатеги, заголовок и тело будущей интернет-страницы.

Создаём шапку документа в два клика

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Подключаем стили и скрипты

После создания шапки документа мы размещаем теги внутри — с указанием путей к стилям или скриптам. Используя Emmet, можно просто написать « link», а автоподстановка предложит не только тег целиком, но и разные варианты: там есть стили и CSS, и установка favicon, и многое другое.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Добавляем ссылки

Благодаря Emmet добавлять ссылки стало легко и приятно.

Пишем « a» и выбираем нужный вариант — простую гиперссылку, ссылку на номер телефона, электронную почту и так далее. Или можем уточнить тип, добавив после двоеточия нужное значение атрибута. Например, « a:tel».

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Вводим теги

Для того чтобы добавить тег, пишем его название и нажимаем Tab или Enter.

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

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Задаём классы и идентификаторы

Примечание. Если нужно задать класс или id для тега

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Используем группировку и вложенность

До этого мы разбирали самые простые возможности Emmet. Дальше начинается настоящая магия.

Синтаксис Emmet позволяет создавать сложные конструкции разного уровня вложенности всего из одной строки символов. Это немного похоже на математическое уравнение, потому что среди символов есть знаки сложения и умножения.

По отношению друг к другу элементы в HTML-разметке могут быть родительскими, дочерними и соседними. Рассмотрим на примерах, как их можно расположить и сгруппировать.

Пример 1. Соседние элементы

Знак « +» позволяет создать несколько соседних тегов — то есть расположенных на одном уровне.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Знак « *» повторяет элементы указанное количество раз.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Пример 2. Дочерние элементы

Символ « >» делает следующий за ним элемент дочерним по отношению к первому (вложенным, обёрнутым в первый). При этом Emmet не забывает о закрывающих тегах и отступах при форматировании. Ваш код сразу же структурирован и отформатирован.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Пример 3. Сгруппированные элементы

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

Представим, что нам нужно создать структуру простой страницы, состоящей из хедера, основной части и футера. При этом внутри хедера будет навигационная панель, реализованная в разметке как ненумерованный список. А блоки main и footer будут на одном уровне с header. Для этого header и его содержимое нужно взять в круглые скобки.

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

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Генерируем рыбу-текст

Простая, но полезная вещь. Например, для проверки вёрстки на переполнение.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Оформление стилей страницы. Работа с CSS

После того как мы создали HTML-страницу, переходим к описанию её внешнего вида — то есть к оформлению стилей. В CSS нет разметки или вложенности, как в HTML, — только селектор, свойство и значение. Но и в случае со стилями Emmet даёт ощутимый прирост эффективности.

Способы ввода сокращений

Все сокращения в CSS — это укороченные названия свойств. Здесь гораздо меньше правил, но при этом всё так же интуитивно понятно: набираем первую букву — появляется подстановка всего слова. А если свойство пишется через дефис, то набираем первые буквы каждого слова (слитно либо через дефис) и Emmet даёт подсказку.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Если свойства начинаются на одну и ту же букву или комбинацию букв, например, color и columns, то подобрать сочетания для каждого из них — дело нескольких секунд. Для color будет достаточно « c».

Сочетание « fs» предложит нам font-style, а « fz» — font-size. Со временем у вас выработается стратегия и появится собственный словарь сокращений.

Ещё одна особенность автоподстановки в CSS: если вы используете часто повторяющуюся пару «свойство — значение», то Emmet предложит его в первую очередь. Если во время вёрстки вы несколько раз указали display: flex, то в следующий раз при нажатии « d» этот вариант будет первым в списке. Таким же образом при вводе свойства color в выпадающем списке будут перечислены все ранее указанные в файле стилей цвета, если они были заданы.

Направления полей и отступов

Свойства margin и padding набираются, соответственно, « m» и « p», а чтобы указать направление отступов, достаточно добавить t, b, l и r — top, bottom, left и right соответственно.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Уточнения свойств через двоеточие

В некоторых случаях для ввода пары «свойство — значение» лучше использовать двоеточие. Это конкретизирует сокращение.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Единицы измерения

Ряд свойств CSS не требует указания единиц измерения. К этим свойствам относятся, например, font-weight, line-height и opacity. Для описания свойства font-weight помимо ключевых слов ( normal, bold, bolder и lighter) используются условные единицы от 100 до 900, для opacity — диапазон от 0 до 1, для line-height — множитель.

При написании сокращения для таких свойств достаточно добавить нужное число.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Для тех свойств, где требуется указать единицы измерения, по умолчанию используются абсолютные пиксели ( px). Если вы хотите указать значение в процентах, то используйте символ « p». Для остальных единиц измерения полностью прописывается их название.

Чтобы записать дробное значение, достаточно поставить точку, не указывая перед ней 0.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Несколько значений после двоеточия

Бывает, что для описания свойства требуется несколько значений, которые пишутся через пробел. Чаще всего это встречается при использовании полей и отступов.

И для такого случая у Emmet есть изящное решение: если единица измерения — пиксели, то пишем их через дефис (то же касается и auto). Проценты указываем, используя p. Другие единицы измерения ( em, rem, wh, wv и так далее) пишем полностью без пробелов.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Частный случай — указание цвета с прозрачностью.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Здесь всё просто: в конце сокращения ставится восклицательный знак.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Подытожим

Умение использовать Emmet — одно из слагаемых успеха веб-разработчика наряду со знанием горячих клавиш, кодстайла, тегов и свойств.

Создайте для себя «словарь сокращений» Emmet и выучите основные комбинации. Это увеличит скорость написания кода, и вы станете квалифицированным верстальщиком. Если нужна шпаргалка по всем сокращениям, её можно найти на сайте разработчиков дополнения.

обложка: Катя Павловская для Skillbox Media

Источник

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

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

У Emmet нет предопределенного набора имен тегов, вы можете написать любое слово и преобразовать его в тег: div →

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

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

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

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

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

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

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

Повторение

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

Группировка

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

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

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

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

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

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

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

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

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

Для разделения атрибутов используется пробел.

Если не указано значение атрибута, то его значением станет пустая строка с меткой для табуляции (если ваш редактор поддерживает метки табуляции).

Можно использовать одинарные и двойные кавычки для указания значений атрибутов.

Если значение атрибута не содержит пробелов, то его не обязательно заключать в кавычки.

Нумерация

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

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

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

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

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

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

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

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

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

touch settings.json && touch snippets.json

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

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

Источник

Опыт работы с Emmet: ускоряем вёрстку в разы

Владимир Матасов, выпускник курса Skillbox по веб-вёрстке, рассказал о своём опыте работы с плагином Emmet. Также подготовил инструкции по основным возможностям и командам для начинающих верстальщиков.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Привет, Хабр! Когда я только решил самостоятельно изучать вёрстку, то понял, что это будет долгий путь с большим количеством новой информации и практики.ну

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

В это же время я поступил на курс по веб-вёрстке. Это сэкономило время на проверку всех советов, какие я нашёл в интернете. Преподаватели дали рекомендации по инструментам, которые сами проверили, в том числе несколько плагинов для редакторов кода.

Вариантов было много, можно было бы сравнить, составить табличку с плюсами и минусами, но мой путь в изучении вёрстки быстро привёл меня к редактору VSCode, а в него уже встроен плагин Emmet. Выбор сделан, мой подход в веб-вёрстке изменился, решил проблему, поэтому я расскажу, как работаю с Emmet.

Установка

Для тех, кто ещё совсем не знаком с плагинами, я начну с того, что это такое. Emmet — бесплатный плагин для текстовых редакторов. Напоминает автоподстановку текста в смартфоне, но более функциональную, сокращающую время написания рутинной разметки. Вы вводите несколько символов — начало названия тега или свойства, а программа предлагает самостоятельно дописать остальное, выбрав из выпадающего списка. Остаётся нажать Tab или Enter, и нужный вам код написан целиком.

Скачать плагин можно на официальном сайте. Хорошо, если вы уже определились с IDE или редактором кода. Нажимаете на картинку нужного редактора и вас перекинет на страницу с инструкцией.

Emmet на практике: пишем HTML

Я поделюсь своим опытом, как сейчас использую Emmet при вёрстке.

Первое, с чего начинаю создание HTML-разметки, — пишу базовую структуру, где объявляю тип документа, указываю язык страницы, кодировку, метатеги, заголовок и тело будущей интернет-страницы.

Создаём базовую структуру HTML-разметки

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

Сначала я использовал долгий вариант: набирал «html» и в выпадающем списке выбирал «html:5». Потом перешёл на более экономичный способ: набираю в редакторе «!» и нажимаю Tab, можно нажать Enter, тоже работает. Итог обеих манипуляций одинаковый: Emmet вставит скелет HTML-документа.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Подключаем стили и скрипты

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Добавляем ссылки

Ничего сложного в указании ссылок нет, но благодаря Emmet мне стало легко и приятно их добавлять.

Пишу «a» и выбираю нужный вариант — простую гиперссылку, ссылку на номер телефона, электронную почту и так далее. Или можно уточнить тип, начиная вводить после двоеточия значение атрибута. Например, «a:tel».

Вводим теги

Когда я только начинал пробовать себя в вёрстке, то печатал всё – от « », затем составлял себе шпаргалки с готовыми тегами и копировал их. Чуть далее станет понятно, почему эти способы недостаточно хороши. Сейчас, с плагином, всё просто: пишу название тега и нажимаю Tab или Enter.

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

Некоторые теги Emmet всё же не добавляет. Например, на момент написания этой статьи, не подставляется тег «figcaption». Кто знает, в чём он провинился.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Задаём классы и идентификаторы

Я показал, как вводить теги, а теперь усложним этот процесс. Часто нужно указать класс или id. Делается это сразу при вводе тега. После ввода названия тега, без пробелов, добавляю символы «.» или «#», пишу название класса или идентификатора, на выходе получаю оформленный тег.

Частный случай, когда нужно задать класс или id для тега

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Если вы знакомы с css-селекторами вида section#about.red, то возможно уже обратили внимание на схожесть синтаксиса. Дальше будет интересней – Emmet практически полностью повторяет правила по которым формируются обычные селекторы. Поэтому барьеры входа при изучении Emmet ещё меньше, не надо учить новый синтаксис, используем тот, что есть в css.

Используем группировку и вложенность

До этого я показал самые простые возможности Emmet, которые использую. Сейчас начинается настоящая магия.

С помощью синтаксиса Emmet легко создаю сложные конструкции разного уровня вложенности всего из одной строки символов. Это немного похоже на css-селекторы со знаками сложения и умножения.

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

Пример 1. Соседние элементы

Знак «+» создаст несколько соседних тегов, расположенных на одном иерархическом уровне.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

А если я хочу повторить элемент 3 раза? Ответ: да очень просто – добавим знак умножения, и вуаля!

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Пример 2. Дочерние элементы

Символ «>» делает следующий за ним элемент дочерним по отношению к первому, вложенным, обёрнутым в первый. При этом Emmet не забывает о закрывающих тегах и отступах при форматировании, код будет структурирован и отформатирован.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Пример 3. Сгруппированные элементы

Представим, что нужно создать структуру простой страницы, состоящей из шапки, основной части и подвала. При этом внутри шапки будет навигационная панель в виде маркированного списка без нумерации. А блоки main и footer будут на одном уровне с header.

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

Всё это записываю одной строкой, а на выходе получаю девять. Такая магия с вложенностями и группировками.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Бонусный уровень: генерируем рыбу-текст

Когда я только начинал заниматься вёрсткой, то читал много мнений: это хорошо, то плохо. Про рыбу-текст пишут разное. Но для меня это полезная вещь, например, для проверки вёрстки на переполнение.

Если нужен текст на русском языке, то вводим «loremru».

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Emmet для CSS

Следующая задача для верстальщика после создания HTML-страницы, описать её внешний вид, для этого оформляем стили. В CSS нет разметки или вложенности, как в HTML, — только селектор, свойство и значение. Но и в случае со стилями Emmet даёт ощутимый прирост эффективности.

Способы ввода сокращений

В работе с CSS используются сокращённые названия свойств. Здесь меньше правил, с некоторым опытом всё становится интуитивно понятным и привычным: набираем первую букву — появляется подстановка всего слова.

Если название свойства составное, тогда слитно либо через дефис набираем первые буквы каждого слова и Emmet подскажет.

/* Введи и проверь: */.example <
ff
f-f
>

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Если свойства начинаются на одну и ту же букву или комбинацию букв, например, color и columns, то подобрать сочетания для каждого из них — дело нескольких секунд. Для color будет достаточно «c».

Некоторые сочетания очевидные, например, «fs» предложит нам font-style, но есть и сокращения, к которым надо привыкнуть: «fz» — font-size. Мне понадобилось некоторое время, чтобы выработать стратегию и собственный словарь сокращений.

Ещё одна особенность автоподстановки в CSS: если используешь часто повторяющуюся пару «свойство — значение», то Emmet предложит его в первую очередь. Если во время вёрстки несколько раз указать display: flex, в следующий раз при нажатии «d» этот вариант будет первым в списке.
Таким же образом при вводе свойства color в выпадающем списке будут перечислены все ранее указанные цвета.

Направления полей и отступов

Отдельно скажу про свойства margin и padding, они набираются, соответственно, «m» и «p», чтобы указать направление отступов, достаточно без пробела или через дефис добавить t, b, l и r — обозначающие top, bottom, left и right. И без пробела добавляем значение отступа.

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Уточнения свойств через двоеточие

Для ввода пары «свойство — значение» я использую двоеточие в случаях, когда значение указывается буквами, например, цвет. Это конкретизирует сокращение.

/* Введи и проверь: */.example <
c:red
>

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Единицы измерения

В этом направлении есть несколько правил. Ряд свойств CSS очень удобные в работе и не требуют указания единиц измерения. К этим свойствам относятся, например, font-weight, line-height и opacity. Для описания свойства font-weight помимо ключевых слов normal, bold, bolder и lighter можно использовать условные единицы от 100 до 900, для opacity — диапазон дробных чисел от 0 до 1, для line-height — любой множитель, чаще всего в диапазоне от 1.1 до 2.

/* Введи и проверь: */.example <
fw400
op.5
lh1.25
>

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Для тех свойств, где могут быть указаны разные единицы измерения, по умолчанию используются абсолютные пиксели (px). При этом нужно указать только число.

Но если мне захотелось указать значение в процентах, тогда использую символ «p». Для остальных единиц измерения прописываю их название.

Чтобы записать дробное значение, достаточно поставить точку, не указывая перед ней 0.

/* Введи и проверь: */.example <
fz15
mt45
pl20p
t.25rem
h5vh
>

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Несколько значений после двоеточия

Бывает, что для описания свойства требуется несколько значений, которые пишутся через пробел. Чаще всего встречается при использовании полей и отступов.

И для такого случая у Emmet есть изящное, на мой взгляд, решение: если единицы измерения пиксели или auto, пишем значения свойства через дефис. Проценты указываем, используя p. Другие единицы измерения (em, rem, wh, wv и так далее) пишем полностью без пробелов.

/* Введи и проверь: */.example <
m10-20
m22-55-4p
p25-55p4rem2vh
p0-a
>

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Не меньше мне нравится использовать частные случаи, например, указание цвета с прозрачностью.

/* Введи и проверь: */.example <
cra
>

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Что такое плагин emmet. Смотреть фото Что такое плагин emmet. Смотреть картинку Что такое плагин emmet. Картинка про Что такое плагин emmet. Фото Что такое плагин emmet

Подытожим

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

Создайте для себя «словарь сокращений» Emmet и выучите основные комбинации. Это увеличит скорость написания кода, и со временем вы станете более квалифицированным верстальщиком. Если нужна шпаргалка по всем сокращениям, её можно найти на сайте разработчиков дополнения.

На курсе «Веб-вёрстка» вы познакомитесь со стандартами Web 2.0, научитесь работать с макетами и форматировать код, освоите адаптивную вёрстку, а по итогу — сможете создавать быстрые и удобные сайты, которые точно понравятся пользователям. Посмотреть программу и записаться по ссылке.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *