Команды emmet


Возможности Emmet

Как же действует Emmet? Оформление для html-разметки задается при помощи таблиц стилей. Для того, чтобы указать какие-то свойства для того или иного тега, мы пишем разнообразные конструкции из селекторов, обозначающих эти теги, например span>a, p+div

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

Допустим, нам нужен код списка с вложенными ссылками. Если писать это все вручную, то процесс займет много времени, особенно при большом количестве элементов списка. Поэтому перекладываем эту функцию на Emmet. Указываем css-подобную комбинацию селекторов, ul>li*5>a, даем команду Expand Abbreviation и вуаля, получаем кусок html-кода вида

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

Общий синтаксис

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

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

получается

Сестринские элементы

Оператор +


  служит для вывода элементов одного уровня, которые не вложены друг в друга, а просто находятся рядом.

будет выведено

Умножение

Тут есть отличие от CSS — оператор * показывает сколько нужно создать элементов :

выводит

Группировка

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

Нумерация элементов

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

будет выведено

Разрешается вывод номеров из произвольного количества знаков, путем повторения $.

получится

Атрибуты тегов

Добавлять классы и id к выводимым элементам можно абсолютно по такому же принципу как и в CSS. Рассмотрим пример

будет выведено

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


 результат

Текст

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

Генератор Lorem Ipsum

Для того, чтобы узнать, как будет выглядеть html-шаблон верстальщики используют так называемый текст-рыбу, как правило он произвольный, бессмысленный. Есть давняя традиция применения в качестве такого текста отрывка на латыни Lorem Ipsum…

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

Рассмотрим теперь работу плагина Emmet более детально на примере  использования Notepad++, поскольку этот редактор наверное самый популярный.

Для начала нужно установить плагин. Попробуем сделать это через специальный менеджер. Для этого в выпадающем меню жмем раздел Плагины и находим пункт Plagin Manager. В открывшемся окошке переходим на вкладку Avaliable.

plagin-manager

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

emmet-plugin

Теперь Emmet появился в выпадающем меню вместе с другими плагинами. Посмотрите какие  команды он способен выполнять.


команды-Emmet

Кстати вы можете настроить горячие клавиши для вызова команд, если вас не устраивают те, что стоят по умолчанию. В меню выбираем Опции | Горячие клавиши, далее кнопка Plugin commands и ищем  команды, которые хотим переназначить. Допустим, вы хотите вызывать команду Expand Abbreviation с помощью кнопки Tab. Кликаем Modify и в появившемся окошке задаем клавишу или сочетание клавиш.

опции-нотпад горячие-клавиши-Emmet

Полезные команды

Итак, осталось охарактеризовать самые интересные команды, которые умеет выполнять Emmet.

  • Wrap with Abbreviation — Оборачивает элемент каким-либо тегом или совокупностью тегов, заданных сокращенно. Просто устанавливаем курсор внутри тега и нажимаете сочетание клавиш Ctrl+Alt+Shift+Enter. В появившемся текстовом поле вписываем выражение, внутри которого будет находиться выбранный элемент (к примеру div.wrap>p). Таким путем можно оборачивать элементы в список ul li.

  • Select Next Item / Pervous Item —  позволяет быстро перемещаться (соответственно вперед и назад) между важными участками кода — между тегами, атрибутами и их значениями, а также новыми строками с отступом.
  • Toggle Comment — Дает возможность закомментировать любой тег html, правило либо свойство CSS буквально одним щелчком, установив курсор и вызвав эту команду. Распознает при этом код (html или css) и ставит соответствующий вид комментария (<!—-!> или /**/).
  • Split/Join Tag — соединяет/разъединяет теги, т.е. делает из парных одиночные и обратно, из одиночных парные.
  • Match Pair Outward — поиск тега или границ содержимого тега исходя из позиции курсора. Дает выделение, которое при повторных нажатиях  будет расширяться.
  • Remove Tag — быстрое удаление выбранного элемента (открывающий и закрывающий тег).
  • Reflect CSS Value — Очень полезная возможность для верстальщиков: копирует значение CSS свойства под курсором  и, при нажатии команды, вставляет его в свойства с вендорным  префиксом.
  • Update Image Size — помогает автоматизировать процесс указания ширины и высоты картинки: поместите курсор внутри тега <img> и выполните команду, чтобы вставить данные атрибуты.
  • Encode/Decode Image to data:URL — HTML и CSS позволяют вставлять внешние ресурсы по схеме data:URL. Как правило, преобразования изображений в base64 делается с помощью каких-то онлайн сервисов и прочих внешних средств, что приводит к большим затратам времени. Благодаря этой команде конвертация изображения (и обратное преобразование в файл) происходит прямо в редакторе.

