Atom emmet как пользоваться

Обновлено: 07.07.2024

You can install the latest Emmet version manually from console:

Then restart Atom editor.

Default Keybindings

You can change these in Preferences > Keybindings.

Command	Darwin	Linux/Windows
Expand Abbreviation	tab or shift + ⌘ + e	tab or ctrl + e
Expand Abbreviation (interactive)	alt + ⌘ + enter	ctrl + alt + enter
Wrap with Abbreviation	ctrl + w	ctrl + alt + w
Balance (outward)	ctrl + d	ctrl + shift + e
Balance (inward)	alt + d	ctrl + shift + 0
Go to Matching Pair	ctrl + alt + j	ctrl + alt + j
Next Edit Point	ctrl + →	ctrl + alt + →
Previous Edit Point	ctrl + ←	ctrl + alt + ←
Select Next Item	ctrl + shift + →	ctrl + shift + .
Select Previous Item	ctrl + shift + ←	ctrl + shift + ,
Toggle Comment	⌘ + /	ctrl + shift + /
Split/Join Tag	shift + ⌘ + j	ctrl + shift + `
Remove Tag	⌘ + '	ctrl + shift + ;
Evaluate Math Expression	shift + ⌘ + y	ctrl + shift + y
Increment Number by 0.1	ctrl + alt + ↑	alt + ↑
Decrement Number by 0.1	ctrl + alt + ↓	alt + ↓
Increment Number by 1	ctrl + alt + ⌘ + ↑	ctrl + ↑
Decrement Number by 1	ctrl + alt + ⌘ + ↓	ctrl + ↓
Increment Number by 10	ctrl + alt + ⌘ + shift + ↑	shift + alt + ↑
Decrement Number by 10	ctrl + alt + ⌘ + shift + ↓	shift + alt + ↓
Reflect CSS value	shift + ⌘ + r	ctrl + shift + r
Update Image Size	ctrl + i	ctrl + u
Encode/Decode image to data:URL	ctrl + shift + i	ctrl + '
Update Tag	ctrl + shift + u	ctrl + shift + '
Merge Lines	shift + ⌘ + m	ctrl + shift + m

All actions and their keyboard shortcuts are available under Packages > Emmet menu item.

Features:

Expand abbreviations by Tab key.
Multiple cursor support: most Emmet actions like Expand Abbreviation, Wrap with Abbreviation, Update Tag can run in multi-cursor mode.
Interactive actions (Interactive Expand Abbreviation, Wrap With Abbreviation, Update Tag) allows you to preview result real-time as you type.
Better tabstops in generated content: when abbreviation expanded, hit Tab key to quickly traverse between important code points.
Emmet v1.1 core.

Please report any problems at issue tracker.

Плагин EMMET молниеносная верстка

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

Сам урок разбит на несколько частей:

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

Я использую редактор PhpStorm , плагин emmet в него установлен по умолчанию. Если используете другой редактор, переходите на сайт EMMET, выбираете свой свой редактор, скачивайте плагин и его устанавливаете.

В принципе на сайте нас будут интересовать две вещи, это документация к Emmet, я вернусь к ней чуть позже, и данные расширения под редакторы.

И так, открываем свой редактор, создаю файл формата html , и начнем с простых примеров.

Emmet синтаксис HTML

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

При помощи Emmet, базовая разметка разворачивается двумя клавишами, прописываем восклицательный знак (!) и нажимаем (TAB) на клавиатуре, тем самым получим базовую разметку HTML страницы.

Такую же разметку можно получить использую аббревиатуру (html:5) , а для четвертой версии разметки используем следующую (html:4t) , если хотим развернуть один тег doctype , достаточно прописать три восклицательных знака (. ) .

Что бы написать тег, пишем его название, нажимаем кнопку (TAB) и эммет создаст открывающий и закрывающий тег, а курсор помещает вовнутрь.

У общих тегов предусмотрены свои сокращения и в принципе они интуитивно понятны.

У некоторых еммет создает автоматически атрибуты.

При таком синтаксисе, заполняется часть атрибута.

Также работает теги Link .

Есть и другие теги о которых вы можете почитать в документации emmet.

Для тегов, у которых вложенные элементы как у таблицы table или списков ul , что бы развернуть их полную конструкцию, установим в конце знак (+) , за счет этого развернутся вложенные теги:

В большинстве случаев это будет элемент div , в других вариантах это будет соответствующий тег вложенной структуры.

Для атрибутов используя те же самые квадратные скобки [ ] как в CSS селекторах, можем добавлять атрибуты td[rowspan=2 title="text"]

Emmet также умеем создавать целые цепочки из элементов при помощи символа «больше (>) », при нажатии TAB получаем вложенную конструкцию.

Используя символ «Плюс (+) », мы добавляем элемент к предыдущему на том же уровне.

Что бы вернуться по дереву вверх на одну ступень, используем символ «галочка (^) », а если на более чем одну ступень, то добавляем соответствующее их количество.

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

При помощи символа «звездочка (*) », мы можем продублировать комбинацию, любое количество раз.

При этом вкладывать вовнутрь любые элементы.

Используя символ « $ », можем проводить нумерацию. Нумерацию можем добавлять в название классов и атрибутов, кроме того можем использовать многочисленную нумерацию, для этого дописываем количество знаков $$$ , а если поставить «модификатор (@) », за ним можем указать число после которого нужно начать нумерацию. Если нумерация нужно создать в убывающем порядке, устанавливаем за модификатором знак минус (-) и прописываем число, с которого нужно начать нумерацию.

При помощи «фигурных скобок < >» можем добавлять текстовое содержание, а при помощи (с) писать комментарии.

В Emmet так же есть генератор произвольного текста, что довольно удобно на стадии создание прототипа страницы, когда не интересует его содержание, а блоки нужно заполнить текстовой информацией. При помощи слова « lorem » генерируем текст.

После слова lorem можем прописать количество слов в тексте, для этого, после слова задаем соответствующее число.

Это в принципе и весь базовый синтаксис emmet, теперь мы можем быстро создавать базовую разметку страницы, внутрь ее вкладывать любые элементы, создавать комментарии, списки, текст и так далее.

В Еммет много стандартных сниппетов, у нас в Шпаргалке по emmet найдете таблицы с базовыми аббревиатурами по link:favicon , по input , img:s и т.д.

Emmet Синтаксис CSS

Открываем файл стилей, и в нем разберем популярные свойства, который часто задействуем при верстке.

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

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

Для описания свойств color можно воспользоваться следующими сокращениями.

Что бы присвоить параметры отступов не обязательно прописывать аббревиатуру (px) она автоматически пропишется, а вод для того что бы задать в процентах или в других значения дописываем соответствующую букву.

Также прописывается ширина и высота, а для значения auto , следующее сочетание букв (ha) .

По такой же аналогии задаются внешние (margin) и внутренние (padding) отступы.

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

Так же как в HTML, можем группировать свойства при помощи знака (+)

При помощи знака минус (-) , который устанавливаем в начале свойства, формируется автоматический префикс.

Используя новые свойства из CSS3 в большинстве случаев префикс создается самостоятельно.

Есть возможность сразу формировать свойства с вставленными шрифтами, используя следующее сочетание.

Приоритет задается восклицательным (!) знаком.

Комментарии при помощи аббревиатуры (cm) .

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

Свои сниппеты в PHPSTORM

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

К примеру, я часто использую outline обводку, в которой мне приходится периодически прописывать значения свойств outline: 1px solid orange; .

Хоть и одна строчка, но занимает некое время для ее набора, давайте на примере ее создадим сниппет в редакторе PhpStorm .

Открываем настройки PhpStorm , через меню или при помощи сочетания кнопок (CTRL+ALT+S) , переходим в Editor -> Live Templates , жмем на крестик, и создаем отдельную группу, с названием dws CSS .

В данной группе добавляем сниппет, в поле Abbreviation , вписываем аббревиатуру, при которой будет разворачиваться свойство (dws:ou) , в поле Description прописываем для себя подсказку (outline: 1px solid orange;) и далее в поле Template text , прописываем сам код (outline: 1px solid orange;) . Затем нажимаем Change , из списка выбираем формат CSS , включим данную галочку (reformat according to style) , сохранимся, и проверим.

Вводим аббревиатуру на странице (dwsou) , и получили сохраненный сниппет.

Разберем еще один пример, мне приходится часто центровать объекты посередине экрана, для этих целей постоянно прописываю данные стили.

Создам для них второй сниппет.

Открываем настройки, вводим аббревиатуру dws:b , краткое его описание .dws-wrapper <. >, далее сниппет.

Устанавливаем Change в CSS , ставим галочку, сохраняемся и проверяем.

Таким же подобным образом формируются сниппеты для других расширений файлов. Для примера, коль создали сниппет с классом, для него подготовим сниппет doctype страницы.

Создаем новую группу, dws HTML , в создаем новы сниппет, в поле Abbreviation , вписываем аббревиатуру (dws:!) , в поле Description подсказку , в поле Template text , прописываем сам код.

В коде прописываем дополнительные маркеры $TITLE$ и $END$ для быстрого перехода к ним по нажатию на кнопку Enter .

Затем нажимаем Change , из списка выбираем формат HTML , включим данную галочку ( reformat according to style ), сохранимся, и проверим.

По настройкам PhpStorm есть идея в дальнейшем записать серию уроков, если для вас эта тема актуальна, под видео пиши комментарии конкретно что интересуют по данному редактору, а там как соберусь записывать уроки, я постараюсь все эти вопросы в осветить.

Сокращенные комбинации emmet + PhpStorm

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

Что бы закомментировать участок кода используется сочетание клавиш ( CTRL + / ). Для комментирования выделенной области нажимаем ( CTRL + SHRIFT + )

Если нужно обернуть текст или код в определенные теги, выделяем его, нажимаем ( CTRL + ALT + J ) и выбираем метод написание обертки. Тут что удобно, есть три варианта, можем использовать стандартный набор кода, обернуть в ( CDATA ), и сделать обертку при помощи emmet.

Когда на страницу копируем код, из каких-то источником, в большинстве случаев он не форматированный, с таким кодом неудобно работать, и приходится его приводить к определенному виду. Для этого существует сочетание клавиш ( CTRL + ALT + L), выделяем участок кода, нажимаем, и код отформатирован.

Бывает случаи, когда нужно переместить участок кода выше или ниже по дереву, для этого выделяем область кода, нажимаем ( ALT + SHIFT ) и при помощи стрелок выше ниже перемещаем его выше ниже по дереву ( ALT + SHIFT + UP или DOWN ).

Есть также удобная функция, когда необходимо найти закрывающий тег. Для этого устанавливаем курсор на открывающем теге, жмем сочетание клавиш ( CTRL + SHIFT + M ) , и сразу перемещаемся по странице, на закрывающий его тег.

Самое основное, в принципе разобрали, и для закрепления знаний напишем простенький код при помощи emmet.

Практический пример по EMMET

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

Для примера создадим простенькое меню, с небольшой анимацией.

рис 4-5 (пример меню)

Создаем файл с расширением html, и при помощи сниппета который создавали ( dws:! ), формируем основную разметку. Заполняем title , далее при помощи emmet создаем ul с классом .nav, в нем пять списков li , в них вкладываем ссылку с текстовым содержанием.

Затем создаем файл CSS. При помощи аббревиатуры ( dwsb ), разворачиваем начальные стили для выравнивания блока.

Сбрасываем padding и margin в ul , и выравниваем списки по горизонтали.

Для списков уберем маркеры.

Затем поработаем ссылкой внутри li .

Emmet ( m p c fz20 tdn ttu )

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

Затем изменим цвет шрифта, размер установим 20 пик, уберем подчеркивание, и делаем текст заглавными буквами.

Более менее оформили ссылку, теперь сделаем полоску которая будут выезжать при наведении. Создаем псевдоэлемент .nav li a::before , позиционируем абсолютно ссылки, а ссылке соответственно задаем position: relative , прописываем content:’’ , задаем цвет, выравниваем по нижнему краю, ширину делаем в 100% относительно ссылке, а высоту в 3 пик.

Emmet ( poa por ct bg b0+l0+w100p+h3 )

Делаем анимацию

По наведению на кнопку данная полоска, должна выезжать с левой стороны до конца блока, затем, заполнять полностью блок по высоте, как убираем курсор, все должно возвращаться в исходное положение.

И первое с чего начнем, с позиционируем полоску за пределами блоков, при помощи left: -100% ; мы ее убираем.

В то же время при наведении на блок ее возвращаем в нулевое положение.

Для плавности перемещения псевдоэлемента, для него прописываем transition в 0.8 сек. Emmet ( trs )

Затем все скроем за пределами блока ссылкой, для этого ей присвоим overflow: hidden; .

Элемент не скрылся, так как ссылка является строчным элементом, переводим ее в блочный вид. Emmet ( db )

Затем делаем анимацию, в место left , пишем animation , задаем имя анимации anim-nav , продолжительность устанавливаем в полсекунды, прописываем linear что дает равномерную продолжительность анимации за все время.

Далее описываем ключевые кадры. Пишем @keyframes , имя анимации, нулевой кадр, то есть, точка старта анимации в принципе уже установлена, нам нужно определить кадр когда полоска заполнит весь блок. Установим 50% и left укажем ноль, и проверяем.

Затем делаем конечный кадр, ставим 100% и высоту тоже в 100%. Проверяем результат.

Для первого кадра добавим bottom:0 , и высоту 3 пик. Для второго кадра, bottom:0 и left:0

Emmet ( b0+h3 b0+l0 )

Что бы анимация назад не отматывалась, добавим для animation атрибут forwards , тем самым по окончанию она у нас остановится.

Для того что бы псевдоэлемент был на заднем фоне а текст на переднем добавим для последнего кадра z-index:-1 .

При наведении текст поменяем на белый.

Для ссылки уберем обводку, а в место ее допишем transition: 0.8 .

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

I think this package is bad news.

Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.

Default Keybindings

You can change these in Preferences > Keybindings.

Command	Darwin	Linux/Windows
Expand Abbreviation	tab or shift + ⌘ + e	tab or ctrl + e
Expand Abbreviation (interactive)	alt + ⌘ + enter	ctrl + alt + enter
Wrap with Abbreviation	ctrl + w	ctrl + alt + w
Balance (outward)	ctrl + d	ctrl + shift + e
Balance (inward)	alt + d	ctrl + shift + 0
Go to Matching Pair	ctrl + alt + j	ctrl + alt + j
Next Edit Point	ctrl + →	ctrl + alt + →
Previous Edit Point	ctrl + ←	ctrl + alt + ←
Select Next Item	ctrl + shift + →	ctrl + shift + .
Select Previous Item	ctrl + shift + ←	ctrl + shift + ,
Toggle Comment	⌘ + /	ctrl + shift + /
Split/Join Tag	shift + ⌘ + j	ctrl + shift + `
Remove Tag	⌘ + '	ctrl + shift + ;
Evaluate Math Expression	shift + ⌘ + y	ctrl + shift + y
Increment Number by 0.1	ctrl + alt + ↑	alt + ↑
Decrement Number by 0.1	ctrl + alt + ↓	alt + ↓
Increment Number by 1	ctrl + alt + ⌘ + ↑	ctrl + ↑
Decrement Number by 1	ctrl + alt + ⌘ + ↓	ctrl + ↓
Increment Number by 10	ctrl + alt + ⌘ + shift + ↑	shift + alt + ↑
Decrement Number by 10	ctrl + alt + ⌘ + shift + ↓	shift + alt + ↓
Reflect CSS value	shift + ⌘ + r	ctrl + shift + r
Update Image Size	ctrl + i	ctrl + u
Encode/Decode image to data:URL	ctrl + shift + i	ctrl + '
Update Tag	ctrl + shift + u	ctrl + shift + '
Merge Lines	shift + ⌘ + m	ctrl + shift + m

