Автор Тема: Emmet (ex-Zen Coding)  (Прочитано 29615 раз)

Loac

  • Administrator
  • Hero Member
  • *
  • Сообщений: 612
Emmet (ex-Zen Coding)
« : Октября 29, 2012, 04:34:37 »
Продолжение ZenCoding. Если вам часто приходится заниматься версткой и вы еще не знакомы с ZC, советую это сделать.

Сайт проекта: http://docs.emmet.io/

Установка

Отключите или удалите ZenCoding, если он установлен.

Если вы не пользуетесь Sublime Package Control, то просто скачайте, распакуйте и перезагрузите Sublime Text 2.

Если вы все делаете правильно, то добавьте репозиторий в Sublime Package Control и выполните поиск и установку дополнения:

Отличие от ZC
  • Можно писать значения для свойств CSS прямо за аббревиатурами: p10 > padding: 10px, m0.5-10--15 > margin: 0.5em 10px -15px, w100p > width: 100%. Для целых значений автоматически подставляется px, а для значений с плавающей запятой — em.
  • Минус перед аббревиатурой раскроет свойство с добавлением браузерных префиксов. Например: bdrs создаст свойство border-radius, но -bdrs создаст список свойств с webkit, moz, ms и o префиксами.
  • Генератор градиентов: определите градиент (linear-gradient(...) или проще lg(...)) в качестве значения для любого CSS-свойства, нажмите Tab и получите список с определениями градиентов с учетом браузерных префиксов и особенностей реализации в более ранних версиях браузеров.
  • Неизвестные аббревиатуры не раскрываются в HTML-тэги (например, foo > <foo></foo>), а также, в CSS-коде: foo > foo: ;.
  • Хорошие новости для любителей БЭМ! В Emmet добавлены фичи и для вас! Я не использую БЭМ, поэтому разбираться не стал. Подробнее о поддержке БЭМ в Emmet читайте здесь.
  • В Emmet присутствует генератор «рыбы» Lorem Ipsum. Для генерации можно использовать слова lorem и lipsum. Если текста мало, вы можете вручную задать количество слов в «рыбе», написав loremNN, где NN — число от 8 до ваших потребностей. Не думаю, что может понадобиться «рыба» более 1000 слов.
  • Неявные теги: вам больше не придется писать все теги для каких-то довольно стандартных конструкций, плагин определит их самостоятельно, полагаясь на тег-родитель. Попробуйте раскрыть эти конструкции: .header>.nav^.logo, .header>.wrap>.nav^^.logo и сразу всё поймете.
  • Появился новый оператор: ^. Он позволяет подняться на уровень выше при написании конструкций вида: .header>.nav^.logo или .header>.wrap>.nav^^.logo
  • Возможность расширения позволяет вам добавлять свои экшены и фильтры или настраивать существующие. Вы можете в файле Emmet.sublime-settings определить параметр extensions_path и Emmet будет подгружать все .js и .json файлы автоматически при запуске ST2.

Нюансы

Во-первых, Emmet существует только для ST2, в отличие от Zen Coding, который написан под большее количество редакторов кода.
Во-вторых, плагин еще тестируется и если найдете какие-либо баги, не стесняйтесь — отписывайтесь в issue на Гитхабе или в твиттер автору плагина.

Описание отличий взято с habrahabr.
« Последнее редактирование: Ноября 25, 2012, 12:42:13 от Loac »

Loac

  • Administrator
  • Hero Member
  • *
  • Сообщений: 612
Re: Emmet (ex-Zen Coding)
« Ответ #1 : Октября 29, 2012, 04:58:03 »
Люблю все новое и интересное.

Понравилось, что Emmet в настройках можно расширить своими заготовками:

{
  "snippets": {
    "html": {
      "abbreviations": {
        "example": "<div class='example' title='Custom element example'>"
      }
    }
  }
}

Например, example>img:
<div class="example" title="Custom element example"><img src="" alt=""></div>

Понравилось, что Emmet понимает, каким должен быть вложенный элемент, и нет необходимости его указывать: ul>.item*3.
<ul>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

Не знаю насколько будет востребован новый оператор «на уровень вверх». Надо пробовать. .header>.nav^.logo:
<div class="header">
  <div class="nav"></div>
</div>
<div class="logo"></div>

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

Расстроило, что так и не сделали сквозную нумерацию (div>(a>img[src=image-$$.jpg])*2)*2:
<div><a href=""><img src="image-01.jpg" alt=""></a><a href=""><img src="image-02.jpg" alt=""></a></div>
<div><a href=""><img src="image-01.jpg" alt=""></a><a href=""><img src="image-02.jpg" alt=""></a></div>