Еще одна интересная особенность Emmet — ускорение написания свойств стилей, т.е. он распознает не просто сокращение названия свойства (ну, например, h — height, m — margin, lh — line-height), а сокращение названия свойства и его значения (p30 — padding:30px;  fwb — font-weight:bold; и т.д.). Очень удобно! Конечно запомнить все эти сокращения труднее, но на первом этапе для таких случаев можно просто использовать подсказку.

nikel-blog.ru

Содержание

  • Аббревиатуры
  • Синтаксис аббревиатур
    • Элементы
    • Операторы вложения
      • Вложение: >
      • Добавление: +
      • На уровень вверх: ^
      • Повторение: *
      • Группировка: ()
    • Операторы атрибутов
      • ID и CLASS
      • Пользовательские атрибуты
      • Нумерация элементов: $
      • Изменение начала и направления нумерации

    • Текст: {}
    • Совет по форматированию аббревиатур
  • Типы элементов
    • Сниппеты
    • Аббревиатуры
    • Псевдонимы
  • Неявные имена тегов
    • Как это работает
  • Генератор “Lorem Ipsum”
    • Повторяющийся “Lorem ipsum”

В принципе, большинство текстовых редакторов позволяют хранить и повторно использовать часто используемые фрагменты кода, называемые «сниппеты». Хотя сниппеты и являются хорошим способом повышения производительности, все их реализации имеют общие недостатки: вы должны сначала определить сниппет и вы не можете расширить их при исполнении.
Emmet выводит идею сниппетов на совершенно новый уровень: вы вводите CSS-подобные выражения, которые динамически анализируются, и получаете результат в зависимости от введённой аббревиатуры. Emmet разработан и оптимизирован для HTML/XML и CSS, но может использоваться и для языков программирования.
Вы можете скачать Emmet в виде плагина для одного из редакторов, которых поддерживается не мало:
download-emmet-for-editors


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

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


#page>div.logo+ul#navigation>li*5>a{Item $} 

превращается в
… с помощью всего одного нажатия клавиши. Во многих редакторах (например, Eclipse, Sublime Text 2, Espresso и т.д.) плагины также будут генерировать надлежащие позиции tabstop, что даст вам возможность пройти между важными местами сгенерированного кода с помощью клавиши табуляции.
Аббревиатуры оптимизированы для HTML и XML, но не ограничиваются ими, и делают утомительное написание кода разметки сверхбыстрым. Изучите синтаксис аббревиатур, чтобы раскрыть всю мощь Emmet.

Синтаксис аббревиатур

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


Элементы

Вы можете использовать имена элементов, как p или div для генерации HTML-тегов. Emmet не имеет предопределенного набора доступных имен тегов, поэтому вы можете написать любое слово и превратить его в тег: сdiv<div></div>, foo


<foo></foo> и так далее.


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

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

Вложение: >

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

div>ul>li

…станет

Добавление: +

Используйте оператор + для размещения элементов рядом друг с другом на том же уровне:

div+p+bq

…выведет

На уровень вверх: ^

С оператором > вы спускаетесь по сгенерированному дереву и позиции всех родственных элементов будут определятся в отношении самого глубокого элемента:

div+div>p>span+em

…будет преобразована в
С оператором ^ вы можете подняться на один уровень вверх в дереве и изменить контекст, в котором должны отображаться следующие элементы:

div+div>p>span+em^bq

выведет …
Вы можете использовать столько угодно операторов ^, каждый из них будет перемещать на один уровень вверх:

div+div>p>span+em^^^bq

…будет выводить

Повторение: *

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


ul>li*5

выведет …

Группировка: ()

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

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

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

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

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


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

Операторы атрибутов используются для изменения атрибутов выводимых элементов. Например, в HTML и XML вы можете быстро добавить атрибут class к создаваемому элементу.

ID и CLASS

В CSS вы используете elem#id и elem.class , чтобы выбрать элементы с заданным id или атрибутом class. В Emmet вы можете использовать тот же синтаксис, чтобы добавить эти атрибуты к указанному элементу:

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

…выведет

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

Для добавления к элементу пользовательских атрибутов вы можете использовать нотацию [attr] (как в CSS):

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

