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

Содержание

Emmet и его использование в VSCode / Хабр

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

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

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

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

{
  "emmet.triggerExpansionOnTab": true
}

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

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

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

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

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

div>ul>li→

<div> 
  <ul>
    <li></li>
  </ul>
</div>

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

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

div+p+bq→

<div></div>
<p></p>
<blockquote></blockquote>

Повторение

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

ul>li*3→

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Группировка

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

div>(header>ul>li*2>a)+footer>p→

<div>
  <header>
    <ul>     
      <li><a href=""></a></li>   
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

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

(div>dl>(dt+dd)*3)+footer>p→

<div>
  <dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
  </dl>
</div>
<footer>
  <p></p>
</footer>

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

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

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

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

div#header+div.page+div#footer.class1.class2.class3

→

<div></div>
<div></div>
<div></div>

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

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

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

<td title="Hello world!" colspan="3"></td>

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

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

Нумерация

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

ul>li.item$*3→

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

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

ul>li.ite$m*2→

<ul>
  <li></li>
  <li></li>
</ul>

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

ul>li.item$$$*3→

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

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

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

@- после оператора $:

ul>li.item$@-*3→

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

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

ul>li.item$@3*5→

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

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

ul>li.item$@-3*5→

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

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

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

a{Перейти}→

<a href="">Перейти</a>

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

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

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

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

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

lorem→

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 слов. Также, вы можете использовать оператор повторения *, чтобы создать несколько элементов со случайным текстом:

ul>li*3>lorem10→

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

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

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

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

mkdir .vscode && cd .vscode
touch settings.json && touch snippets.json

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

{
  "emmet.extensionsPath": ["./.vscode"]
}

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

{
  "html": {
    "snippets": {
      "abbr1": "ul>li*3",
      "abbr2": "ol>li*3"
    }
  },
  "css": {
    "snippets": {
      "clw": "color: white",
      "clb": "color: black"
    }
  }
}

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

Emmet в Notepad++. Установка и настройка

Если вы уже начали писать проекты на html то пора вам ознакомиться с техниками ускорения написания кода, типа Zen Coding или Emmet. Наибольшую часть времени при работе с HTML занимает написание тегов. Длинные конструкции, особенно с написанием классов или id занимают очень много времени и являются рутинными операциями. Проекты типа ZenCoding и его дальнейшее развитие Emmet позволяет ускорить и автоматизировать данный процесс.

Для начала давайте установим плагин Emmet для Notepad++. Откройте Notepad++ и перейдите в Плагины → Plugin Manager → Show Plugin Manager. Найдите Emmet и установите его. При установке плагин потребует от вас установки Python script. Согласитесь на установку. А теперь внимание! Та версия Python script которая тянеться из репозитария устарела и не позволяет использовать Emmet, выдавая ошибку «unknown exception» и «Python Script Plugin did not accept the script». Как это исправить? Просто скачайте python script. Распакуйте архив и скопируйте в папку, где установлен Notepad++ все файлы. Если потребуется заменить некоторые файлы — соглашайтесь. Перезапустите Notepad++ и начинайте работу.

Читайте также как установить Emmet и другие плагины в Brackets

Принципы работы с Emmet

Принцип работы простой — вы пишете сокращенную формулу, после чего выбираете опцию Expand Abbreviation (Ctrl+Alt+Enter).

Давайте попробуем. Откроем новый документ и наберем html:5 после чего нажмем Ctrl+Alt+Enter. Итак, было:

Стало:

<!doctype html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> </head> <body> </body> </html>

<!doctype html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

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

Для создания любого элемента с id используйте синтаксис p#yy. Где p — элемент, yy — id элемента. Для класса — p.yy.

Развернется в:

Также можно комбинировать ввод id и класса. Для этого используется запись p.class#id

Для добавления атрибутов используйте синтаксис p[title=»hello»]. Данный текст развернется в:

Как вы уже догадались, для добавления любого элемента необходимо просто набрать его имя: div, p, h2.

Если необходимо добавить содержимое элемента, то этом можно сделать с помощью фигурных скобок. Так код h2{Привет} преобразуется в:

Для вложенных элементов используется селектор: <

Конструкция div>p>span преобразуется в :

<div>

</div>

Для генерации двух элементов на одном уровне необходимо применять знак +. Так div+p дадут:

Довольно простая логика, согласны?