На мой взгляд, в этом случае нумерация должна идти image-01 – image-04. Вернее, бывают вот такие случаи, когда нужна сквозная нумерация, но это ни где не настраивается.
« Последнее редактирование: Октября 29, 2012, 04:59:51 от Loac »

yagtec

  • Jr. Member
  • **
  • Сообщений: 52
  • Перфекционист
Re: Emmet (ex-Zen Coding)
« Ответ #2 : Ноября 01, 2012, 06:29:04 »
Zen при этом надо удалить, или это надстройка?

Loac

  • Administrator
  • Hero Member
  • *
  • Сообщений: 612
Re: Emmet (ex-Zen Coding)
« Ответ #3 : Ноября 01, 2012, 17:12:07 »
Надо удалить или отключить. Дополнил описание.

sublimator

  • Newbie
  • *
  • Сообщений: 1
Re: Emmet (ex-Zen Coding)
« Ответ #4 : Октября 02, 2013, 13:23:37 »
Тоже недавно начал пользоваться. Есть неплохое руководство по Emmet на русском языке
« Последнее редактирование: Октября 02, 2013, 13:32:36 от sublimator »

TAIFUN

  • Newbie
  • *
  • Сообщений: 8
Re: Emmet (ex-Zen Coding)
« Ответ #5 : Января 23, 2014, 17:48:29 »
Ребят, а как можно указать плагину чтобы не работал с CSS?
Для CSS хочу задействовать Hayaku, но вот что происходит
После установки Hayaku пропадает вот такое окошко http://snap.ashampoo.com/uploads/2014-01-20/jaUngiwc.png с белым фоном, что не есть удобно и хорошо.
Я так понимаю что это конфликт плагина Emmet с Hayaku или я ошибаюсь?

Loac

  • Administrator
  • Hero Member
  • *
  • Сообщений: 612
Re: Emmet (ex-Zen Coding)
« Ответ #6 : Января 23, 2014, 20:54:39 »
В каком смысле пропадает? Вообще не появляется или не хватает каких-то пунктов в списке?

На сколько я понимаю, это сокращения кокраз Emmet'a.
« Последнее редактирование: Января 23, 2014, 20:57:26 от Loac »

TAIFUN

  • Newbie
  • *
  • Сообщений: 8
Re: Emmet (ex-Zen Coding)
« Ответ #7 : Января 24, 2014, 02:37:02 »
Вообще не появляется :(

Loac

  • Administrator
  • Hero Member
  • *
  • Сообщений: 612
Re: Emmet (ex-Zen Coding)
« Ответ #8 : Января 24, 2014, 09:35:11 »
Даже по хоткею Ctrl+Space?

У меня получается так, что я включаю Hayaku и список автокомплита перестает появляться автоматически, даже если Emmet выключен.

Однако, если Emmet включен, сокращения работают именно от Hayaku.

Вобщем нужно больше информации. Если проблема в списке автокомплита, то виноват только Hayaku.

зы

У меня ощущение, что Hayaku самостоятельно отключает автокомплит. Особенно, если взглянуть на то, какие настройки он выставляет для параметра auto_complete_selector.

Если скопировать его в свои пользовательские настройки с таким значением:

"auto_complete_selector": "source - comment, meta.tag - punctuation.definition.tag.begin",
то автокомплит будет работать, однако, в некоторых местах, он не будет соответствовать выполняемым командам.
« Последнее редактирование: Января 24, 2014, 10:07:04 от Loac »

TAIFUN

  • Newbie
  • *
  • Сообщений: 8
Re: Emmet (ex-Zen Coding)
« Ответ #9 : Февраля 11, 2014, 15:52:20 »
Даже по хоткею Ctrl+Space?

У меня получается так, что я включаю Hayaku и список автокомплита перестает появляться автоматически, даже если Emmet выключен.

Однако, если Emmet включен, сокращения работают именно от Hayaku.

Вобщем нужно больше информации. Если проблема в списке автокомплита, то виноват только Hayaku.

зы

У меня ощущение, что Hayaku самостоятельно отключает автокомплит. Особенно, если взглянуть на то, какие настройки он выставляет для параметра auto_complete_selector.

Если скопировать его в свои пользовательские настройки с таким значением:

"auto_complete_selector": "source - comment, meta.tag - punctuation.definition.tag.begin",
то автокомплит будет работать, однако, в некоторых местах, он не будет соответствовать выполняемым командам.

Спасибо! По Ctrl+Space окошко появляется.