…выведет


  • Вы можете размещать внутри квадратных скобок неограниченное количество атрибутов.
  • Вам не обязательно указывать значения атрибутов: td[colspan title] сгенерирует <td colspan="" title=""> с табстопами внутри каждого пустого атрибута (если ваш редактор поддерживает их).
  • Для заключения в кавычки значений атрибутов вы можете использовать как одинарные, так и двойные кавычки.
  • Не надо заключать в кавычки значения, если они не содержат пробелы: td[title=hello colspan=3] будет работать.

Нумерация элементов: $

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

ul>li.item1*5

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

ul>li.item001*5

выведет …

Изменение начала и направления нумерации

С модификатором @ вы можете изменить направление нумерации (по возрастанию или по убыванию) и начальное значение.
Например, чтобы изменить направление, добавьте @- после $:

ul>li.item1*5

…даст результат
Для изменения начального значения счетчика добавьте модификатор @N:

ul>li.item3*5

…преобразуется в
Вы можете использовать эти модификаторы вместе:

ul>li.item3*5

…преобразуется в


Текст: {}

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

a{Click me}

…выведет
Обратите внимание, что {текст} используется и обрабатывается как отдельный элемент (как div, p и др.), но имеет особое значение, когда написан сразу после элемента. Например, a{click} и a>{click} дадут одинаковый результат, но a{click}+b{here} и a>{click}+b{here} нет:
Во втором примере элемент <b> расположен внутри элемента <a>. И вот в чем разница: когда {текст} пишется сразу после элемента, то это не изменяет родительского контекста. Вот более сложный пример, показывающий, почему это важно:

p>{Click }+a{here}+{ to continue}

…даст результат
В этом примере, чтобы написать Click here to continue внутри элемента <p>, мы четко движемся вниз по дереву, используя оператор > после p, но для элемента <a> мы его не используем, так как в нём нам нужно только слово, без изменения родительского контекста.
Для сравнения, та же самая аббревиатура, написанная без вложенного оператора >:

p{Click }+a{here}+{ to continue}

…выводит


Совет по форматированию аббревиатур

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

(header > ul.nav > li*5) + footer

Но она не будет работать, потому что пробел — это символ остановки, на котором Emmet прекращает разбор аббревиатуры.
Многие пользователи ошибочно полагают, что каждая аббревиатура должна быть написана с новой строки, но они ошибаются: вы можете вводить и выполнять аббревиатуры где-угодно в тексте.


Типы элементов

в HTML- и XML-документах, при развертывании аббревиатур все их части трансформируются «на лету» в HTML/XML-теги. Но некоторые элементы, как например a или img, превращаются в элементы с предопределенными атрибутами: <a href=""></a> и <img src="" alt="" />. Откуда Emmet знает когда следует добавлять атрибуты?
Все описания элементов Emmet хранятся в файле snippets.json в следующем формате:
Как вы можете видеть, на первом уровне размещаются языки разметки, для которых определены элементы. Внутри этой секции расположены определения элементов, разделённые на две части: snippets и abbreviations.


Сниппеты

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


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

Аббревиатуры — это на самом деле блоки с некоторыми подсказками. Emmet, в основном, используется для написания HTML/XML-тегов, объявление аббревиатуры использует XML-формат для описания элемента.
Emmet анализирует определение аббревиатуры и получает следующие данные:

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

Давайте внимательнее посмотрим на объявления аббревиатур HTML на примере выше. Элемент link определяется как <link rel="stylesheet" href="" /> (двойные кавычки должны быть экранированы в JSON; или используйте одинарные кавычки). Это определение говорит, что этот тег, созданный для аббревиатуры link, должен быть назван link и должен содержать два атрибута: rel со значением по умолчанию “stylesheet” и href с пустым значением (именно в этом порядке), а также сгенерированный элемент не должен содержать закрывающий тег.
После раскрытия аббревиатуры link вы получите следующий результат в HTML:
Вы можете переопределить значения атрибутов по умолчанию и добавить новые:

link[rel=prefetch title="Hello world"]

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

link>xsl:apply-templates

…выведет


Псевдонимы

В разделе abbreviations файла snippets.json вы можете также определять псевдонимы: сокращения для широко используемых аббревиатур. Псевдонимы могут использоваться для определения:

  • коротких названий для длинных имен тегов;
  • ссылок на часто используемые аббревиатуры.

В файле snippets.json вы можете найти следующие определения:
В примере выше, при преобразование аббревиатуры bq, Emmet будет искать определение аббревиатуры blockquote. Если его не существует, он выведет просто <blockquote></blockquote>. Аббревиатура ol+ фактически даёт такой же результат как и ol>li.
Определение ol+, возможно, выглядят неоднозначно, поскольку оно содержит + в конце, который также является оператором добавления. Emmet корректно выполняет такие аббревиатуры и знак «плюс» оставлен по историческим причинам. Просто помните, что вам не нужно использовать +, чтобы создать псевдоним аббревиатуры.


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