Больше всего я не люблю вводить списки. Скучно, долго и нудно. Особенно если эти списки содержат гипессылки. Раньше я набирал одну строку списка и копировал нужное количество раз. Теперь все стало намного проще: ul>li*3>a[href=»#» title=»»]

<ul>

</ul>

Таким образом, модификатор *3 продублировал строку 3 раза.

Описанных выше опций хватает для написания любого сложного HTML кода.

Хорошая шпаргалка по написанию кода с помощью Emmet здесь и здесь

Плагин Emmet Sublime — Русские Блоги

Большинство возвышенных программ не могут правильно установить плагины emmet из-за неофициальных установочных пакетов.
Сначала загрузите возвышенное на официальном веб-сайте вместо зеленой и взломанной версии веб-сайта, а затем установите плагин emmet.

Устанавливаем плагин Emmet:
в строке меню Perferences -> Package Control
подождите и введитеpcip, Найти установочный пакет управления пакетами, поискemmetНажимаем Enter и ждем установки.
Перезапустить возвышенное.

Измените сочетание клавиш по умолчанию Ctrl + E на клавишу Tab:
В строке меню Preferences -> PackageSettings -> Emmet -> KeyBindings -> User вставьте
[{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}], Сохраните и перезапустите возвышенное.

Но эту вкладку настроек можно только заполнить, но без отступа. Чтобы решить эту проблему, удалите приведенный выше код в строке меню Preferences -> PackageSettings -> Emmet -> KeyBindings -> User и вставьте следующий контент:

    // Press the tab indent a sufficient distance
    { "keys": ["tab"], "command": "reindent", "context":
        [
            { "key": "setting.$", "match_all": true }
        ]
    }

Сохраните и перезапустите.

1. Шаги по быстрому созданию информации заголовка HTML5:

Введите!, Затем нажмите Tab или Ctrl + E, чтобы быстро открыть общую структуру HTML5.

2. Часто используемые сочетания клавиш:

Ctrl + P, откройте окно поиска. К конкретным операциям относятся: 1. Введите имя файла в текущем проекте, быстро выполните поиск в файле, 2. Введите @ и ключевые слова, найдите имя функции в файле, 3. Введите: и числа, перейдите к строке кода в файле, 4. Введите # и ключевые слова, чтобы найти имя переменной.
Ctrl + Enter, чтобы добавить пустую строку к следующей строке текущей строки.
Ctrl + Shift + Enter, чтобы добавить пустую строку к предыдущей строке текущей строки.
Ctrl + Z, отмена.
Ctrl + Y, чтобы отменить отмену.
Ctrl +] или клавиша Tab, отступ вправо.
Ctrl + [или Shift + Tab, отступ влево.
Ctrl + Shift + V, сохранить отступ при вставке.
Alt + F3, выделите выбранное слово.

Emmet — необходимый инструментарий для веб-разработчиков

Подробности: Категория: Полезные программы, справочники, обучение; Опубликовано: 11 июня 2018

Для редактора Notepad++ есть плагин Emmet, но по умолчанию не устанавливается. Emmet нужно установить через меню Плагины / Plugins manager.

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

Примеры аббревиатур для HTML

html:5

Получаем такой код:

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

link
script:src
.item — блок div с классом item
p.lead
ul>li
ul>li*5 — список с 5-ю тэгами li
ul>li.item*5
ul>li.item$*5 — добавляется нумерация класса li
table>(thead)+(tbody>tr*3>td*2)(tfoot)h2{Привет} — содержимое в фигурных скобках
a[data-param1=25] — в квадратных скобках можно указывать атрибуты тэга
(.page-title>h2)(.page-item>h3) — с помощью скобок группируем тэги
table>tr*3>td*2
table>(thead)(tbody>tr*3>td*2)(tfoot)
select>option*5
form:post
p>lorem

Аббревиатуры для CSS

w100 — width: 100px;
w100%
w2e
@f — font-face
@f+ — font-face с дополнительными опциями
f — font
f+
ff — font-family
bg или bg+
bgi
box — box-sizing для разных брраузеров
-foo — добавляются приставки для браузеров
anim

Чтобы сделать комментарий, нужно авторизоваться на сайте!

HTML и CSS. 5 советов для работы с Emmet

Emmet — плагин для текстовых редакторов, который позволяет быстрее писать HTML и CSS-код.

Проверить данный плагин можно на сайте jsfiddle.net, для этого надо написать строку и нажать на Tab.

Чтобы сгенерировать тег, надо просто набрать текст и вызвать команду Emmet. Текущий текст преобразится в открытый и закрытый тег.


p     => <p></p>
div   => <div></div>
a     => <a href=""></a>
input => <input type="text">

Также можно сгенерировать несколько тегов через символ >.


ul>li =>

<ul>
    <li></li>
</ul>

Если к строке добавить .class или #id, то текст преобразится в тег с указанным классом или ИД.


div.post        => <div></div>
div#post-3      => <div></div>
div.post#post-3 => <div></div>

Можно сгенерировать HTML-страницу по умолчанию. Для этого надо набрать символ ! и выполнить команду Emmet.

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

Когда надо сгенерировать текст, то можно использовать команду lorem{число слов}.


lorem2  => Lorem ipsum.
lorem4  => Lorem ipsum dolor sit.
lorem10 => Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, atque!

Emmet также работает с CSS.


m10 => margin: 10px;
p10 => padding: 10px;

fz16  => font-size: 16px;
fw700 => font-weight: 700;

ta  => text-align: left;
tar => text-align: right;
tac => text-align: center;

Плагин Emmet для быстрой верстки

Я думаю все знают, что такое emmet. А если кто-то не знает, Emmet позволяет из строки, сделать полноценный многострочный код. В этой статье постараюсь максимально быстро рассказать что это и как его использовать с примерами. Погнали!

Все очень просто, Вы пишите строку нажимаете Tab и магия! Все разворачивается.

Основные действия:

Дочерний блок:

Меню с одним элементом

Соседние элементы:

Секция с 2 заголовками и 1 описанием

Возврат на элемент выше (можно использовать больше одного):

Умножение:

Меню с 3 элементами

Группировка (можно делать группа в группе):

Редко используемый элемент, схож с элементом возврата

Шапка + Футер

Операторы атрибуции:

ID и классы:

Кастомные атрибуты:

Счетчик:

Изменение нумерации:

Текстовая информация:

Важно, нельзя использовать пробел между элементами. Для Emmet пробел это знак остановки.

Такая запись не будет работать! ((header > ul.nav > li*5) + footer)

Emmet также может генерировать рыбный текст, нужно написать lorem или loremru и нажать tab

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

Чтобы более подробно разобраться в данной теме «Плагин Emmet для быстрой верстки» советую посмотреть наше видео на эту тему:

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация — Войти — Наши курсы. Задавайте вопросы в комментариях!

Плагины Brackets. Emmet — плагин, который позволяет… | by Telegram SMM

Emmet — плагин, который позволяет значительно ускорить написание кода html и css используя сокращения и аббревиатуры. Так, если вы хотите, чтобы знак восклицания (!) после нажатия клавиши tab превращался в полноценную html страницу то этот плагин вам необходим. Также позволяет оборачивать текст тегами HTML.

Tabs — Custom Working — плагин, который добавляет красивые вкладки в Brackets. Помечает несохраненные файлы с помощью зеленых кружков. Основное назначение плагина — сделать работу более наглядной.

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

Code Font — в современных версиях Brackets позволяет менять шрифт кода. В старых версиях — просто необходим, поскольку программа очень некрасиво отображала русский шрифт.Brackets Additional Right Click Menu — добавляет в контекстное меню много удобных «плюшек» — например пункты «Скопировать» и «Вставить».

Autosave Files on Window Blur — плагин автоматического сохранения открытых файлов в тот момент, когда окно программы теряет фокус (например, если вы переключились на браузер).

Extract for Brackets (Preview) — Вот это расширение мне понравилось больше всего в редакторе. Позволяет верстать прямо из PSD макета. То есть, в программу Photoshop залазить уже не надо.

Response for Brackets — Подключаемся к плагину, закачиваем свой PSD на сервер Adobe Creative Cloud, и наш редактор начинает извлекать все стили и графику из PSD макета.Позволяет ваять адаптивность сайта из окна редактора Brackets. Говоря другими словами, адаптивный дизайн у вас в кармане.Все сделано стильно и удобно. При включении создает отдельный файл стилей, куда записываются все изменения. По окончании работы его надо просто подключить к файлам сайта.Но есть один момент, куда ж без него родимого. Расширение еще разрабатывается, и работает, скажем так, не совсем стабильно. Однако его дорабатывают, обновляют и в скором времени все будет ТИП-ТОП.

Extensions Rating — Новичкам советую ставить это дополнение самым первым. Оно позволяет упорядочивать другие дополнения в каталоге по различным критериям, также отображает различную дополнительную информацию: количество загрузок, звезд и форков на GitHub, что позволяет хотя бы примерно оценить полезность данного расширения

Code Folding — Без этого плагина в Brackets нет такой нужной функциональности, как сворачивание блоков кода. После установки слева, рядом с номерами строк, появятся треугольники, которые позволяют сворачивать те фрагменты, которые сейчас не нужны.

QuickSearch — При двойном клике на выражение подсвечивает все его вхождения в документ. Автор расширения вдохновлён Notepad++, чего не скрывает.

CSSLint, LESSLint, LESS StyleSheets Formatter — Три плагина, призванные помочь в улучшении вашего LESS- и CSS-кода. Будут указывать на типичные и не очень ошибки

HTMLHint, More CSS Code Hints, More HTML5 Code Hints — Плагины просто дают больше подсказок при правке HTML и CSS. Учитывая, с какой скоростью базовую поставку Brackets добавляются различные улучшения и дополнения, следует ждать интеграции функционала этих плагинов в ядро.

ColorHints, Brackets Color Picker — Первый выводит подсказку при наведении курсора на код или название цвета в редакторе, умеет также показывать градиенты. Второй выводит окошко с палитрой для выбора нужного цвета. При редактировании LESS-файлов окошко для выбора цвета следует вызывать по Ctrl+Alt+K, если оно не появилось автоматически после ввода слова color.

GitHub — emmetio / emmet-eclipse: Emmet для Eclipse

Файлы

Постоянная ссылка Не удалось загрузить последнюю информацию о фиксации.

Тип

Имя

Последнее сообщение фиксации

Время фиксации

Emmet — это набор инструментов для высокоскоростного кодирования и редактирования HTML, XML, XSL (или любого другого формата структурированного кода).Ядром этого плагина является мощный механизм сокращения, который позволяет расширять выражения — аналогично селекторам CSS — в код HTML. Например:

div # page> div.logo + ul # navigation> li * 5> a

… может быть расширен до:

Подробнее о текущем синтаксисе Emmet

Установка

Перейдите в раздел «Справка »> «Установить новое программное обеспечение»… в вашей Eclipse IDE
Добавьте http: // download.emmet.io/eclipse/updates/ на сайтах обновлений
Проверьте Emmet на наличие группы Eclipse в списке доступных плагинов, нажмите кнопку «Далее» и следуйте инструкциям по установке.
Перезапустите Eclipse

Обзор плагина

Этот плагин предоставляет функции:

Раскрытие сокращений клавишей Tab
Табуляция и поддержка связанного режима
Простой процесс установки и обновления
Изменить ярлыки действий на странице настроек ключей Eclipse.
Работает со всеми редакторами Eclipse
Поддержка предпочтений для точной настройки вывода для каждого синтаксиса и добавления новых сокращений и фрагментов

Пользователи Aptana 3: , поскольку Aptana 3 также может расширять фрагменты с помощью клавиши Tab, в расширенном результате могут быть конфликты (например, для тега div ).Вы можете удалить неиспользуемые фрагменты для пакетов Aptana, чтобы плагин Emmet работал правильно.

Взносы

Фрагменты Django

Около

Эммет для Eclipse

ресурсов

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

эммет

Emmet поддерживает Atom.

Установка

В Atom откройте Preferences ( Settings в Windows)
Перейти к Установить раздел
Найдите Emmet package. Как только он найден, нажмите кнопку Установить , чтобы установить пакет.

Ручная установка

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

cd ~ / .atom / packages

git clone https://github.com/emmetio/emmet-atom

cd emmet-atom

npm install

Затем перезапустите редактор Atom.

Особенности:

Разверните сокращения клавишей Tab.
Поддержка нескольких курсоров: большинство действий Emmet, таких как Expand Abbreviation, Wrap with Abbreviation, Update Tag, могут выполняться в режиме нескольких курсоров.
Интерактивные действия (Interactive Expand Abbreviation, Wrap with Abbreviation, Update Tag) позволяют предварительно просмотреть результат в режиме реального времени по мере ввода.
Улучшенные табуляторы в сгенерированном контенте: при расширении аббревиатуры нажимайте клавишу Tab для быстрого перехода между важными кодовыми точками.
Ядро Emmet v1.1.

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

Клавиша Tab

В настоящее время Emmet расширяет аббревиатуры клавишей Tab только для синтаксисов HTML, CSS, Sass / SCSS и LESS.Область действия обработчика вкладок ограничена, поскольку он переопределяет фрагменты по умолчанию.

Если вы хотите, чтобы Эммет расширял аббревиатуры с помощью клавиши Tab для других синтаксисов, вы можете сделать следующее:

Используйте Откройте вашу раскладку в пункте меню , чтобы открыть собственный файл keymap.cson .
Добавьте в него следующий раздел:

  'atom-text-editor [data-grammar = "ВАША ГРАММАТИКА ЗДЕСЬ"]: not ([mini])': 
  'tab': 'emmet: expand-abbreviation-with-tab'

Замените ВАША ГРАММАТИКА ЗДЕСЬ фактическим значением атрибута грамматики.Самый простой способ получить имя грамматики открытого редактора — открыть DevTools и найти соответствующий элемент : он будет содержать атрибут data-grammar с нужным вам значением. Например, для синтаксиса HTML это text html basic .

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

Привязки клавиш по умолчанию

Вы можете изменить их в «Настройки»> «Связки клавиш».

Команда	Дарвин	Linux / Windows
Раскрыть сокращение	tab или shift + ⌘ + e	tab или ctrl + e
Развернуть сокращение (интерактивно)	alt + ⌘ + ввод	ctrl + alt + ввод
Обертка с аббревиатурой	ctrl + w	ctrl + alt + w
Остаток (выход)	ctrl + d	ctrl + shift + e
Остаток (внутрь)	alt + d	ctrl + shift + 0
Перейти к соответствующей паре	ctrl + alt + j	ctrl + alt + j
Следующая точка редактирования	ctrl + →	ctrl + alt + →
Предыдущая точка редактирования	ctrl + ←	ctrl + alt + ←
Выбрать следующий	ctrl + shift + →	ctrl + shift +.
Выбрать предыдущий товар	ctrl + shift + ←	ctrl + shift +,
Переключить комментарий	⌘ + /	ctrl + shift + /
Тег разделения / объединения	сдвиг + ⌘ + j	ctrl + shift + `
Удалить метку	⌘ + ‘	ctrl + shift +;
Вычислить математическое выражение	сдвиг + ⌘ + y	ctrl + shift + y
Увеличить число на 0.1	ctrl + alt + ↑	alt + ↑
Уменьшить число на 0,1	ctrl + alt + ↓	alt + ↓
Увеличить число на 1	ctrl + alt + ⌘ + ↑	ctrl + ↑
Уменьшить номер на 1	ctrl + alt + ⌘ + ↓	ctrl + ↓
Увеличить число на 10	ctrl + alt + ⌘ + shift + ↑	сдвиг + alt + ↑
Уменьшить число на 10	ctrl + alt + ⌘ + shift + ↓	shift + alt + ↓
Отражает значение CSS	сдвиг + ⌘ + r	ctrl + shift + r
Обновить размер изображения	ctrl + я	ctrl + u
Кодирование / декодирование изображения в данные: URL	ctrl + shift + я	ctrl + ‘
Обновить тег	ctrl + shift + u	ctrl + shift + ‘
Строки слияния	сдвиг + ⌘ + м	ctrl + shift + m

Все действия и их сочетания клавиш доступны в меню «Пакеты»> «Эммет».

Расширения поддерживают

Вы можете легко расширить Emmet новыми действиями и фильтрами или настроить существующие. В «Настройки»> «Эммет» установите путь расширений к папке с расширениями Emmet. По умолчанию это ~ / emmet , например emmet папка в вашей системной папке HOME.

Эммет — vscode

Visual Studio Code поддерживает большинство действий Emmet, включая расширение сокращений и фрагментов Emmet.

В июле 2017 года (v1.15) выпуск VS Code, мы представили Emmet 2.0, который включил такие функции, как Emmet в списке предложений / автозаполнения, и поддержку нескольких курсоров. Узнайте больше о причинах и способах этого капитального ремонта в сообщении блога Emmet 2.0.

Как расширить аббревиатуры и фрагменты Эммета

Аббревиатура Emmet и расширения фрагментов включены по умолчанию в html , haml , jade , slim , jsx , xml , xsl , css , scss , sass , минус и стилус файлов.А также любой язык, который наследуется от любого из вышеперечисленных, например , руль и php .

Когда вы начнете вводить аббревиатуру Emmet, вы увидите аббревиатуру, отображаемую в списке предложений. Если у вас открыто всплывающее окно с предложенной документацией, по мере ввода вы увидите предварительный просмотр расширения. Если вы находитесь в файле таблицы стилей, расширенное сокращение отображается в списке предложений, отсортированном среди других предложений CSS.

Эммет, когда быстрые подсказки отключены

Если вы отключили редактор .quickSuggestions , вы не увидите подсказок по мере ввода. Вы по-прежнему можете запускать предложения вручную, нажав kb (editor.action.triggerSuggest) и просмотреть предварительный просмотр.

Отключить Эммет в предложениях

Если вы вообще не хотите видеть аббревиатуры Emmet в предложениях, тогда установите emmet.showExpandedAbbreviation на , никогда не и используйте команду Emmet: Expand Abbreviation , чтобы расширить ваши сокращения. Вы также можете привязать любое сочетание клавиш к редактору команды id .emmet.action.expandAbbreviation также.

  {
    "emmet.showExpandedAbbreviation": "никогда"
}

Использование вкладки для расширений Emmet

Если вы хотите использовать клавишу kbstyle (Tab) для расширения сокращений Emmet, добавьте параметр emmet.triggerExpansionOnTab и установите для него значение true . Этот параметр позволяет использовать клавишу kbstyle (Tab) для отступа, когда текст не является сокращением Emmet.

  {
    "Эммет.triggerExpansionOnTab ": true
}

Предложение Эммета для заказа

Предложения Эммета не всегда могут отображаться в верхней части списка предложений. Это может быть связано либо с тем, что вы установили editor.snippetSuggestions с на top , либо если вы находитесь в файле таблицы стилей, он сортируется среди других предложений CSS. Чтобы предложения Эммета всегда были наверху, вы можете установить emmet.showSuggestionsAsSnippets с на true и editor.snippetSuggestions с по вверху .

  {
    "emmet.showSuggestionsAsSnippets": true,
    "editor.snippetSuggestions": "top"
}

Сокращения Эммета в других типах файлов

Чтобы включить расширение аббревиатуры Emmet в типах файлов, где оно недоступно по умолчанию, используйте параметр emmet.includeLanguages . Обязательно используйте языковые идентификаторы для обеих сторон сопоставления.

Например:

  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "открытый текст": "нефрит"
}

Эммет не знает этих новых языков, поэтому вы можете почувствовать, что предложения Эммета появляются в контексте, отличном от html / css.Чтобы избежать этого, вы можете установить emmet.showExpandedAbbreviation на inMarkupAndStylesheetFilesOnly .

Примечание. Если ранее вы использовали emmet.syntaxProfiles для сопоставления новых типов файлов, начиная с VS Code 1.15 и далее, вам следует использовать параметр emmet.includeLanguages . emmet.syntaxProfiles предназначен только для настройки окончательного вывода.

Использование пользовательских сниппетов Emmet

Пользовательские фрагменты кода Emmet должны быть определены в файле json с именем snippets.json . В параметре emmet.extensionsPath должен быть указан путь к каталогу, содержащему этот файл.

Ниже приведен пример содержимого этого файла snippets.json .

  {
    "html": {
        "snippets": {
            "ull": "ul> li [id = $ {1} class = $ {2}] * 2 {Будет работать с html, jade, haml и slim}",
            "oll": "  Будет работать только в html ",
            "ran": "{заключать обычный текст в фигурные скобки}"
        }
    },
    "css": {
        "snippets": {
            "cb": "цвет: черный",
            "bsd": "border: 1px solid $ {1: red}",
            "ls": "list-style: $ {1}"
        }
    }
}

Создание пользовательских сниппетов в Emmet 2.0 через файл snippets.json отличается от старого способа сделать то же самое в нескольких отношениях:

Тема	Старый Эммет	Эммет 2,0
Фрагменты и сокращения	Поддерживает оба в двух отдельных свойствах, которые называются фрагментами `, аббревиатуры` и	Эти 2 были объединены в одно свойство, называемое сниппетами. См. Фрагменты HTML и CSS по умолчанию
Имена фрагментов CSS	Может содержать `:`	Не используйте `:` при определении имен фрагментов.Он используется для разделения имени свойства и значения, когда Эммет пытается нечетко сопоставить данное сокращение с одним из фрагментов.
Значения фрагмента CSS	Может заканчиваться на `;`	Не добавляйте `;` в конце значения фрагмента. Эммет добавит завершающий `;` на основе типа файла (css / less / scss vs sass / stylus) или предпочтения emmet, установленного для `css.propertyEnd` , `sass.propertyEnd` , `stylus.propertyEnd`
Расположение курсора	`$ {cursor}` или `\|` можно использовать	Используйте только синтаксис сопряжения с текстом, например `$ {1}` , для позиций табуляции и местоположения курсора

HTML-фрагменты Эммета

Пользовательские фрагменты HTML

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

Например, для неупорядоченного списка с элементом списка, если значение вашего фрагмента — ul> li , вы можете использовать тот же фрагмент в html , haml , jade или slim , но если ваш значение сниппета —

, тогда он будет работать только в html файлах .

Если вам нужен фрагмент простого текста, заключите его в рамку {} .

CSS-фрагменты Emmet

Значения для фрагментов CSS Emmet должны быть полной парой имени свойства и значения.

Пользовательские фрагменты CSS

применимы ко всем другим разновидностям таблиц стилей, таким как scss , минус или sass . Поэтому не включайте завершающий ; в конце значения фрагмента. Эммет будет добавлять его по мере необходимости, в зависимости от того, требует ли это язык.

Не используйте : в имени фрагмента. : используется для разделения имени свойства и значения, когда Эммет пытается нечетко сопоставить сокращение с одним из фрагментов.

Примечание. После внесения изменений в файл snippets.json не забудьте перезагрузить VS Code, чтобы изменения вступили в силу.

Позиции табуляции и курсоры в пользовательских фрагментах

Синтаксис позиций табуляции в настраиваемых фрагментах Emmet соответствует синтаксису фрагментов Textmate.

Используйте $ {1} , $ {2} для позиций табуляции и $ {1: placeholder} для позиций табуляции с заполнителями.
Ранее | или $ {cursor} использовалось для обозначения положения курсора в пользовательском фрагменте кода Emmet. Это больше не поддерживается. Вместо этого используйте $ {1} .

Конфигурация Emmet

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

emmet.include Языки
Используйте этот параметр, чтобы добавить соответствие между языком по вашему выбору и одним из языков, поддерживаемых Emmet, чтобы включить Emmet в первом, используя синтаксис второго.Обязательно используйте языковые идентификаторы для обеих сторон сопоставления.
Например: json "emmet.includeLanguages": { "javascript": "javascriptreact", "vue-html": "html", "открытый текст": "нефрит" }
emmet.exclude Языки
Если есть язык, для которого вы не хотите видеть расширения Emmet, добавьте его в этот параметр, который принимает массив строк идентификаторов языков.
emmet.syntaxProfiles
См. Эммет Настройка профиля вывода, чтобы узнать, как настроить вывод сокращений HTML.
Например: json "emmet.syntaxProfiles": { "html": { "attr_quotes": "одиночный" }, "jsx": { "self_closing_tag": true } }
emmet. Переменные
Настроить переменные, используемые фрагментами Emmet.
Например: json "emmet.variables": { "язык": "де", "charset": "UTF-16" }

emmet.showExpandedAbbreviation

Управляет предложениями Emmet, отображаемыми в списке предложений / дополнений.

Значение настройки	Описание
`никогда`	Никогда не показывайте сокращения Эммета в списке предложений для любого языка.
`inMarkupAndStylesheetFilesOnly`	Показывать предложения Emmet только для языков, основанных исключительно на разметке и таблицах стилей (‘html’, ‘pug’, ‘slim’, ‘haml’, ‘xml’, ‘xsl’, ‘css’, ‘scss’, ‘sass’ , «меньше», «стилус»).
`всегда`	Показать предложения Emmet во всех поддерживаемых Emmet режимах, а также на языках, для которых есть сопоставление в `emmet.includeLanguages` настройка.

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

emmet.showАббревиатураПредложения
Показывает возможные сокращения emmet в качестве предложений. Его истинно по умолчанию.
Например, когда вы набираете li , вы получаете предложения для всех фрагментов emmet, начиная с li , например link , link: css , link: favicon и т. Д. Это полезно при изучении фрагментов кода Эммета, о существовании которых вы даже не подозревали, если не знали наизусть шпаргалку Эммета.
Неприменимо в таблицах стилей или когда для emmet.showExpandedAbbreviation установлено значение , а не .
эммет.extensionPath

Укажите расположение каталога, в котором находится файл snippets.json , который, в свою очередь, содержит ваши пользовательские фрагменты.

emmet.triggerExpansionOnTab
Установите значение true, чтобы включить расширение сокращений Emmet с помощью клавиши kbstyle (Tab) . Мы используем этот параметр, чтобы обеспечить соответствующий запасной вариант, чтобы обеспечить отступ, когда нет сокращений для расширения.
эммет.показатьПредложенияAsSnippets
Если установлено значение true , то предложения Emmet будут сгруппированы вместе с другими фрагментами, что позволит вам упорядочить их в соответствии с настройкой editor.snippetSuggestions . Установите значение true и editor.snippetSuggestions с по наверху , чтобы предложения Эммета всегда отображались наверху среди других предложений.
emmet.preferences
Вы можете использовать этот параметр для настройки Emmet, как описано в настройках Emmet.В настоящее время поддерживаются следующие настройки: — css.propertyEnd — css.valueSeparator — sass.propertyEnd — sass.valueSeparator — щуп. Свойство Конец — щуп. Значение Разделитель — css.unitAliases — css.intUnit — css.floatUnit
Если вам нужна поддержка каких-либо других предпочтений, задокументированных в предпочтениях Emmet, пожалуйста, зарегистрируйте запрос функции для того же самого.

Известные проблемы в Emmet 2.0

Ниже приведены некоторые проблемы с Emmet 2.0, которые мы работаем над исправлением. Любая помощь в этих областях приветствуется.

Плагин редактора Emmet для динамических фрагментов HTML / CSS

Обзор

Emmet — это подключаемый модуль редактора для быстрого ввода HTML, XML и CSS. Он также поддерживает множество «действий», которые работают с элементами HTML и XML. Наиболее часто используемое действие — раскрытие аббревиатуры или фрагмента.

Emmet был создан Сергеем Чикуйонком.Первоначальное название было «Дзен-кодинг».

Emmet доступен для многих редакторов, включая Atom, Eclipse, Emacs, Notepad ++, Sublime, Vim, Visual Studio (VS) Code и WebStorm. Однако некоторые реализации не поддерживают все определенные фрагменты и действия.

Emmet — это не просто менеджер сниппетов. Он анализирует введенный текст для извлечения смысла. Эти виды сниппетов называются «динамическими сниппетами».

Мы увидим много примеров позже, но вот один. Фрагмент кода div # some-id.class1.class2 [attr1 = one attr2 = 2] {некоторый контент} расширяется до

некоторый контент

. Удивительный!

Simpler snippets также очень полезны. Например, фрагмент CSS mb10 расширяется до margin-bottom: 10px; .

Главный веб-сайт Эммета — https://emmet.io/, и вы найдете удобную шпаргалку по адресу https://docs.emmet.io/cheat-sheet/.

Начало работы

Вам нужно будет настроить Emmet в выбранном вами редакторе / IDE.Инструкции для конкретных можно найти на https://emmet.io/download/. Щелкните поле для своего редактора, чтобы просмотреть подробности.

Вместо того, чтобы описывать шаги для каждого редактора, в этой статье рассматриваются только два. В настоящее время VS Code кажется самым популярным редактором, так что это покрыто. Я использую Vim, так что это тоже покрыто.

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

Код VS

Подробную информацию о настройке Emmet для VS Code можно найти по адресу https: // code.visualstudio.com/docs/editor/emmet. VS Code по умолчанию включает Emmet, включенный для следующих типов файлов: css, haml, html, jade, jsx, less, sass, scss, slim, stylus, xml и xsl. Могут быть добавлены другие типы файлов.

Настройка Эммета в VS Code

Открыть настройки … Настройки из меню «Файл» в Windows и Linux или из меню «Код» в macOS.
Введите «Эммет» в поле «Настройки поиска» вверху.
Обратите внимание на доступные настройки и их значения по умолчанию слева.
Измените настройки в «НАСТРОЙКИ ПОЛЬЗОВАТЕЛЯ» справа.
Чтобы включить использование компонентов React в файлах .js и , измените объект «emmet.includeLanguages», включив в него javascript: 'javascriptreact' .

Использование Эммета в VS Code

Предложения отображаются как набранные фрагменты вместе с предложениями, не относящимися к Emmet.

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

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

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

Например, при раскрытии div курсор перемещается на | из

|

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

Эмуляция Vim в коде VS

Если вы хотите включить эмуляцию Vim в VS Code, выполните следующие действия.

Выберите Просмотр … Расширения.
Введите «vscodevim» в поле поиска.
Нажмите кнопку «Установить» для расширения vscodevim.

Для настройки эмуляции Vim

Выберите код… Предпочтения … Настройки.
Введите «vim» в поле «Настройки поиска» вверху.
См. Доступные настройки и их значения по умолчанию слева.
Измените настройки в «НАСТРОЙКИ ПОЛЬЗОВАТЕЛЯ» справа.

Vim

Плагин Emmet для Vim доступен по адресу https://github.com/mattn/emmet-vim. Здесь можно найти инструкции по его установке с помощью различных менеджеров плагинов Vim, а также детали конфигурации.

Конфигурация выполняется путем модификации .vimrc файл.

Все сочетания клавиш для команд Emmet начинаются с . По умолчанию это ctrl-y.

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

Чтобы изменить значение , установите переменную g: user_emmet_leader_key .

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

 пусть g: user_emmet_leader_key = ''

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

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

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

 let g: user_emmet_install_global = 0 "не активировать для всех типов файлов.
autocmd FileType html, css, scss EmmetInstall "указывает типы файлов

Чтобы использовать Emmet в.js или .jsx файлы, которые определяют компоненты React, добавьте следующее.

 let g: user_emmet_settings = {'javascript.jsx': {'extends': 'jsx'}}
autocmd FileType html, css, javascript.jsx, scss EmmetInstall

`Синтаксис для фрагментов HTML`

Синтаксис для указания фрагментов HTML в основном похож на синтаксис селектора CSS без пробелов.

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

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

Имена классов CSS указываются с помощью . персонаж.

Например, div.my-class расширяется до:

и div.c1.c2 расширяется до:

Идентификаторы элементов указываются с помощью символа # .

Например, div # my-id расширяется до:

Атрибуты указываются в квадратных скобках.

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

Например, div [foo = 1 bar = two] расширяется до:

и div [foo = "содержит пробел" bar = 'одинарные кавычки'] расширяется до

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

Содержимое элемента указывается в фигурных скобках.

Например, div {мой контент} расширяется до:

Элементы во фрагменте могут повторяться с помощью символа * , за которым следует число.

Например, td * 3 расширяется до:

Увеличивающие числа могут быть добавлены в повторяющееся содержимое с помощью символа $ . Это можно использовать для идентификаторов, классов и содержимого.

Например, ul> li.item $ * 3 расширяется до:

По умолчанию нумерация начинается с 1. Другое начальное значение может быть указано с @start и * умножить на .

Например, div {item $ @ 4} * 3 расширяется до:

  товар 4 | 
 пункт 5 
 item 6

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

Например, div # my-id.my-class [foo = 1 bar = two] {my content} расширяется до:

  мой контент |

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

Например, таблица> (thead> tr> th * 3) + (tbody> (tr> td * 3) * 2) расширяется до:

 <таблица>
  
    
       |

Иногда Эммет может угадать желаемые имена тегов в зависимости от контекста.Они называются «неявными именами тегов».

Например, .foo расширяется до:

и ul> .foo расширяется до:

`Lorem Ipsum Text`

«Lorem Ipsum» — это зашифрованный латинский текст, который часто используется в качестве заполнителя для текста, который будет предоставлен позже. Эммет может создать этот текст. По умолчанию он генерирует 100 слов, но можно указать количество желаемых слов.

Фрагмент представляет собой слово «lorem» или слово «lipsum», за которым может следовать число.

Например, lorem и lipsum расширяются до 100 слов, а lorem3 и lipsum3 расширяются до 3 слов.

Выбранные слова случайны, но вот пример:

`HTML-фрагменты`

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

! расширяется до обычного HTML-шаблона.

     
 
    
 
    
 
    
 
    < / title> </p> </li> <li> <p> </head> </p> </li> <li> <p> <body> </p> </li> <li> <p> | </p> </li> <li> <p> <script defer src="https://schtirlitz.ru/wp-content/cache/autoptimize/js/autoptimize_f2389ed47bdd8bd7d39393ae03fcb18d.js"></script></body> </p> </li> <li> <p> </html> </p> </li> </ol> </pre><ul><li> <code> a </code> расширяется до <code> <a href="|"> </a> </code></li><li> <code> a: ссылка </code> расширяется до <code> <a href="http://|"> </a> </code></li><li> <code> a: mail </code> расширяется до <code> <a href="mailto:|"> </a> </code></li><li> <code> btn </code> или <code> кнопка </code> расширяется до <code> <button> | </button> </code></li><li> <code> c </code> расширяется до <code> <! - | -> </code></li><li> <code> img </code> расширяется до <code> <noscript><img class="lazy lazy-hidden" src = "|" alt = ""></noscript><img class="lazyload lazy lazy-hidden" src = "|" alt = ""><noscript><img src = "|" alt = ""></noscript> </code></li><li> <code> ввод: {type} </code><ul><li> тип может быть одним из: кнопка, флажок, цвет, дата, дата и время, локальная дата и время, электронная почта, файл, скрытый, изображение, месяц, число, пароль, радио, диапазон, поиск, отправить, тел., Текст, время, URL. , или неделя</li><li> пример: <code> ввод: число </code> расширяется до <code> <input type = "number" name = ""> </code></li></ul></li><li> <code> ярлык </code> расширяется до <code> <label for = "|"> </label> </code></li><li> <code> ссылка </code> расширяется до <code> </code></li><li> <code> ссылка: favicon </code> расширяется до <code><link rel = "shortcut icon" type = "image / x-icon" href = "| favicon.ico "> </code><ul><li> <code> ol + </code> — это сокращение от сниппета <code> ol> li </code></li></ul></li><li> <code> opt </code> или <code> опция </code> расширяется до <code><option value = "|"></option> </code></li><li> <code> select + </code> — это сокращение от фрагмента <code> select> option </code></li><li> <code> сценарий: src </code> расширяется до <code> </code></li><li> <code> table + </code> — это сокращение от сниппета <code> table> tr> td </code></li><li> <code> tarea </code> или <code> textarea </code> расширяется до <code><textarea name = "" cols = "30" rows = "10"> </textarea></code></li><li> <code> tr + </code> — это сокращение от сниппета <code> tr> td </code></li><li> <code> ul + </code> — это сокращение от фрагмента <code> ul> li </code></li></ul><h3><span class="ez-toc-section" id="_CSS-2"> Фрагменты CSS </span></h3><p> Emmet поддерживает большое количество фрагментов CSS.Те, что показаны ниже, кажутся наиболее полезными.</p><p> Может показаться, что их слишком много, чтобы их запомнить. Однако в большинстве случаев ваше первое предположение о том, каким будет данный фрагмент, является правильным.</p><ul><li> <code> ac </code> расширяется до <code> align-content: |; </code></li><li> <code> ac: c </code> расширяется до <code> align-content: center; </code></li><li> <code> ac: fe </code> расширяется до <code> align-content: flex-end; </code></li><li> <code> ac: fs </code> расширяется до <code> align-content: flex-start; </code></li><li> <code> ac: s </code> расширяется до <code> align-content: stretch; </code></li><li> <code> ac: sa </code> расширяется до <code> align-content: space-around; </code></li><li> <code> ac: sb </code> расширяется до <code> align-content: space-between; </code></li><li> <code> ai </code> расширяется до <code> align-items: |; </code></li><li> <code> ai: b </code> расширяется до <code> align-items: baseline; </code></li><li> <code> ai: c </code> расширяется до <code> align-items: center; </code></li><li> <code> ai: fe </code> расширяется до <code> align-items: flex-end; </code></li><li> <code> ai: fs </code> расширяется до <code> align-items: flex-start; </code></li><li> <code> ai: s </code> расширяется до <code> align-items: stretch; </code></li><li> <code>, поскольку </code> расширяется до <code> align-self: |; </code></li><li> <code> как: b </code> расширяется до <code> align-self: baseline; </code></li><li> <code> как: c </code> расширяется до <code> align-self: center; </code></li><li> <code> as: fe </code> расширяется до <code> align-self: flex-end; </code></li><li> <code> как: fs </code> расширяется до <code> align-self: flex-start; </code></li><li> <code> как: s </code> расширяется до <code> align-self: stretch; </code></li><li> <code> b </code> расширяется до <code> снизу: |; </code></li><li> <code> bd </code> расширяется до границы <code>: |; </code></li><li> <code> bd: n </code> расширяется до <code> граница: нет; </code></li><li> <code> bdb </code> или <code> bb </code> расширяется до <code> нижняя граница: |; </code></li><li> <code> bdl </code> или <code> bl </code> расширяется до <code> граница слева: |; </code></li><li> <code> bdr </code> или <code> br </code> расширяется до <code> граница справа: |; </code></li><li> <code> bdt </code> или <code> bt </code> расширяется до <code> border-top: |; </code></li><li> <code> bg </code> расширяется до фона <code>: # 000; </code></li><li> <code> bgc </code> расширяется до цвета фона <code>: #fff; </code></li><li> <code> bgc: t </code> расширяется до <code> background-color: transparent; </code></li><li> <code> c </code> расширяется до <code> цвет: # 000; </code></li><li> <code> cur: d </code> расширяется до <code> cursor: default; </code></li><li> <code> cur: p </code> расширяется до <code> cursor: pointer; </code></li><li> <code> d: b </code> или <code> d </code> расширяется до <code> display: block; </code></li><li> <code> d: f </code> расширяется до <code> дисплей: гибкий; </code></li><li> <code> d: g </code> не дает <code> display: grid </code>;</li><li> <code> d: i </code> расширяется до <code> display: inline; </code></li><li> <code> d: ib </code> расширяется до <code> display: inline-block; </code></li><li> <code> d: li </code> расширяется до <code> display: list-item; </code></li><li> <code> d: n </code> расширяется до <code> Отображение: нет; </code></li><li> <code> d: t </code> расширяется до <code> display: table; </code></li><li> <code> fxd </code> расширяется до <code> flex-direction: |; </code></li><li> <code> fxd: c </code> расширяется до <code> flex-direction: column; </code></li><li> <code> fxd: r </code> расширяется до <code> flex-direction: row; </code></li><li> <code> ff </code> расширяется до семейства шрифтов <code>: |; </code></li><li> <code> ff: m </code> расширяется до семейства шрифтов <code>: monospace; </code></li><li> <code> ff: s </code> расширяется до семейства шрифтов <code>: serif; </code></li><li> <code> ff: ss </code> расширяется до семейства шрифтов <code>: sans-serif; </code></li><li> <code> fs </code> расширяется до стиля шрифта <code>: |; </code></li><li> <code> fs: i </code> расширяется до стиля шрифта <code>: курсив; </code></li><li> <code> fs: n </code> расширяется до <code> font-style: normal; </code></li><li> <code> fw </code> расширяется до <code> font-weight: |; </code></li><li> <code> fw: b </code> расширяется до <code> font-weight: bold; </code></li><li> <code> fw: n </code> расширяется до <code> font-weight: normal; </code></li><li> <code> fz </code> расширяется до размера шрифта <code>: |; </code></li><li> <code> h </code> расширяется до высоты <code>: |; </code></li><li> <code> jc </code> расширяется до <code> justify-content: |; </code></li><li> <code> jc: c </code> расширяется до <code> justify-content: center; </code></li><li> <code> jc: fe </code> расширяется до <code> justify-content: flex-end; </code></li><li> <code> jc: fs </code> расширяется до <code> justify-content: flex-start; </code></li><li> <code> jc: sa </code> расширяется до <code> justify-content: space-around; </code></li><li> <code> jc: sb </code> расширяется до <code> justify-content: space-between; </code></li><li> <code> л </code> расширяется до <code> слева: |; </code></li><li> <code> lh </code> расширяется до <code> line-height: |; </code></li><li> <code> м </code> расширяется до поля <code>: |; </code></li><li> <code> mb </code> расширяется до <code> margin-bottom: |; </code></li><li> <code> мл </code> расширяется до <code> левое поле: |; </code></li><li> <code> mr </code> расширяется до <code> поле справа: |; </code></li><li> <code> mt </code> расширяется до <code> верхнего края: |; </code></li><li> <code> o </code> расширяется до контура <code>: |; </code></li><li> <code> p </code> расширяется до <code> padding: |; </code></li><li> <code> pb </code> расширяется до <code> padding-bottom: |; </code></li><li> <code> pl </code> расширяется до <code> padding-left: |; </code></li><li> <code> пр </code> расширяется до <code> отступ справа: |; </code></li><li> <code> pt </code> расширяется до <code> padding-top: |; </code></li><li> <code> r </code> расширяется до <code> вправо: |; </code></li><li> <code> т </code> расширяется до <code> вверху: |; </code></li><li> <code> ta: c </code> расширяется до <code> выравнивание текста: по центру; </code></li><li> <code> ta: j </code> расширяется до <code> выравнивание текста: выравнивание; </code></li><li> <code> ta: l </code> или <code> ta </code> расширяется до <code> выравнивание текста: по левому краю; </code></li><li> <code> ta: r </code> расширяется до <code> выравнивание текста: вправо; </code></li><li> <code> td: l </code> расширяется до <code> оформление текста: сквозное; </code></li><li> <code> td: n </code> или <code> td </code> расширяется до <code> текстовое оформление: нет; </code></li><li> <code> td: u </code> расширяется до <code> оформление текста: подчеркивание; </code></li><li> <code> tt: c </code> расширяется до <code> text-transform: capitalize; </code></li><li> <code> tt: l </code> расширяется до <code> преобразование текста: нижний регистр; </code></li><li> <code> tt: u </code> или <code> tt </code> расширяется до <code> text-transform: uppercase; </code></li><li> <code> v: h </code> или <code> v </code> расширяется до <code> видимость: скрыта; </code></li><li> <code> v: v </code> расширяется до <code> видимость: видимая; </code></li><li> <code> va: b </code> расширяется до <code> vertical-align: bottom; </code></li><li> <code> va: m </code> расширяется до <code> выравнивание по вертикали: по центру; </code></li><li> <code> va: t </code> или <code> va </code> расширяется до <code> vertical-align: top; </code></li><li> <code> w </code> расширяется до <code> ширины: |; </code></li><li> <code> z </code> расширяется до <code> z-index: |; </code></li><li> <code> @media </code> или <code> @m </code> расширяется до <code> @media screen {| } </code></li></ul><p> Число может быть добавлено после многих фрагментов CSS, чтобы указать значение.К ним относятся фрагменты для границы, шрифта, полей и отступов.</p><p> Например, <code> m20 </code> расширяется до <code> margin: 20px; </code>.</p><h3><span class="ez-toc-section" id="i-34"> Действия </span></h3><p> В таблицах ниже описаны действия Emmet и ключи для их запуска в VS Code и Vim. Для Windows и Linux замените «ctrl» везде, где вы видите «cmd».</p><p> В VS Code все действия Emmet можно выбрать из «Палитры команд», которая открывается нажатием cmd-P. Ни одна из этих команд не имеет привязки клавиш по умолчанию.</p><p> Чтобы добавить сочетания клавиш в VS Code:</p><ol><li> Открыть настройки … Сочетания клавиш из меню «Файл» в Windows и Linux или меню «Код» в macOS.</li><li> Введите «Emmet» в поле поиска вверху, чтобы отфильтровать команды только теми, которые предоставлены Emmet.</li><li> Выберите команду и нажмите «+» слева от нее.</li><li> Наконец, введите последовательность клавиш быстрого доступа, которая будет связана с командой, и нажмите клавишу ВВОД.</li></ol><p> VS Code позволяет добавлять привязки клавиш к командам, даже если привязка клавиш уже назначена другой команде.Чтобы определить, назначена ли привязка клавиш нескольким командам, щелкните правой кнопкой мыши любую команду, которая ее использует, и выберите «Показать конфликты».</p><p> В приведенных ниже таблицах в столбце «VS Code Key» показаны предлагаемые сочетания клавиш, но ни одна из них не настроена по умолчанию.</p><h4><span class="ez-toc-section" id="i-35"> Часто используемые действия </span></h4><table><thead><tr><th> Действие</th><th> Описание</th><th> VS Кодовый ключ</th><th> Ключ Vim</th></tr></thead><tbody><tr><td> развернуть аббревиатуру</td><td> первичное действие</td><td> ввод или вкладка</td><td> <emmet-leader> запятая в режиме вставки</td></tr><tr><td> перейти к следующей точке редактирования</td><td> переходит к следующей точке редактирования</td><td> cmd-opt-стрелка вправо</td><td> <emmet-leader> №</td></tr><tr><td> перейти к предыдущей точке редактирования</td><td> переход к предыдущей точке редактирования</td><td> cmd-opt-стрелка влево</td><td> <emmet-leader> N</td></tr><tr><td> обертка с аббревиатурой</td><td> — переносит выделенный текст во фрагмент, для которого вам будет предложено</td><td> выберите строки и cmd-A</td><td> <emmet-leader> запятая в визуальном режиме</td></tr><tr><td> бирка баланса наружу</td><td> выделяет весь элемент под курсором; повторить, чтобы расширить наружу</td><td> cmd-d</td><td> <emmet-leader> d</td></tr><tr><td> балансировочная бирка внутрь</td><td> выделяет весь элемент под курсором, но на один уровень меньше текущего выделения; повторить, чтобы расширить внутрь</td><td> cmd-D</td><td> <emmet-leader> D, но не работает</td></tr><tr><td> удалить метку</td><td> удаляет тег под курсором, но не его содержимое</td><td> cmd-k</td><td> <emmet-leader> k (неправильно также удаляет содержимое)</td></tr><tr><td> переключить комментарий</td><td> переключает, закомментирован ли тег под курсором</td><td> cmd- /</td><td> <emmet-leader> /</td></tr><tr><td> линии слияния</td><td> объединяет выбранные строки в одну строку</td><td> смд-М</td><td> <emmet-leader> м</td></tr><tr><td> тег разделения / соединения</td><td> переключает тег под курсором с закрывающего тега на закрытие сокращенным способом (удаляет содержимое)</td><td> cmd-j</td><td> <emmet-leader> j</td></tr><tr><td> перейти к соответствующей паре</td><td> переходит между начальным и конечным тегами</td><td> cmd-T</td><td> не поддерживается</td></tr><tr><td> выбрать следующий товар</td><td> переходит к следующему начальному тегу, имени атрибута или значению атрибута и выбирает его</td><td> cmd-></td><td> не поддерживается</td></tr><tr><td> выбрать предыдущий товар</td><td> переходит к предыдущему начальному тегу, имени атрибута или значению атрибута и выбирает его</td><td> cmd- <</td><td> не поддерживается</td></tr><tr><td> увеличить число на 1</td><td> добавляет к числу под курсором</td><td> ctrl-стрелка вверх</td><td> не поддерживается</td></tr><tr><td> уменьшить число на 1</td><td> вычитается из числа под курсором</td><td> ctrl-стрелка вниз</td><td> не поддерживается</td></tr><tr><td> увеличить число на 10</td><td> добавляет к числу под курсором</td><td> ctrl-shift-стрелка вверх</td><td> не поддерживается</td></tr><tr><td> уменьшить число на 10</td><td> вычитается из числа под курсором</td><td> ctrl-shift-стрелка вниз</td><td> не поддерживается</td></tr><tr><td> увеличить число на.1</td><td> добавляет к числу под курсором</td><td> Ctrl + стрелка вверх</td><td> не поддерживается</td></tr><tr><td> уменьшить число на 0,1</td><td> вычитается из числа под курсором</td><td> ctrl-opt-стрелка вниз</td><td> не поддерживается</td></tr></tbody></table><h4><span class="ez-toc-section" id="i-36"> Реже используемые действия </span></h4><table><thead><tr><th> Действие</th><th> Описание</th><th> Ключ кода VS</th><th> Ключ Vim</th></tr></thead><tbody><tr><td> оценить математическое выражение</td><td> заменяет математическое выражение под курсором результатом</td><td> cmd-Y</td><td> не поддерживается</td></tr><tr><td> кодировать / декодировать изображение в данные: URL</td><td> переключает значение функции URL-адреса CSS между путем к файлу и данными: URL-адрес</td><td> cmd-I</td><td> не поддерживается</td></tr><tr><td> отражает значение CSS</td><td> копирует значение CSS под курсором во все варианты с префиксом поставщика в том же правиле</td><td> cmd-b</td><td> не поддерживается</td></tr><tr><td> обновить размер изображения</td><td> добавляет атрибуты ширины и высоты к тегу img под курсором</td><td> cmd-U</td><td> <emmet-leader> i, но не работает</td></tr></tbody></table><h4><span class="ez-toc-section" id="i-37"> Нестандартные действия </span></h4><p> Это действия, которые не описаны в https: // docs.emmet.io, но реализуются либо VS Code, либо vim-emmet.</p><table><thead><tr><th> Действие</th><th> Описание</th><th> Ключ кода VS</th><th> Ключ Vim</th></tr></thead><tbody><tr><td> тег обновления</td><td> изменяет тег под курсором; запросит новый тег</td><td> cmd-c</td><td> не поддерживается</td></tr><tr><td> привязать URL</td><td> изменяет URL-адрес под курсором на тег привязки, используя этот URL-адрес; должен начинаться с http: // или https: //</td><td> не поддерживается</td><td> <emmet-leader> a в режиме вставки</td></tr></tbody></table><h4><span class="ez-toc-section" id="i-38">, пример «тега разделения / объединения» </span></h4><p> Если навести курсор на начальный тег элемента foo, это изменит <code> <foo> <bar> baz </bar> </foo> </code> на <code> <foo /> </code>.</p><h3><span class="ez-toc-section" id="i-39"> Пользовательские фрагменты </span></h3><p> Многие плагины Emmet поддерживают настраиваемые пользователем фрагменты. Для получения дополнительной информации об этом см. Https://docs.emmet.io/customization/.</p><h3><span class="ez-toc-section" id="i-40"> Сводка </span></h3><p> Emmet может сэкономить веб-разработчикам много времени. Как только вы изучите базовый синтаксис, им станет довольно легко пользоваться.</p><p> Попробуйте в своем любимом редакторе!</p><h2><span class="ez-toc-section" id="_WebStorm"> Эммет | WebStorm </span></h2><p> Набор инструментов Emmet улучшает кодирование с помощью HTML, CSS и JSX. Вы можете использовать шаблоны кода Emmet, не выходя из WebStorm.Чтобы развернуть шаблон в правильную разметку, введите его аббревиатуру и нажмите <kbd data-secondary_macos="⇥" data-secondary_eclipse="⇥" data-secondary_emacs="N/A" data-primary_netbeans="Tab" data-secondary_netbeans="⇥" data-primary_emacs="N/A" data-secondary_eclipse_macos="⇥" data-primary_visual_studio="Tab" data-secondary_visual_studio="⇥" data-primary_windows="Tab" data-secondary_sublime_text_macos="⇥" data-secondary_sublime_text="⇥" data-primary_sublime_text="Tab" data-secondary_intellij_idea_classic="⇥" data-primary_eclipse="Tab"> Tab </kbd>. Для получения информации об изменении ярлыка см. Настройка ключа расширения аббревиатуры.</p><p> Например, в файле HTML введите <code> table> tr * 3> td * 2 </code> и нажмите <kbd data-secondary_macos="⇥" data-secondary_eclipse="⇥" data-secondary_emacs="N/A" data-primary_netbeans="Tab" data-secondary_netbeans="⇥" data-primary_emacs="N/A" data-secondary_eclipse_macos="⇥" data-primary_visual_studio="Tab" data-secondary_visual_studio="⇥" data-primary_windows="Tab" data-secondary_sublime_text_macos="⇥" data-secondary_sublime_text="⇥" data-primary_sublime_text="Tab" data-secondary_intellij_idea_classic="⇥" data-primary_eclipse="Tab"> Tab </kbd>, чтобы получить заглушку таблицы 3×2:</p><p> <таблица><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table></p><p> WebStorm поддерживает такие функции, как новый синтаксис для записи цветов RGBA, подразумеваемые атрибуты, атрибуты по умолчанию и логические атрибуты, действие «Обновить тег» и многое другое.</p><h3 data-toc="using_zen_coding_support#ws_emmet_enable"><span class="ez-toc-section" id="_Emmet-6"> Включение и настройка Emmet </span></h3><p> С помощью WebStorm вы можете использовать собственные шаблоны Emmet, а также более 200 дополнительных живых шаблонов HTML, CSS и XSL, которые перечислены в узлах Zen CSS, Zen HTML и Zen XSL в Редакторе | Страница Live Templates настроек IDE <kbd data-secondary_macos="⌘," data-secondary_eclipse="⌃⌥S" data-secondary_emacs="⌃⌥S" data-primary_netbeans="Ctrl+Alt+S" data-secondary_netbeans="⌃⌥S" data-primary_emacs="Ctrl+Alt+S" data-secondary_eclipse_macos="⌘," data-primary_visual_studio="Ctrl+Alt+S" data-secondary_visual_studio="⌃⌥S" data-primary_windows="Ctrl+Alt+S" data-secondary_sublime_text_macos="⌘," data-secondary_sublime_text="⌃⌥S" data-primary_sublime_text="Ctrl+Alt+S" data-secondary_intellij_idea_classic="⌘," data-primary_eclipse="Ctrl+Alt+S"> Ctrl + Alt + S </kbd>.</p><ol><li> Нажмите <kbd data-secondary_macos="⌘," data-secondary_eclipse="⌃⌥S" data-secondary_emacs="⌃⌥S" data-primary_netbeans="Ctrl+Alt+S" data-secondary_netbeans="⌃⌥S" data-primary_emacs="Ctrl+Alt+S" data-secondary_eclipse_macos="⌘," data-primary_visual_studio="Ctrl+Alt+S" data-secondary_visual_studio="⌃⌥S" data-primary_windows="Ctrl+Alt+S" data-secondary_sublime_text_macos="⌘," data-secondary_sublime_text="⌃⌥S" data-primary_sublime_text="Ctrl+Alt+S" data-secondary_intellij_idea_classic="⌘," data-primary_eclipse="Ctrl+Alt+S"> Ctrl + Alt + S </kbd>, чтобы открыть настройки IDE и выбрать Editor | Эммет.</li><li><p> На открывшейся странице Emmet выберите клавишу, с помощью которой будут разворачиваться сокращения Emmet, по умолчанию выбрана вкладка <kbd data-secondary_macos="⇥" data-secondary_eclipse="⇥" data-secondary_emacs="N/A" data-primary_netbeans="Tab" data-secondary_netbeans="⇥" data-primary_emacs="N/A" data-secondary_eclipse_macos="⇥" data-primary_visual_studio="Tab" data-secondary_visual_studio="⇥" data-primary_windows="Tab" data-secondary_sublime_text_macos="⇥" data-secondary_sublime_text="⇥" data-primary_sublime_text="Tab" data-secondary_intellij_idea_classic="⇥" data-primary_eclipse="Tab"> </kbd>.</p></li><li><p> Чтобы включить или отключить Emmet на определенном языке (HTML, CSS или JSX), перейдите в поле Enable <Language> Emmet и установите его. Используйте элементы управления на странице Emmet для настройки Emmet в различных языковых контекстах.</p></li></ol><p> WebStorm позволяет использовать и настраивать живые шаблоны Emmet или добавлять собственные шаблоны. Предположим, у вас есть запись шаблона со следующим текстом шаблона:</p><p> <entry type = "$ TYPES $"> $ END $ <entry></p><p> Чтобы сгенерировать список записей, вам просто нужно ввести <code> «список-записей <запись [число = $] * 5 ″ </code> и нажать <kbd data-secondary_macos="⇥" data-secondary_eclipse="⇥" data-secondary_emacs="N/A" data-primary_netbeans="Tab" data-secondary_netbeans="⇥" data-primary_emacs="N/A" data-secondary_eclipse_macos="⇥" data-primary_visual_studio="Tab" data-secondary_visual_studio="⇥" data-primary_windows="Tab" data-secondary_sublime_text_macos="⇥" data-secondary_sublime_text="⇥" data-primary_sublime_text="Tab" data-secondary_intellij_idea_classic="⇥" data-primary_eclipse="Tab"> Tab </kbd>.По умолчанию атрибут <code> номер </code> будет сгенерирован до <code> типа </code>. Чтобы настроить позицию, в которой он создается, вам необходимо добавить в шаблон переменную <code> ATTRS </code>, например:</p><p> <entry type = "$ TYPES $" $ ATTRS $> $ END $ <entry></p><p> Переменная <code> ATTRS </code> должна иметь пустую строку в качестве значения по умолчанию, и ее следует пропускать.</p><h4 data-toc="using_zen_coding_support#user_defined_templates_zen_coding"><span class="ez-toc-section" id="_Emmet-7"> Используйте живые шаблоны с Emmet </span></h4><ol><li> Нажмите <kbd data-secondary_macos="⌘," data-secondary_eclipse="⌃⌥S" data-secondary_emacs="⌃⌥S" data-primary_netbeans="Ctrl+Alt+S" data-secondary_netbeans="⌃⌥S" data-primary_emacs="Ctrl+Alt+S" data-secondary_eclipse_macos="⌘," data-primary_visual_studio="Ctrl+Alt+S" data-secondary_visual_studio="⌃⌥S" data-primary_windows="Ctrl+Alt+S" data-secondary_sublime_text_macos="⌘," data-secondary_sublime_text="⌃⌥S" data-primary_sublime_text="Ctrl+Alt+S" data-secondary_intellij_idea_classic="⌘," data-primary_eclipse="Ctrl+Alt+S"> Ctrl + Alt + S </kbd>, чтобы открыть настройки IDE и выбрать Editor | Живые шаблоны.</li><li><p> На странице Emmet установите флажки рядом с шаблонами, которые вы хотите использовать.</p></li><li><p> Когда вы выбираете шаблон в списке, фокус перемещается в область текста шаблона, где в полях отображаются настройки выбранного шаблона.</p></li><li><p> В поле Текст шаблона добавьте требуемый текст и переменные в тело шаблона.</p></li><li><p> Нажмите кнопку «Изменить переменные». В открывшемся диалоговом окне «Редактировать переменные шаблона» укажите значения переменных по умолчанию в поле «Значение по умолчанию» и установите флажок «Пропустить, если определено», если необходимо.</p></li></ol><h3 data-toc="using_zen_coding_support#emmet_configure_expansion_key"><span class="ez-toc-section" id="i-41"> Настройте клавишу расширения аббревиатуры </span></h3><p> По умолчанию собственные сокращения Emmet и дополнительные живые шаблоны расширяются при нажатии <kbd data-secondary_macos="⇥" data-secondary_eclipse="⇥" data-secondary_emacs="N/A" data-primary_netbeans="Tab" data-secondary_netbeans="⇥" data-primary_emacs="N/A" data-secondary_eclipse_macos="⇥" data-primary_visual_studio="Tab" data-secondary_visual_studio="⇥" data-primary_windows="Tab" data-secondary_sublime_text_macos="⇥" data-secondary_sublime_text="⇥" data-primary_sublime_text="Tab" data-secondary_intellij_idea_classic="⇥" data-primary_eclipse="Tab"> вкладки </kbd>. Для дополнительных живых шаблонов WebStorm позволяет повторно определить ключ раскрытия по умолчанию. Обратите внимание, что этот пользовательский параметр не отменяет настройку по умолчанию для встроенной поддержки Emmet; вы просто получите возможность развернуть шаблон с помощью любого из этих ключей.</p><h4 data-toc="using_zen_coding_support#f3aef836"><span class="ez-toc-section" id="_Emmet-8"> Настройте клавишу раскрытия для собственных сокращений Emmet </span></h4><ol><li> Нажмите <kbd data-secondary_macos="⌘," data-secondary_eclipse="⌃⌥S" data-secondary_emacs="⌃⌥S" data-primary_netbeans="Ctrl+Alt+S" data-secondary_netbeans="⌃⌥S" data-primary_emacs="Ctrl+Alt+S" data-secondary_eclipse_macos="⌘," data-primary_visual_studio="Ctrl+Alt+S" data-secondary_visual_studio="⌃⌥S" data-primary_windows="Ctrl+Alt+S" data-secondary_sublime_text_macos="⌘," data-secondary_sublime_text="⌃⌥S" data-primary_sublime_text="Ctrl+Alt+S" data-secondary_intellij_idea_classic="⌘," data-primary_eclipse="Ctrl+Alt+S"> Ctrl + Alt + S </kbd>, чтобы открыть настройки IDE и выбрать Editor | Эммет.</li><li><p> На открывшейся странице Emmet выберите новую клавишу раскрытия вместо используемой по умолчанию <kbd data-secondary_macos="⇥" data-secondary_eclipse="⇥" data-secondary_emacs="N/A" data-primary_netbeans="Tab" data-secondary_netbeans="⇥" data-primary_emacs="N/A" data-secondary_eclipse_macos="⇥" data-primary_visual_studio="Tab" data-secondary_visual_studio="⇥" data-primary_windows="Tab" data-secondary_sublime_text_macos="⇥" data-secondary_sublime_text="⇥" data-primary_sublime_text="Tab" data-secondary_intellij_idea_classic="⇥" data-primary_eclipse="Tab"> Вкладка </kbd> из списка Расширить аббревиатуру с помощью.</p></li></ol><h4 data-toc="using_zen_coding_support#5cee490d"><span class="ez-toc-section" id="_Emmet-9"> Настройте ключи расширения для живых шаблонов Emmet </span></h4><ol><li> Нажмите <kbd data-secondary_macos="⌘," data-secondary_eclipse="⌃⌥S" data-secondary_emacs="⌃⌥S" data-primary_netbeans="Ctrl+Alt+S" data-secondary_netbeans="⌃⌥S" data-primary_emacs="Ctrl+Alt+S" data-secondary_eclipse_macos="⌘," data-primary_visual_studio="Ctrl+Alt+S" data-secondary_visual_studio="⌃⌥S" data-primary_windows="Ctrl+Alt+S" data-secondary_sublime_text_macos="⌘," data-secondary_sublime_text="⌃⌥S" data-primary_sublime_text="Ctrl+Alt+S" data-secondary_intellij_idea_classic="⌘," data-primary_eclipse="Ctrl+Alt+S"> Ctrl + Alt + S </kbd>, чтобы открыть настройки IDE, и выберите «Редактор» | Живые шаблоны.</li><li><p> На открывшейся странице «Живые шаблоны» разверните группу шаблонов Zen HTML, Zen CSS или Zen XSL и выберите нужный шаблон. Фокус переместится в область текста шаблона.</p></li><li><p> В списке «Развернуть с помощью» выберите ключ для раскрытия шаблона.</p></li></ol><h3 data-toc="using_zen_coding_support#emmet_surround_code_block_with_emmet_template"><span class="ez-toc-section" id="_Emmet-10"> Окружите блок кода шаблоном Emmet </span></h3><ol><li><p> В редакторе выберите блок кода, который нужно окружить, и нажмите <kbd data-secondary_macos="⌥⌘J" data-secondary_eclipse="⌃⌥J" data-secondary_emacs="⌃⌥J" data-primary_netbeans="Ctrl+Alt+J" data-secondary_netbeans="⌃⌥J" data-primary_emacs="Ctrl+Alt+J" data-secondary_eclipse_macos="⌥⌘J" data-primary_visual_studio="Ctrl+E, U" data-secondary_visual_studio="⌃E, U" data-primary_windows="Ctrl+Alt+J" data-secondary_sublime_text_macos="⌥⌘J" data-secondary_sublime_text="⌃⌥J" data-primary_sublime_text="Ctrl+Alt+J" data-secondary_intellij_idea_classic="⌥⌘J" data-primary_eclipse="Ctrl+Alt+J"> Ctrl + Alt + J </kbd> или выберите в главном меню.</p></li><li><p> Из списка выберите Emmet:</p></li><li><p> Введите используемое сокращение Emmet и нажмите <kbd data-secondary_macos="⏎" data-secondary_eclipse="⏎" data-secondary_emacs="⏎" data-primary_netbeans="Enter" data-secondary_netbeans="⏎" data-primary_emacs="Enter" data-secondary_eclipse_macos="⏎" data-primary_visual_studio="Enter" data-secondary_visual_studio="⏎" data-primary_windows="Enter" data-secondary_sublime_text_macos="⏎" data-secondary_sublime_text="⏎" data-primary_sublime_text="Enter" data-secondary_intellij_idea_classic="⏎" data-primary_eclipse="Enter"> Введите </kbd>.</p><p> Обратите внимание на список справа.Щелкните стрелку вниз, чтобы просмотреть историю недавно примененных живых шаблонов Emmet:</p><p> Также обратите внимание на цветовую индикацию. Если вы введете допустимое сокращение Emmet, фон станет зеленым. Однако при вводе несуществующего сокращения фон становится красным:</p></li></ol><p> В HTML и XML вы можете перемещаться между точками редактирования, то есть между теми точками кода, где применимы шаблоны Emmet.</p><ul><li><p> Чтобы переместить курсор в предыдущую точку редактирования, выберите или нажмите <kbd data-secondary_macos="⌃⌥←" data-secondary_eclipse="⌥⇧[" data-secondary_emacs="⌥⇧[" data-primary_netbeans="Alt+Shift+[" data-secondary_netbeans="⌥⇧[" data-primary_emacs="Alt+Shift+[" data-secondary_eclipse_macos="⌃⌥←" data-primary_visual_studio="Alt+Shift+[" data-secondary_visual_studio="⌥⇧[" data-primary_windows="Alt+Shift+[" data-secondary_sublime_text_macos="N/A" data-secondary_sublime_text="⌥⇧[" data-primary_sublime_text="Alt+Shift+[" data-secondary_intellij_idea_classic="⌃⌥←" data-primary_eclipse="Alt+Shift+["> Alt + Shift + [</kbd>.</p></li><li><p> Чтобы переместить курсор в следующую точку редактирования, выберите или нажмите <kbd data-secondary_macos="⌃⌥→" data-secondary_eclipse="⌥⇧]" data-secondary_emacs="⌥⇧]" data-primary_netbeans="Alt+Shift+]" data-secondary_netbeans="⌥⇧]" data-primary_emacs="Alt+Shift+]" data-secondary_eclipse_macos="⌃⌥→" data-primary_visual_studio="Alt+Shift+]" data-secondary_visual_studio="⌥⇧]" data-primary_windows="Alt+Shift+]" data-secondary_sublime_text_macos="N/A" data-secondary_sublime_text="⌥⇧]" data-primary_sublime_text="Alt+Shift+]" data-secondary_intellij_idea_classic="⌃⌥→" data-primary_eclipse="Alt+Shift+]"> Alt + Shift +] </kbd>.</p></li></ul><p> Последнее изменение: 26 августа 2021 г.</p><h2><span class="ez-toc-section" id="_Emmet-11"> Краткий справочник по подключаемому модулю Emmet </span></h2><p> Постоянное написание одного и того же синтаксиса html не только ошеломляет, но и снижает вашу продуктивность. В случае запуска html-документа плагин Emmet позволяет вам ввести в 6 символов то, что вручную потребовало бы 171. Примеры ниже знакомят вас с тем, как вы сможете использовать этот мощный инструмент для себя.</p><blockquote><p> Плагин Emmet должен быть загружен в вашу среду IDE, чтобы синтаксис emmet отображался в HTML. Документацию и информацию для загрузки можно найти на Emmet.io.</p></blockquote><h4><span class="ez-toc-section" id="_HTML-3"> ЗАПУСК HTML-ДОКУМЕНТА С ЦЕПИ </span></h4><p> Emmet Синтаксис: <br/></p><p> Нажав Tab или Command-E, Эммет автоматически преобразует приведенный выше синтаксис в этот html-вывод: <br/></p><pre> <code> <! DOCTYPE html>
<html lang = "ru">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1.0 ">
  <title> Документ