All actions and their keyboard shortcuts are available under Packages > Emmet menu item.

Emmet plugin Atom editor

You can install the latest Emmet version manually from console:

Then restart Atom editor.

Tab key

Currently, Emmet expands abbreviations by Tab key only for HTML, CSS, Sass/SCSS and LESS syntaxes. Tab handler scope is limited because it overrides default snippets.

If you want to make Emmet expand abbreviations with Tab key for other syntaxes, you can do the following:

Use Open Your Keymap menu item to open your custom keymap.cson file.
Add the following section into it:

Replace YOUR GRAMMAR HERE with actual grammar attribute value. The easiest way to get grammar name of currently opened editor is to open DevTools and find corresponding <atom-text-editor> element: it will contain data-grammar attribute with value you need. For example, for HTML syntax it’s a text html basic .

You can add as many sections as you like for different syntaxes. Note that default snippets will no longer work, but you can add your own snippets in Emmet.

Extensions support

You can easily extend Emmet with new actions and filters or customize existing ones. In Preferences > Emmet, set Extensions path to folder with Emmet extensions. By default, it’s

/emmet , e.g. emmet folder in your system HOME folder.

Extensions support

You can easily extend Emmet with new actions and filters or customize existing ones. In Preferences > Emmet, set Extensions path to folder with Emmet extensions. By default, it’s

/emmet , e.g. emmet folder in your system HOME folder.

Features:

Expand abbreviations by Tab key.
Multiple cursor support: most Emmet actions like Expand Abbreviation, Wrap with Abbreviation, Update Tag can run in multi-cursor mode.
Interactive actions (Interactive Expand Abbreviation, Wrap With Abbreviation, Update Tag) allows you to preview result real-time as you type.
Better tabstops in generated content: when abbreviation expanded, hit Tab key to quickly traverse between important code points.
Emmet v1.1 core.

Please report any problems at issue tracker.

Устанавливаем emmet на Атом.

Как установить emmet на Атом.

После этого нам нужна кнопка расширения.

В строке поиска вбиваем "emmet".

Когда поиск найдет emmet - нажимаем install:

После того, как вы установили "emmet" на Атом, то можно всегда его удалить.

Обращаю ваше внимание!

Если вы видите кнопку "uninstall" - значит ваше расширение "emmet установлено"!

Далее идем и изучаем документацию использования emmet в "atom-е"