Даже с таким мощным движком аббревиатур, который может развернуть большую HTML-конструкцию из короткой аббревиатуры, написание имен тегов может быть очень утомительным.
Во многих случаях вы можете пропускать ввод имён тегов и Emmet будет подставлять их за вас. Например, вместо div.content вы можете просто написать .content и получите <div class="content"></div>.

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

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

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

Взгляните на некоторые эквиваленты аббревиатур с явными и неявными именами тегов:

.wrap>.content div.wrap>div.content
em>.info em>span.info
ul>.item*3 ul>li.item*3
table>#row$*4>[colspan=2] table>tr#row$*4>td[colspan=2]

Генератор “Lorem Ipsum”

Текст “Lorem ipsum” используется многими веб-разработчикам для тестирования того, как их шаблоны в формате HTML будут выглядеть с реальными данными. Часто разработчики используют услуги третьих сторон для создания текста “Lorem ipsum”, но теперь вы можете сделать это прямо в вашем редакторе. Просто выполните аббревиатуры lorem или lipsum, чтобы получить следующий сниппет:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?

lorem не просто обычный сниппет — это на самом деле генератор. Каждый раз, когда вы выполняете его, он будет генерировать 30 слов фиктивного текста, разделённого на несколько предложений.
Вы можете указать, сколько слов должно быть сгенерировано. Например, lorem100 создаст 100 слов.

Вы можете использовать генератор lorem внутри повторяющихся элементов, чтобы создать теги, полностью заполненные случайными предложениями. Например, аббревиатура p*4&gt;lorem сгенерирует следующее:

dmzik.blogspot.com

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

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

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

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

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

Команды emmet

  • html:5 или ! — HTML5
  • html:xt — XHTML transitional
  • html:4s — HTML4 strict

Добавление классов, id-шек, текста и атрибутов

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

Команды emmet

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

Теперь давайте посмотрим, как добавить текст и атрибут. Для того чтобы задать элементу какой-то текст, его значение пишем в фигурных скобках. К примеру h1{foo} преобразится в:

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

Команды emmet

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

Благодаря Emmet и синтаксису написания вложенных выражений, вы можете полностью создать полноценный html документ, воспользовавшись одной аббревиатурой. Родительский элемент ставится перед знаком >, а все внутренние элементы должны идти за ним. Знак + позволяет соединить несколько аббревиатур, так что сгенерированный код будет идти друг за другом. Новый оператор под знаком ^ позволяет подняться на один уровень выше.

Команды emmet

Группировка

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

Команды emmet

Подстановка названий тегов

Для того чтобы создать div блок с класом item, достаточно преобразовать аббревиатуру div.item.

В прошлом написание подобных выражений было упрощено. К примеру, чтобы получить тот же <div class="item"></div>, можно было написать аббревиатуру .item. Emmet в этом плане стал ещё более продвинутым. Теперь плагин может автоматически определять, какой тег нужно подставить в зависимости от родителя. Т.е. если мы преобразуем аббревиатуру .item внутри списка <ul>, то аббревиатура превратится в <li class="item"></li>, вместо <div class="item"></div>, как это было раньше.

Команды emmet

Вот небольшая шпаргалка:

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

Умножение

Также, с помощью знака *, вы можете определить, сколько раз должен напечататься нужный вам элемент. Таким образом, аббревиатура ul>li*3 преобразуется в:

Команды emmet

Нумерация

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

Команды emmet

Попробуйте сами!

Не терпится попробовать?! Следующее текстовое поле как раз для вас. Пишите аббревиатуру, затем нажимайте tab и вуаля!

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

Значения

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

Команды emmet

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

Список возможных значений:

  • p%
  • eem
  • xex

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

К примеру, с помощью выражения @f, вы можете получить код:

В данном случае, такие опции как background-image, border-radius, font, @font-face, text-outline, text-shadow могут быть добавлены, если к выражению приписать знак +. К примеру, @f+ преобразуется в:

Команды emmet

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

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

Команды emmet

CSS3 префиксы

CSS3 конечно очень крут, но запомнить все существующие префиксы просто невозможно! Ну и не надо! Emmet и тут окажет нам помощь. К примеру, слово trs будет преобразовано в:

Команды emmet

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

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

  • w-webkit-
  • m-moz-
  • s-ms-
  • o-o-

Градиенты

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

Команды emmet

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

Lorem Ipsum

