Пользователь
0,0
рейтинг
8 апреля 2013 в 00:15

Разработка → Прощай, Zen Coding. Привет, Emmet! перевод


Еще в 2009 году, image Сергей Чикуёнок опубликовал статью, в которой представил новый способ написания HTML и CSS кода. Этот революционный плагин, назывался Zen Coding, он помогал многим разработчикам на протяжении многих лет и в настоящее время вышлел на новый уровень.

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

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


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


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

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


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

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



  • html:5 или ! для HTML5 doctype
  • html:xt для XHTML transitional doctype
  • html:4s для HTML4 strict doctype


Легко добавить классы, IDы, текст и атрибуты

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



Кроме того, вы можете комбинировать классы и идентификаторы. Например, p.bar#foo выведет:
<p class="bar" id="foo"></p>

Теперь давайте посмотрим, как указать содержимое и атрибуты для HTML элементов. Фигурные скобки используются для содержания. К примеру, h1{foo} преобразится в:
<h1>foo</h1>

Квадратные скобки используются для атрибутов. Итак, a[href=#] выдаст следующее:
<a href="#"></a>



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

Используя вложенные сокращения, вы можете построить целую страницу, используя всего одну строку кода. Во-первых, дочерний селектор, в лице >, позволяет вкладывать элементы. Селектор соседних элементов, в лице +, позволяет размещать элементы рядом друг с другом, на том же уровне. Наконец, новый оператор перехода на уровень выше, в лице ^, позволяет перейти по дереву элементов вверх на один уровень.



Группировка

Чтобы эффективно использовать вложения не превращая их в запутанный беспорядок операторов, вам нужно сгруппировать несколько кусков кода. Это как математика — нужно просто использовать скобки вокруг определенных частей.
Например, (.foo>h1)+(.bar>h2) преобразится в:
<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>




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

Чтобы объявить тег с классом, просто введите div.item, сокращение преобразуется в .
В прошлом, вы могли бы опустить имя тега div, так что, просто нужно было ввести .item, и он бы генерировал . Теперь Emmet умнее. Он проверяет имя родительского тега каждый раз, когда вы разворачиваете сокращение с неявным именем. Так что, если вы объявляете .item внутри
, он будет генерировать  вместо .



Вот список всех неявных имен тегов:
  • li для ul и ol
  • tr для table, tbody, thead и tfoot
  • td для tr
  • option для select и optgroup


Умножение

Вы можете определить, сколько раз элемент должен быть выведен с помощью оператора *.
Например, ul>li*3 превратится в:
<ul> <li></li> <li></li> <li></li> </ul>



Нумерация

Как на счёт комбинации оператора умножения и нумерации? Просто поставьте оператор $ в конце названия атрибута или элемента и будем вам счастье! Например ul>li.item$*3 превратится в:
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>



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


Значения

Emmet предназначен для упрощения написания не только HTML, но и CSS кода. Допустим, вы хотите задать ширину. Сокращение w100 превратится в:
width: 100px;



Значение px ставится по умолчанию. Другие единицы измерения используют свои символы. К примеру h10p+m5e:
height: 10%;
margin: 5em;

Вот список возможных значений:
  • p → %
  • e → em
  • x → ex


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

Вы уже знаете много интуитивных сокращений, таких как @f, который преобразуется в:
@font-face {
  font-family:;
  src:url();
}

У некоторых свойств - таких как background-image, border-radius, font, @font-face, text-outline, text-shadow — есть некоторые дополнительные варианты, которые вы можете активировать при помощи знака +. Например, @f+ произведет:
@font-face {
  font-family: 'FontName';
  src: url('FileName.eot');
  src: url('FileName.eot?#iefix') format('embedded-opentype'),
     url('FileName.woff') format('woff'),
     url('FileName.ttf') format('truetype'),
     url('FileName.svg#FontName') format('svg');
  font-style: normal;
  font-weight: normal;
}



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

Модуль CSS использует автоматический поиск, чтобы найти неизвестные сокращения. Так, каждый раз, когда вы ищите неизвестное сокращение, Emmet попытается найти самое близкое значение. Например, ov:h, ov-h, ovh и oh произведет то же самое:
overflow: hidden;



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

CSS3 крут, но вендорные префиксы — реальная боль для всех нас. Теперь уже нет, Emmet нам поможет.
Например, trs будет преобразовано в:
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;



Также вы можете приписать свои префиксы. Просто используйте приставку -. Так, -super-foo преобразится в:
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

Что, если вы не хотите все те приставки? Нет проблем, просто укажите первые буквы их названий.
Например, -wm-trf преобразуется в:
-webkit-transform: ;
-moz-transform: ;
transform: ;

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


Градиенты

Говоря о раздражающих особенностях CSS3, мы не можем забыть градиенты. Все те сложные выражения, что вы писали вручную, можно заменить на одну аббревиатуру.
К примеру lg(left, #fff 50%, #000) преобразуется в:
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);



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


Lorem ipsum

Забудьте о сторонних сервисах, которые производят текст “Lorem ipsum”. Теперь вы можете сделать это быстро в своем редакторе. Просто используйте lorem или lipsum для сокращения. Вы можете определить сколько слов требуется вывести. Например, lorem10 выведет:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.



Кроме того, lorem может быть присвоен к другим элементам. Например, p*3>lorem5 преобразуется в:
<p>Lorem ipsum dolor sit amet.</p>
<p>Voluptates esse aliquam asperiores sunt.</p>
<p>Fugiat eaque laudantium explicabo omnis!</p>


Настройка


Emmet предлагает широкий диапазон опций, которые вы можете использовать для тонкой настройки взаимодействия с плагином. Есть три файла, которые Вы можете отредактировать, чтобы сделать это:
  1. Чтобы добавить Ваш собственный или обновить существующий отрывок, отредактируйте snippets.json.
  2. Чтобы изменить поведение фильтров и действий Emmet, попытайтесь редактировать preferences.json.
  3. Чтобы определить, как HTML или XML должны выполняться, отредактируйте syntaxProfiles.json.

И намного больше!

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

Поддерживаемые редакторы можно посмотреть на этой странице.

UPD. Огромное спасибо skaflock за помощь в исправлении ошибок.
Перевод: Zeno Rocha
Егор @seweb
карма
30,0
рейтинг 0,0
Пользователь

Похожие публикации

Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (111)

  • +24
    Простые сокращения мгновенно расширяются в сложные фрагменты кода, Emmet превратит вас в более продуктивного разработчика.
    Google Translate превратил вас в более продуктивного переводчика?
    • 0
      Использовался не только Google Translate, а и словари и другие системы перевода, к тому же я работаю над изучением английского языка.
      Если у Вас есть лучший вариант перевода — напишите в ПП.
      • –2
        Есть еще онлайн представление работы плагина.
      • +45
        Проблема не в том, насколько хорошо или плохо вы знаете английский язык. Это влияет только на степень вашего мучения при переводе. Проблема в том, что у вас пока нет внутреннего главного редактора, который бы еще раз вычитывал созданное предолжение. Неважно, переводите вы с английского, французского или латинского. Вы прочитали предложение в оригинале? Перевели ее гугл-транслейтом? Поняли, что означает каждое слово? И в конце концов поняли, что означает предложение целиком? Теперь выбросите полученный набор слов и нормальным русским языком напишите, что написал бы автор оригинала, если бы писал на русском.

        Вот эти фразы никогда-никогда не могут выйти из-под пера русскоговорящего человека —

        «К вложенности сокращений, вы можете построить целую страницу»
        «Во-первых, ребенку оператора, в лице >, позволяет вкладывать элементы.» (Это что вообще? Пословный перевод?)
        «Наконец, новый подъем вверх-оператора» (no comments)
        «CSS3 удивительный, но те приставки браузеров — реальная боль для всех нас.»
        «Ну, не больше — у Emmet есть сокращения...»

        Ну и можно еще несколько мест процитировать на предмет менее вопиющих ошибок —

        Этот революционный плагин, назывался Zen Coding…
        Чтобы эффективно использовать вложения не превращая их…
        Пиксель не единственная доступная единица.
        Что, если вы не хотите все те приставки?
        Вы можете определить какие браузеры поддерживать.
        Забудьте о тех сторонних сервисах, (англиский торчит из лишнего слова «тех»).

        Ложка мёда — ни одной грамматической ошибки :-)
    • +1
      Эту статью перевели еще неделю назад! пруф
    • –1
      Думаю вы не правильно поняли смысла этого предложения.

      Я так понимаю смысл быт таков: «Теперь вы сможете сократить время написания кода, и увеличить производительность»
  • 0
    Я так понял, этот плагин является развитием Zen Coding, или от сторонних авторов?

    Радует, что плагин есть для большого количества редакторов. :)
    • +1
      Верно. Zen Coding превратился в Emmet.
      • +4
        А почему автор переименовал в «муравья»? Zen Coding — звучит
        • 0
          Автор плагина прокомментировал это так:
          С новым названием проект получил новую жизнь и новые возможности.
          • +12
            Чушь. Очень некрасиво Сергей Чикуенок поступил с оригинальным автором идеи и первыми реализациями — Вадимом Макеевым. Хотя бы в раздел благодарностей вписал.

            Хотя, безусловно, это никак не умаляет заслуг Сергея.
            • –14
              Хотя бы в раздел благодарностей вписал.

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

              И я вам открою один маленький секрет: к первым реализациям (именно реализациям) Вадим Макеев не имеет абсолютно никакого отношения. Ради интереса можете прошерстить историю обновлений проекта. А то, что находится по указанной вами ссылке — всего лишь описание идеи, но никак не реализация.
              • +11
                Без идеи не было бы и реализации.
                • +5
                  Первая реализация Zen Coding, если так можно это назвать, была сделана Вадимом где-то в промежутке 2004-2008 для автодоплнения аббревиатур в TopStyle 2. В этом редакторе были готовые аббревиатуры, но по мнению Вадима неправильные.
              • +12
                А откуда взялась библиотека CSS- и HTML-снипетов, Сергей? Это мой код, ты его не на улице нашёл.
                • +4
                  Страсти накаляются)
                • –9
                  Во-первых, это не код, а сниппеты в виде вики-страницы, которые как были в Zen Coding, так там и остались. И я никогда не скрывал, что ты являешься автором идеи Zen Coding.

                  Во-вторых, в Emmet эти сниппеты сильно переработаны.

                  В-третьих, я очень сильно сомневаюсь, что люди пользуются Zen Coding/Emmet только потому, что там такие классные сниппеты.

                  И наконец, вместо того, чтобы постоянно проситься на страницу благодарностей, лучше сделать что-то, за что люди будут благодарны именно тебе.
                  • +13
                    То есть снипеты взяты, переработаны, но я здесь совсем не причём. Окей. История про Zen Coding и Emmet напоминает провод денег через офшоры: пара-тройка манипуляций и я уже не причём.

                    Я уже не стремлюсь попасть в «Благодарности», поскольку вижу, что ты не благодарен.
                    • –10
                      Вадим, мы уже неоднократно говорили на эту тему. Я понимаю, что тебе она не дает покоя, но пора бы уже успокоиться и закрыть ее.

                      Ты можешь спокойно развивать и разрабатывать Zen Coding (если можешь, конечно), разве тебе кто-то не дает это делать?
                      • +11
                        С тобой мы уже во всём разобрались и мне всё понятно. Я просто пояснил исторический контекст.
                        • +10
                          Я вот впервые слышу всю эту историю.
                          И услышал паралельно от двух разных сторон.
                          И cбоку действительно выглядит словно chikuyonok нагло присвоил идею pepelsbey
                          Думаю плюсы/минусы к комментариям показывают, что не я один имею такое впечатление.
                          • +1
                            Идея без реализации ничего не стоит. И сниппеты, придуманные Вадимом (чего Сергей не отрицает), — лишь часть Эммета.
                            • 0
                              А в какой момент идея становится реализацией? Когда я написал в блоге первые размышления о ней? Когда я написал первый набросок? Когда написал полный проект?
                              Ваше мнение скорее следует читать не как «Идея без реализации ничего не стоит», а как «Реализация без маркетинга»
                              • 0
                                Когда ею можно физически воспользоваться. См. «Идея на минус миллион».
                                • +1
                                  Статья не в тему. Одна сторона иметь идею, которая возможно никогда не будет реализована. Другая сторона иметь идею, которую развили и присвоили.
                                  • 0
                                    Очень в тему. Zen Coding был идеей и остался бы только ею, не возьмись Сергей за её реализацию. И он вложил в проект очень много сил и своего времени (не самого дешёвого, полагаю). Я имел дело с кодом, когда делал расширение для Адоби Дримвивера, так что представляю себе масштаб. И это не только сниппеты, которые тоже были существенно дополнены и творчески развиты, но и немало других полезных инструментов для работы с кодом.

                                    Никто другой ничего подобного не сделал, разве что только kizu и thebits взялись за создание Hayaku для быстрого написания CSS со своими идеями.
                                    • +5
                                      в этом смысле хабр поражает. Человек, который реально СДЕЛАЛ, внес огромный вклад в развитие не одного человека, в развитие рынка оказался заминусованным в посте про плагин собственной разработки. Разработчики! плагин для вас делался — за что ж вы человека минусуете?
                            • 0
                              Но всё же часть.
                              • +1
                                При том в таком виде, против которого Вадим возражал. Поэтому Сергей и сделал отдельный свой проект.
                            • +10
                              Реализация без идеи тоже ничего не стоит. Так как её не будет.

                              Идея CSS-selector-like HTML-сниппетов — то, из-за чего вообще Zen Coding обрёл популярность. Вадим не просто предложил идею, а довольно подробно её описал. И, прямо в описании, предложил кому-нибудь стать соавтором.

                              Вне зависимости от того, как проект дальше развивался и какие были отношения между автором идеи и тем, кто её реализовал, независимо от того какой сложный в итоге получился код и сколько всего было наверчено поверх, обсуждаемая идея — основополагающая штука, которая была в Зен Кодинге, и без неё Эммет не стал бы столь же популярным.

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

                              Это то, что лежит в основе — взаимоуважение и послание людям: «сообщество уважает вас и ваши идеи, не бойтесь их выражать, их подхватят другие и разовьют». Сохранение авторства — та штука, которая может мотивировать людей придумывать новое, не класть идеи в стол.
                              • 0
                                Я только за то, чтобы указывать «Автор изначальной идеи: Вадим Макеев». Просто идею нельзя «присвоить» тем более, что Zen Coding делался как минимум с ведома Вадима, а фактически он был одним из администраторов на Google Code.
                                • +1
                                  «Присвоить» — нельзя. «Не упомянуть» — можно (но не нужно).

                                  Я за то, чтобы авторство оригинальной идеи стояло наравне с остальными контрибьюторами. Если человек пишет ишью с фичреквестом — надо хотя бы в ченджлоге сказать спасибо такому человеку. Хотя сам он ни строчки кода не написал. Но я бы и на страницу описания фичи в документации писал благодарность этому человеку — он помог проекту стать лучше.

                                  А если чья-то идея легла в основу твоего проекта, это тем более важно. Да, иногда про это можно забыть, это может потеряться и часто не узнаешь откуда та или иная идея пошла. Но сейчас не такой случай, конечно.
                              • +2
                                Ну так тогда и меня надо указывать, CSS Live Templates для IDEA были придуманы и реализованы в Яндексе раньше Zen Coding, но не были вынесены в Open Source.
                                • 0
                                  Надо, на странице про CSS-сниппеты.

                                  Жаль, что live templates не были вынесены в Open Source. Мне долгое время казалось, что где-то в ярушке был пост про них, но не смог найти. Я хотел на него сослаться когда буду делать нормальный сайт для Хаяку, т.к. далеко в основе лежат live templates с Zen CSS наравне. Никаких внешний артефактов точно не сохранилось? Куда ссылку ставить? :)
            • 0
              следуя этой логике Сергей забыл упомянуть первого изобретателя транзистора.
              • +1
                Что за притянутые за уши сравнения?
        • 0
          На сколько помню из других статей на Emmet — «Zen Coding» чья-то торговая марка
        • +14
  • +1
    Просто дали бы линк на emmet.io/
    Там и примеры лучше.
  • –2
    Так этож Sublime 2! =D
  • 0
    Как бы хотелось иметь такое во встроенном редакторе Midnight Commander! Последние несколько лет пользуюсь только им, так как mc можно поставить практически на любой сервер и пользовать по ssh.
    • 0
      Вам удобен редактор MC? Я на вим всегда сразу переключаю.
      • +5
        Очень удобен, знаете ли. Вим — он, конечно, крутой, олдскульный и работет где угодно, и есть почти везде, но… Я так и не смог научиться работать в нём быстро. Всё время приходится вспоминать команды и их тонкости (а когда не видно того, что набираешь, это превращается в кошмар), а редакторы типа mc-шного интуитивно понятны, да и SAA/CUA опять же… Вимом я могу конфиг подправить в аварийной ситуации, но каждый день работать в нём с кодом — увольте.
        • –1
          Вам нужно потратить два года только чтобы достигнуть той же эффективностью, что и в Sublime Text – говорит автор в статье «Just Use Sublime Text», подробно разбирая недостатки vim.
  • 0
    Плюсы перед Haml/Slim есть?
    • +8
      Такие же, как у яблока перед апельсином.
      • 0
        Не, такие же как у яблока перед гантелей!
      • +2
        Emmet: пишешь мало, но читать много.
        Haml/Slim: пишешь мало и читать тоже мало.

        * С каких пор за вопросы ставят минусы? Или вопрос глупый? С радостью выслушаю обоснованный ответ.
        • 0
          Emmet — расширение, ускоряющее процесс написания чистых html и css. Haml/Slim — препроцессоры, которые дают html на выходе.
          У них принципиально разное назначение.

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

          Emmet же, образно, — большой набор сниппетов. Нужна некоторая html или css конструкция — напечатал несколько символов, ткнул tab, и, о чудо, она у тебя перед глазами. Всё. Ни о каких компиляторах и языках программирования здесь речи не идет. Вёрстка, как она есть, ни больше ни меньше.

          Если препроцессоры нравятся настолько, что приятнее использовать связку slim + sass + compass независимо от целей и затем компилировать всё это дело — пожалуйста, никто не запрещает. Но сравнивать эти вещи некорректно.
  • +1
    Плагин к Notepad++ (v6.1.6) поставился, но работать не хочет.
    • +1
      как я понял там не tab нажимать нужно, а ctrl+alt+enter
      • 0
        Да, но на странице плагина на Github есть инструкция, как на Tab изменить.
        + в старых файлах почему-то не работает, в новом пустом всё ок.
        • 0
          Перестаёт корректно работать, если в строках до текущей есть non-latin символы.
          • 0
            Посмотрите, может, у вас похожая проблема: github.com/emmetio/emmet/issues/185
            Там же, внизу, есть новая версия плагина, которая может решить эти проблемы.

            И если у вас возникают проблемы с использованием плагина, напишите об этом, пожалуйста, в трэкере проекта.
            • 0
              воо) Даже по ctrl + E заработало) спасибо за ссыль)
    • 0
      А если работает, то жутко глючит в документах 50+ строк. Приходится открывать новую вкладку, вводить туда что-нибудь в стиле ul>li.item$*3, копировать, переключаться обратно и там вставлять.
      • 0
        Опишите, пожалуйста, проблемы в трэкере проекта.
  • +1
    По-моему как раз в написании подобного кода проблем нету. Ну, скажем, с префиксами браузеров. Проблема с поддержкой. Когда каждый transform занимает в 5 раз больше места. А эту проблему ни ZC ни сабж не решают
    • 0
      LESS, SASS и тд же
      • –1
        Спасибо, я знаю ) Less как раз и использую
        • +2
          Compass же ,) и с трансформом не будет проблем
  • +1
    Стоит посочувствовать людям, которые пишут чистый HTML (сюда же JSP, JSF, Velocity, FreeMarker, ERB, ASP и прочие шаблонизаторы на базе HTML), пусть и со вспомогательными генераторами; в IDE или с помощью плагинов a'la сабж не важно. Дальнейшее редактирование грозит превратиться в ад.

    Куда удобнее развитая шаблонизация (haml, slim, jade). Всё руки не доходят портировать skim (тот же slim, только для js/coffee — client-side шаблонизация) на новую версию slim'а. :(
  • +1
    View helper-ы в Ruby on Rails c haml, в качестве основного языка разметки, дают похожую результативность. Скрипач не нужен (ц)
    %a{href: 'foo/bar'}
    %ul.superclass#superID
    %li.class
    =link_to :root, root_path
    итп
    • +7
      %a{href: 'foo/bar'}
      %ul.superclass#superID
      %li.class
      =link_to :root, root_path
      


      Неужели это кому то нравится? Хуже перла.
      • 0
        rubygems.org/search?utf8=%E2%9C%93&query=haml
        5,7 миллионов загрузок
        rubygems.org/search?utf8=%E2%9C%93&query=haml-rails
        1,2 миллиона загрузок
        • +7
          Миллионы мух не могут ошибаться. Ага.
          • +2
            Это сомнительная метафора, по-вашему, может служит неоспоримым аргументом?
            • +1
              Я бы с большим удовольствием обсудил сомнительную необходимость смешивать представление с логикой приложения.
              • 0
                А причем тут haml и смешение?
                • +1
                  Мне показалось что haml реализует логику приложения. Извиняюсь. =) (сам просто впервые вижу эту технологию не сразу понял что это шаблонизатор)
        • +1
          «Миллиарды мух не могут ошибаться»

          Уже написали выше. Когда здесь появится кнопка «удалить комментарий»?
      • +4
        Вы так говорите perl, как будто это что-то плохое.

        А Haml очень просто и понятен.
      • +2
        У HAML есть особенность: он применим исключительно к блочным тегам.

        Писать на нём что-то типа
        <i>Адрес</i>, который вы можете найти по <a href="http://blah...">ссылке</a>, и т. п.
        

        превращается в ад:
        %i> Адрес
        , который вы можете найти по
        = succeed "," do
          %a{:href => "http://blah..."} ссылке
        и т. п.
        
        • 0
          chriseppstein.github.io/blog/2010/02/08/haml-sucks-for-content/

          :plain – Simply passes the filtered text through to the generated HTML.
          :cdata – Surrounds the filtered text with a CDATA escape.
          :escaped – Works the same as :plain, but HTML-escapes the text before placing it in the document.
          :erb – Parses the filtered text with ERB – the Rails default template engine.
          :textile – Parses the filtered text with Textile. Only works if RedCloth is installed.
          :markdown – Parses the filtered text with Markdown. Only works if RDiscount, RPeg-Markdown, Maruku, or BlueCloth are installed
          :maruku – Parses the filtered text with Maruku, which has some non-standard extensions to M
  • –1
    Разве пишется не <!DOCTYPE html>? Или регистр не имеет значения?
    • 0
      В HTML нет разницы
  • 0
    Кто замутит нетормозной Emmet для Netbeans — топу спасибо!
      • 0
        А по какой причине не добавили ссылку на плагин со страницы проекта?
        • 0
          Он пока не доведён до нужного мне состояния. Это влияет на то, как вы сможете расширять Emmet. В остальном он работает как надо.

          Разработчики Netbeans обещали ответить на мои вопросы, но пока молчат. Наверно, скоро «официально» выпущу этот плагин.
  • 0
    может подскажет кто решение проблемы:

    Только что поставил последний Emmet на ST2, OS Win 7

    Expand (развертывание кода) работает только по сочетанию Ctrl + E (в мануале вообще по нажатию TAB, но у меня это не работает, видимо только под Mac)

    как переназначить развертывание кода на нажатие одной клавиши, или более удобного сочетания, вместо Ctrl + E, что, согласитесь совсем неудобно.
    • 0
      Разворачивание по клавише Tab работает только для определённых синтаксисов, чтобы не конфликтовать с нативными сниппетами.

      Убедитесь, что синтаксис текущего документа выставлен, например, в HTML или CSS.
      • 0
        Оказывается развертывание по TAB работает с синтаксисом CSS

        Сейчас выставлен HTML, значит изменить сочетания по своему усмотрению нельзя?
        • 0
          Можно: github.com/sergeche/emmet-sublime#overriding-keyboard-shortcuts

          Но если не работает в синтаксисе HTML, значит, это проблема и я предлагаю перенести её обсуждение в трэкер.
          • 0
            спасибо ) поддержка от разработчика на высшем уровне )
  • 0
    Препроцессоробоги смотрят на это неодобрительно.
  • 0
    Скоро будет готов плагин для ReSharper
  • 0
    Очень хочется такой плагин для IntelliJ IDEA, а то каждый раз переключаться в Sublime для html и css неудобно. Надеюсь, авторы доберутся и до этой IDE.
    • 0
      Дык есть же. Может слегка отстает от оригинальной версии по срокам реализации, т.к. портируют сами, но точно есть. Посмотрите в «Live templates»
  • 0
    Эта штука помогает только писать код, а не редактировать его или читать. Как же идея, что написание кода занимает только 10 % времени у хорошего программиста, а остальное время занимает его поддержка? Подход Haml/Slim тут гораздо лучше.
    • 0
      В Emmet куча действий, помогающих именно редактировать код.
      • 0
        Всё это всё равно остаётся «костылём» (проблема чтения не решена, куча кода в редакторе, различные спец. действия для редактирования, которые нужно помнить в голове) — нужно решать основную проблему — избыточность и неудобность HTML-нотации. Решать её нужно удобным и неизбыточным синтаксисом.
        • 0
          Лично я проблему чтения решаю другими инструментами вроде Code Outline в своём IDE. И «читаемость» в данном случае — довольно субъективное понятие, у того же HAML тоже есть проблемы с удобством редактирования, особенно на глубокой вложенности.

          И я не совсем понимаю, как синтаксис решает проблему редактирования? Например, если мне нужно быстро выделить определённый семантический элемент, или завернуть контент в новую обёртку, или удалить ненужный элемент, сохранив правильные отступы, как новый синтаксис поможет это сделать?
          • 0
            Проблема читаемости HTMД в том, что у него низкая информационная плотность — куча дублей тегов, нельзя использовать нотация.

            Редактирование проще, так как меньше символов и они все на разных строках с отступами. Про выделение я не понял. Про завернуть — добавить новую строчку с новым тегом, выделить нужное дерево, что должно быть внутри и добавить отступ. Для удаления обратная процедура — удаляете строчку, уменьшаете отступ (всё как в обычном программировании).

            Я снова хочу обратить ваше внимание на главный вопрос — зачем вообще в HTML нужен Emmet? Изъян в самом HTML, что нельзя вместо <div class«a»> писать .a, что все теги нужно закрывать (то есть дублировать информацию). Emmet скрывает проблему, не решая её полностью.
            • +1
              Странные претензии. Те теги, у которых конец однозначен благодаря структуре кода: вроде </p>, </li>, </td> и даже </body>, можно не закрывать. Не нужно закрывать пустые теги, не подразумевающие содержимого: <br>, <img>. А в остальных случаях нельзя достоверно сказать, где закрывается тег.

              Кроме классов у тегов есть и другие важные атрибуты: идентификаторы, подсказки, служебная информация. Другие синтаксисы ничуть не удобнее, они просто другие, хуже того, менее удобны в редактировании (тоже нужны инструменты), нестандартны, со всеми вытекающими недостатками: нужна трансляция, хуже поддержка со стороны разных инструментов и т.п.
              • 0
                Насчет нестандартные не все так однозначно. Классы, идентификаторы и прочие атрибуты вполне определяются с помощью двух видов стандартных селекторов — CSS и XPath. Второй извращение, конечно использовать, но вот первый вполне нормален, по-моему.
                • 0
                  Какие селекторы? Я про HTML и «заменители».
                  • 0
                    Вот и использовать синтаксис селекторов. Вместо <div class="a" id="b">...</div> что-то вроде div.a#b {...}
                    • +1
                      Не вижу ничего хорошего. Нет удобства набора: пальцы пляшут, до фигурных скобок даже дальше тянуться пальцами чем до угловых. Пункт про нестандартность остаётся: надо транслировать в HTML, сложнее отладка, хуже поддержка всяческих инструментов и т. д.
                      • 0
                        На вкус и цвет… А вообще, я думал, разговор о замене HTML.
                        • 0
                          a[href="url"]{span}

                          здесь «span» — это текст или тег?
                          • 0
                            А бог его знает. Я же не стандарт в W3C отправляю.
    • 0
      С другой стороны, haml-подобные языки вносит свои проблемы. Во-первых, их нужно изучить. Во-вторых, их нужно компилировать перед деплоем или просто тестовым прогоном. В-третьих, есть риск рассинхронизации haml и html кода — кто-то не поймет, что html автогенерированный и внесет в него изменения, которые потом затрутся.
      • 0
        Обучение требуется и для Зен-кодинга. Рассинхронизация невозможна, они же на уровне шаблонов веб-движка. Со сложностью компилицяи — согласен. Но у нас либо сложный плагин в текстовом редакторе, либо плагин в фреймворке (для большинства языков есть поддержка Haml, для многих — Slim).
        • 0
          В случае Зен оно требуется только тому, кто код набирает, личная фишка. В случае haml — всем в проекте. Если на уровне шаблонов движка, то, да, просто ещё один шаблонизатор, правда тут другая проблема всплывает — верстальщики обычно на html верстку сдают и тут уже нужно будет синхронизировать ручками, VCS автомерж вряд ли сделает корректно.
          • 0
            Да, я согласен, что Зен — это быстрое решение, которое уменьшает симптомы, но не решает проблему. Но лично я считаю, что на новых проектах надо использовать Slim — обучение идёт очень быстро, зато куча проблем решается.

            Про верстальщиков это вообще больная тема. Я полностью согласен с этой проблемой. Но тут я бы сказал, что проблема скорее в том, как верстальщики организуют свою работу. С ними такая же огромная проблема при внедрении Sass. В итоге в нашей фирме мы пришли к выводу, что верстальщик который верстает где-то в стороне и потом присылает готовые нечитаемые html/css — это ад, который слишком дорого стоит. HTML всё равно надо оживлять шаблонами — вёрстка начинает расходиться с теми файлами, которые у верстальщика и всё равно начинается ад. Так что мы работаем только с фронтами, которые и JS пишут и имеют настроенный запущенный проект и интегрированы в задачи и разработку.
            • 0
              А что, можно как-то иначе вести сколь-либо сложный проект? Похоже, ваши проблемы из-за недостатка организации, а не технологии. У любой технологии есть преимущества и недостатки, но перечисленные вами довольно натянуты.
  • 0
    Парни вы офигенные
    Спасибо вам

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