Плагин emmet sublime text 3. Плагин Emmet для Sublime Text. В каких случаях стоит использовать Emmet

Emmet (предыдущее название - Zen Coding) - это набор плагинов для различных популярных текстовых редакторов, используемых для скоростного написания HTML и CSS кода. Синтаксис Emmet довольно прост и не требует больших усилий со стороны разработчика для его изучения, в то же время использование этого инструмента позволяет ускорить процесс написания верстки в несколько раз.

Основные операции в Emmet

Итак, для написания HTML в Emmet используются 12 типов селекторов:

  • # - создает атрибут id
  • . - создает атрибут class
  • - создает любые другие атрибуты, в том числе и пользовательские
  • > - делает переход на один уровень ниже
  • + - создает соседние элементы на том же уровне
  • ^ - делает переход на уровень вверх
  • * - умножает элементы
  • $ - заменяется числом, каждый раз увеличивающимся на единицу
  • $$ - то же самое, только двухзначное
  • {} - добавляет текстовое содержимое элементам
  • () - группирует элементы
  • : - используется для некоторых элементов, таких как , , и др., и задает для них атрибуты

Рассмотрим на примерах.

Для того, чтобы создать один элемент с атрибутами class и id, необходимо написать:

Div#content.column

После набора этой строки нажимаем клавишу Tab (в Notepad++ клавиши Ctrl+Alt+Enter) и получаем результат:

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

Input

Результат:

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

Input:text

или еще короче:

Результат:

Аналогично задаются типы: hidden (h), search, email, url, password (p), datetime, datetime-local, date, month, week, time, number, range, color, checkbox (c), radio (r), file (f), submit (s), image (i), reset, button (b).

Таким же образом можно задавать атрибуты тегов метаданных и . Вот так можно подключить внешний css-файл:

Link:css

Результат:

Остается только исправить значение href.

Файлы.js подключаются аналогично:

Script:src

получаем:

Селекторы > и + создают, соответственно, дочерние и соседние элементы, а селектор ^ позволяет подниматься в иерархии на один уровень. Также есть возможность умножать элементы с помощью знака *. Например, следующая строка создаст список с пятью пунктами:

Если необходимо добавить тегам текстовое содержимое, нужно использовать фигурные скобки, например, так:

Div#dialog>p>span{text}

Результат:

Text

В Emmet есть еще одна интересная возможность: он позволяет добавлять нумерацию, например, атрибутов множественных элементов с помощью знака $. Нумерация начинается с единицы. Это может оказаться полезным, если, например, необходимо создать большое число элементов с названиями классов, различающимися только цифрой на конце, или выпадающий список, у пунктов которого атрибут value должен нумероваться с единицы:

Select>option*10

Результатом выполнения в данном случае будет , содержащий 10 тегов со значениями атрибута value от 1 до 10.

Для сложных конструкций можно применять группировку элементов, используя круглые скобки. Однако эта возможность существует не во всех редакторах, например, она не поддерживается расширением Web Essentials 2012 для Visual Studio.

Шаблоны HTML

Emmet также предоставляет возможность создавать разметку с использованием различных шаблонов HTML, наиболее интересный из них - html:5. Такая команда даст следующий результат:

Document

Условные комментарии

С помощью команд cc:ie и cc:noie можно добавить условные комментарии. Команда cc:ie выдает разметку, код внутри которой будет распознаваться только Internet Explorer, cc:noie, наборот, генерирует комментарии, содержимое которых будет доступно только всем остальным браузерам. Результат выполнения первой:

и второй:

Сокращенные конструкции

Существует также несколько сокращенных конструкций для создания таблиц и списков: table+, ul+, ol+, dl+, select+. Результаты их выполнения будут такими:

Оборачивание в аббревиатуру

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

  • установить курсор на тот тег, который должен быть обернут, либо на текст, который должен быть помещен в новый тег,
  • затем открыть диалоговое окно этой команды нажатием клавиш Ctrl+Shift+G в Sublime Text 2 (здесь это будет командная строка внизу экрана) или Ctrl+Shift+Alt+Enter в Notepad++
  • и написать там соответствующую аббревиатуру Emmet.

Например, у нас существует следующая разметка:

Необходимо создать внутри div новый элемент div с классом wrap и поместить в него существующий параграф с текстом. Устанавливаем курсор внутри тега

Или даже закрывающего тега

, открываем диалог и пишем там:

Div.wrap

Результат будет таким:

Подобным образом можно оборачивать не только отдельные элементы, но и множественные, при этом даже необязательно, чтобы они были одинаковыми. Для этого нужно выделить тот набор элементов, в котором каждый элемент должен быть обернут, и в окне команды с помощью селектора * указать, какой элемент обертки нужно размножить. Например, есть div, в котором находится несколько параграфов:

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

  • списка