С Emmet вы можете забыть об онлайн сервисе Lorem Ipsum. Теперь для этого есть специальная аббревиатура: lorem или ipsum. Также вы можете указать, сколько слов нужно сгенерировать. К примеру, lorem10 преобразуется в:

Команды emmet

Также lorem ipsum можно смешать с другими элементами. К примеру, p*3>lorem5:

Настройка под себя

Emmet даёт нам возможность изменить большой спектр настроек плагина. Для этого нужно будет отредактировать три файла:

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

Для преобразования работы фильтров и действий попробуйте изменить файл preferences.json

Для контроля отображения HTML и XML кода, редактируйте файл syntaxProfiles.json

И ещё!

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

Официальную страничку плагина можно найти тут. Также в вашем распоряжении документация и шпаргалка

ruseller.com

Вы до сих пор пишите теги html и css свойства вручную? Пришло время это исправить! Сегодня мы поговорим о плагине emmet, который поможет нам в этом.

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

Для начала его нужно установить. В Sublime Text, о котором недавно была написана статья, это делается очень просто. Откройте command palette, нажав сочетание клавиш cmd+shift+p, или перейдите в пункт tools и выберите там command palette. Теперь введите «install package» и нажмите enter. Дальше введите «emmet» и снова нажмите enter. После того, как плагин загрузится и установится, перезапустите Sublime Text.

Установка завершена, и теперь мы можем начать пользоваться плагином emmet. Введите

div

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

<div></div>

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

a

Теперь нажмите tab, и мы получим следующее

<a href=""></a>

Как видите, emmet добавил атрибут href самостоятельно. Если же вы введете img, то там сразу будут атрибуты src и alt.

Теперь рассмотрим, как добаблять классы и id. Делается это точно так же, как и в css: класс с помощью ., а id с помощью #

.block

В результате получим

<div class="block"></div>

То же самое и с id

#block

Получим следующее

<div id="block"></div>

Заметьте, что я не писал слово div, а просто ставил точку или решетку и писал нужный мне класс или id. Дело в том, что мы можем пропускать название тега и тогда emmet сам будет додумывать, какой же тег поставить. В большинстве случаев это будет div, но, если вы, например, напишите так внутри тега ul, то тег будет li с нужным классом или id.

Если вы хотите сами ввести какой-то атрибут, то напишите его в квадратных скобках

div[data-attribute="value"]

Получим следующее

<div data-attribute="value"></div>

Чтобы вкладывать теги внутри других тегов, нужно использовать знак больше

ul>li>a

Получим следующее

<ul>
  <li><a href=""></a></li>
</ul>

С помощью символа * можно указать, сколько таких тегов нам нужно

ul>li*5

Вот, что у нас получится

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

Если вам нужно добавить тег на том же уровне, используйте знак +

#container>.left+.right

Результат

<div id="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

С помощью символа $ мы можем указать, что каждый тег следует нумеровать автоматически

ul>li.item$*5

Результат

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

Если вам нужен ведущий ноль, то напишите знак $ 2 раза, если 2 ведущих нуля, то 3 знака $ и т.д.

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

a{Some text}

Результат

<a href="">Some text</a>

Если во время верстки вам нужен какой-то текст, то просто напишите lorem

lorem

Результат

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, mollitia quibusdam voluptatibus fuga dolorem officiis animi error ex ea ipsa excepturi incidunt quis sunt ducimus rerum corrupti obcaecati ipsum quisquam.

Если вам нужно какое-то определенное количество слов, то напишите цифру, обозначающую количество слов после.

lorem3

Результат

Lorem ipsum dolor.

Чтобы создать html структуру, просто напишите знак !

!

Результат

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

</body>
</html>

Теперь поговорим о том, как emmet поможет нам в css

Там достаточно просто написать начальные буквы свойства и значение, а потом нажать tab. Например

m10

В результате получим

margin: 10px;

В некоторых свойствах уже стоят значения по-умолчанию. Например, в свойстве text-align

ta

Результат

text-align: left;

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

tac

Результат

text-align: center;

Все рассматривать нет смысла. Документацию по плагину emmet вы можете найти здесь: http://docs.emmet.io/cheat-sheet/

В конце стоит сказать, что если вам по каким-то причинам не нравится клавиша tab, то вы можете поменять ее. Для этого зайдите по следующему пути: Perferences->Package Settings->Emmet->Key Bindings — default. Используйте поиск(cmd+f или перейдите по пути Find->Find) С помощью поиска найдите команду «expand_abbreviation_by_tab». Выше нее, в массиве keys, в кавычках написано «tab». Измените это значение на свое, например, на «ctrl+e». Но это не совсем правильно. Лучше будет, если вы скопируете весь этот объект и вставите его в файл Key Bindings — User, а там уже меняйте сочетание клавиш. Сделано это для того, чтобы если что, вы могли вернуть все настройки по-умолчанию с помощью файла Key Bindings — Default.

