Emmet — представляет собой плагин, написанный для множества текстовых редакторов и сред разработки. Предназначение плагина — это ускорение набора кода HTML и CSS.

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

Как работает этот чудо-плагин?

Например, если набрать в Вашем любимом редакторе следующую команду

html:5

то, она преобразуется в такой код

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

Чтобы сработало преобразование, необходимо после набора аббревиатуры нажать Tab или сочетание клавиш Ctrl + E которое установлено по умолчанию.

Для более удобного отображения получаемого кода, можно вводить значения в консоли. Нажмите сочетание клавиш Ctrl + Alt + Enter появится строка, при вводе в которую, код будет формироваться у Вас на глазах.

Наглядный набор команд в Emmet

Применение на практике — инструкция

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

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

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

Синтаксис Emmet

Полный синтаксис сокращений Emmet можете посмотреть на официальном сайте

Установка плагина в тектовые редакторы

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

Установка Emmet в Sublime 2 и 3

Чтобы установить расширение в Sublime Text 3 необходимо выполнить несколько простых шагов. В Sublime3 в отличие от второй версии нет по умолчанию Package Control, поэтому нам сначала прийдется его установить. Для установки в Sublime2 первый пункт пропускаем.

  1. Жмем View -> Show console или в руссифицированной версии Вид -> Показать/Скрыть консоль
  2. Вставляем следующий код в консоль и жмем Enter
    import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
  3. Открываем Package Control нажав комбинацию клавиш — Ctrl + Shift + P или ищем во вкладках программы — Sublime text -> Preferences -> Package Control
  4. В открывшемся окне вводим Install Package, жмем Enter
  5. Вводим Emmet и выбираем его в выпавшем списке
  6. Ждем конца установки и перезагружаем редактор

Установка в Notepad++

  1. Кликаем по вкладке Плагины выбираем пункт Plugin Manager и жмем на Show Plugin Manager
  2. В открывшемся окне будут отображены все доступные для установки плагины, ищем в этом списке Emmet
  3. Ставим на против него галочку и жмем кнопку Install

Установка в Brackets

  1. Справа в окне редактора жмем на кнопку Менеджер расширений
  2. В открывшемся окне ищем строку поиска и вводим название нашего плагина
  3. Жмем кнопку Установить
  4. Сразу после установки можем пользоваться, нажав после введеных аббревиатур Tab

Как установить Emmet в Brackets

Если Emmet не работает

Проблем из за которых расширение может не функционировать не так много, основной является не правильный набор команд для раскрытия аббревиатур. Если не работает Tab, попробуйте сочетание клавиш Ctrl + E, Ctrl + Alt + Enter, cmd + E. Так же в настройках тектового редактора можно сменить Key Binds.

Вопросы? задавайте в комментариях, стараюсь отвечать