Итак, на этом все. Сегодня мы рассмотрели плагин emmet для текстового редактора Sublime Text. Если вы используете другой редактор, то поищите этот плагин для него в интернете. Удачи!

myrusakov.ru

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

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

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

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

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

div#content.column

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

<div id="content" class="column"></div>

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

input[type="text" name="address" placeholder="some text" disabled]

Результат:

<input type="text" name="address" placeholder="some text" disabled="">

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

input:text

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

input:t

Результат:

<input type="text" name="" id="">

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

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

link:css

Результат:

<link rel="stylesheet" type="text/css" href="style.css" media="all">

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

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

script:src

получаем:

<script type="text/javascript" src=""></script>

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

ul>li*5

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

div#dialog>p>span{text}

Результат:

<div id="dialog">  	<p>  		<span> text </span>  	</p>  </div>

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

select>option[value="$"]*10

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

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

Шаблоны HTML

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

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

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

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

<!--[if IE]>  <![endif]-->

и второй:

<!--[if !IE]><!-->  <!--<![endif]-->

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

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

<table>  	<tr>  		<td></td>  	</tr>  </table>    <ul>  	<li></li>  </ul>    <ol>  	<li></li>  </ol>    <dl>  	<dt></dt>  	<dd></dd>  </dl>    <select name="" id="">  	<option value=""></option>  </select>

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

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

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

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

<div>  	<p>Hello</p>  </div>

Необходимо создать внутри div новый элемент div с классом wrap и поместить в него существующий параграф с текстом. Устанавливаем курсор внутри тега <p> или даже закрывающего тега </p>, открываем диалог и пишем там:

div.wrap

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

<div>  	<div class="wrap">  		<p>Hello</p>  	</div>  </div>

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

<div>  	<p>About us</p>  	<p>Catalog</p>  	<p>Contacts</p>  </div>

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

ul>li*>a

В результате получим следующий код:

<div>  	<ul>  		<li><a href=""><p>About us</p></a></li>  		<li><a href=""><p>Catalog</p></a></li>  		<li><a href=""><p>Contacts</p></a></li>  	</ul>  </div>

Удаление тегов

С помощью Emmet можно упростить процесс удаления ненужных тегов. Достаточно установить курсор на тот тег, который необходимо удалить, и вызвать команду нажатием клавиш Ctrl+Shift+; (Sublime Text 2) — удалится не только открывающий тег, но и закрывающий, а также строки, на которых они находились. В Notepad++ нет горячих клавиш по умолчанию для этой команды, но их можно настроить в меню «Опции» > «Горячие клавиши». В открывшемся окне выбрать вкладку «Plugin commans» и назначить там комбинацию клавиш для команды «Remove tag».

Работа с CSS

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

text-decoration: none;

Точно такой же результат дадут записи td-n и td:n.

Если нужно указать несколько значений для свойства, это можно сделать через знак дефиса:

m10-20

Результат:

margin: 10px 20px;

Подобным образом задаются и отрицательные значения:

m-10--20

Результат:

margin: -10px -20px;

Если после числовых значений свойств не указывать единицы измерения, то по умолчанию автоматически выставляются пиксели, за исключением случая, когда значения нецелые — тогда выставляются em. Также существует несколько сокращений для единиц измерения: вместо % можно писать p, вместо em — e, а вместо ex — x.
Например:

w100p

Результат:

width: 100%;

Если добавить в конец аббревиатуры восклицательный знак, то к свойству будет добавлено значение !important, например:

p20!

даст результат:

padding: 20px !important;

Однако наиболее интересная возможность для работы с CSS, которую предоставляет Emmet — это создание свойств с вендорными префиксами. Для ряда таких свойств (border-radius, transform и т. д.) автоматически создаются копии со всеми необходимыми вендорными префиксами. Так, например, аббревиатура brs5 будет расширена следующим образом:

-webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;

Также Emmet значительно облегчает процесс написания стилей для элементов с градиентом. Для этого используется специальная аббревиатура lg (или linear-gradient), после которой в круглых скобках указываются параметры градиента:

lg(left, #ddd, #ccc)

Результат:

background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#ddd), to(#ccc));  background-image: -webkit-linear-gradient(left, #ddd, #ccc);  background-image: -moz-linear-gradient(left, #ddd, #ccc);  background-image: -o-linear-gradient(left, #ddd, #ccc);  background-image: linear-gradient(left, #ddd, #ccc);

Для редактирования значений в уже написанных свойствах с вендорными префиксами можно воспользоваться командой обновления значения (горячие клавиши в Sublime Text 2 — Ctrl+Shift+R). Сначала нужно исправить значение в одной из строк, затем вызвать команду, и данное значение обновится во всех копиях этой строки.

Математические вычисления

Emmet позволяет выполнять несложные арифметические вычисления прямо во время написания HTML или CSS кода, не используя какие-либо сторонние калькуляторы. Нередко возникают ситуации, когда необходимо вычислить значения отступов, ширины элементов и других значений; данная особенность освобождает разработчика от необходимости переключаться между окнами редактора и калькулятора. Поддерживаются операции сложения, вычитания, умножения и деления. В Sublime Text 2 горячие клавиши для этой операции — Ctrl+Shift+Y, в Notepad++ по умолчанию горячих клавиш для этой команды нет, необходимо задать их самому (меню «Опции» > «Горячие клавиши»).

В каких случаях стоит использовать Emmet

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

Например, необходимо сделать таблицу из пяти строк и пяти столбцов, в первой колонке должна быть нумерация строк (от 1 до 5). Такая разметка создается при помощи одной небольшой строки:

table>tr*5>td{$}+td*4

Результат (37 строк кода):

<table>  	<tr>  		<td>1</td>  		<td></td>  		<td></td>  		<td></td>  		<td></td>  	</tr>  	<tr>  		<td>2</td>  		<td></td>  		<td></td>  		<td></td>  		<td></td>  	</tr>  	<tr>  		<td>3</td>  		<td></td>  		<td></td>  		<td></td>  		<td></td>  	</tr>  	<tr>  		<td>4</td>  		<td></td>  		<td></td>  		<td></td>  		<td></td>  	</tr>  	<tr>  		<td>5</td>  		<td></td>  		<td></td>  		<td></td>  		<td></td>  	</tr>  </table>

Многие плагины, используемые разработчиками, требуют определенной разметки тех элементов, к которым они подключаются. Зная заранее о том, какую структуру необходимо создать, гораздо удобнее сделать это сразу, одной командой. Так будет выглядеть создание разметки виджета «Accordion» популярной библиотеки jQuery UI:

div#accordion>(h3+div>p)*5

Результат:

<div id="accordion">  	<h3></h3>  	<div>  		<p></p>  	</div>  	<h3></h3>  	<div>  		<p></p>  	</div>  	<h3></h3>  	<div>  		<p></p>  	</div>  	<h3></h3>  	<div>  		<p></p>  	</div>  	<h3></h3>  	<div>  		<p></p>  	</div>  </div>

Или виджета «Tabs»:

div#tabs>(ul>li*5>a[href="#tabs-$"])+div#tabs-$*5>p

Результат:

<div id="tabs">  	<ul>  		<li><a href="#tabs-1"></a></li>  		<li><a href="#tabs-2"></a></li>  		<li><a href="#tabs-3"></a></li>  		<li><a href="#tabs-4"></a></li>  		<li><a href="#tabs-5"></a></li>  	</ul>  	<div id="tabs-1">  		<p></p>  	</div>  	<div id="tabs-2">  		<p></p>  	</div>  	<div id="tabs-3">  		<p></p>  	</div>  	<div id="tabs-4">  		<p></p>  	</div>  	<div id="tabs-5">  		<p></p>  	</div>  </div>

Фильтрация

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

  • haml — генерирует результат как HAML-код, включен по умолчанию, если выбран синтаксис HAML.

Без фильтра аббревиатура

#content>ul.nav>li*2

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

<div id="content">  	<ul class="nav">  		<li></li>  		<li></li>  	</ul>  </div>

Если добавить фильтр |haml, получим разметку в виде HAML-кода:

#content   %ul.nav   		%li   		%li
  • html — генерирует HTML-код, включен по умолчанию везде, кроме HAML-файлов
  • e — заменяет символы <, > и & соответственно на последовательности &lt;, &gt; и &amp

Добавим в предыдущий пример фильтр |e:

#content>ul.nav>li*2|e

Результат:

&lt;div id="content"&gt;  	&lt;ul class="nav"&gt;  		&lt;li&gt;&lt;/li&gt;  		&lt;li&gt;&lt;/li&gt;  	&lt;/ul&gt;  &lt;/div&gt;
  • c — добавляет комментарии в код
  • s — выводит всю разметку в одну строку
  • t — работает только при оборачивании тегов; обрезает маркеры оборачиваемых пунктов списка.

Пусть нужно каждый из пунктов следующего списка обернуть в ссылку:

<div>  	1. About us  	2. Catalog  	3. Contacts	  </div>

Список нумерованный, и, если бы количество пунктов было в нем гораздо большим, то процесс удаления номеров занял бы значительное время. Вместо этого можно применить команду оборачивания тегов, описанную выше, добавив в конце фильтр |t:

a*|t

Результат:

<div>  	<a href="">About us</a>  	<a href="">Catalog</a>  	<a href="">Contacts</a>  </div>

Настройка

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

1. Настройка горячих клавиш команд

Каждой команде Emmet можно назначить любое удобное сочетание горячих клавиш. В Sublime Text 2 для этого нужно открыть в папке плагина файл Default(Windows).sublime-keymap (для Windows), найти нужную команду и назначить для нее другое сочетание клавиш. Для Notepad++, как было сказано ранее, настройка горячих клавиш осуществляется в меню «Опции» > «Горячие клавиши» на вкладке «Plugin commands».

2. Возможность расширения позволяет добавлять свои команды и фильтры

Можно в файле Emmet.sublime-settings определить параметр extensions_path, и Emmet будет подгружать все .js-файлы автоматически при запуске Sublime Text 2.

3. Добавление и редактирование сниппетов

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

4. Настройка команд

Чтобы скорректировать результаты выполнения некоторых команд, нужно создать в папке расширений файл preferences.json, в котором указать значения опций, полный список и описание которых перечислено в документации: http://docs.emmet.io/customization/preferences/.

Например, встроенный генератор градиента, о котором шла речь в разделе «Работа с CSS», не поддерживает градиенты для Internet Explorer. Это можно исправить, сделав небольшую настройку в preferences.json:

{   "css.gradient.prefixes": "webkit, moz, o, ms"  }

К трём префиксам для градиента, которые были установлены по умолчанию, мы добавили еще один — «ms». Результат работы генератора будет выглядеть таким образом:

background-image: -webkit-gradient(linear, 0 0, 0 100%, from("555"), to("666"));  background-image: -webkit-linear-gradient("555", "666");  background-image: -moz-linear-gradient("555", "666");  background-image: -o-linear-gradient("555", "666");  background-image: -ms-linear-gradient("555", "666");  background-image: linear-gradient("555", "666")

Теперь код сгенерирует градиент в IE 10, но в браузерах ниже IE 9 он работать не будет. Для того, чтобы задать градиент для старых версий IE, нужно задать такое свойство:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#555555', endColorstr='#666666');

Эту проблему в последней версии Emmet можно решить только написанием сниппета для CSS:

"lg:ie": "filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='', endColorstr='');"

5. Настройка синтаксиса

Каким образом будет выглядеть разметка, сгенерированная Emmet, зависит от того, какой doctype был указан на странице. Всего у Emmet существует несколько профайлов для форматирования синтаксиса:

  • html — профайл по умолчанию, внутри одиночных тегов не ставится слеш, например: <br>;
  • xhtml — такой же, но одиночные теги закрываются слешем: <br />;
  • xml — профайл по умолчанию, если в редакторе определен синтаксис XML или XSL; каждый тег находится на новой строке с соответствующим отступом, все пустые теги закрываются слешем: <br/>.
  • line — выводит результат без отступов и в одну строку.

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

Например, если нужно, чтобы в html-разметке все одиночные теги были закрыты слешем, можно назначить для html профайл для форматирования xhtml следующим образом:

{   "html": "xhtml"  }

Или создать собственный профайл (список доступных свойств в документации: http://docs.emmet.io/customization/syntax-profiles/):

{   "html": {   "self_closing_tag": true   }  }

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

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

  1. Установить через менеджер плагинов (Плагины > Plugin Manager > Show Plugin Manager) Python Script
  2. Скачать архив https://github.com/emmetio/npp/raw/master/emmet-npp.zip и распаковать его
  3. Скопировать файл EmmetNPP.dll в C:Program FilesNotepad++plugins
  4. Скопировать папку EmmetNPP в %USERPROFILE%AppDataRoamingNotepad++pluginsconfig
  5. Запустить Notepad++

Установка Emmet в Sublime Text 2

Устанавливаем Package Control — менеджер пакетов (плагинов): http://wbond.net/sublime_packages/package_control
Открываем командную панель нажатием Сtrl+Shift+P и находим Package Control: Install Package.
Команды emmet

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

ts-soft.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.