Вышел Emmet v1.0

    Рад сообщить, что после более полугода разработки в свет вышел Emmet (бывший Zen Coding) v1.0.

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

    section>h2+ul.nav>li.nav-item$*5>a

    простым нажатием клавиши превращается в:

    <section>
        <h2></h2>
        <ul class="nav">
            <li class="nav-item1"><a href=""></a></li>
            <li class="nav-item2"><a href=""></a></li>
            <li class="nav-item3"><a href=""></a></li>
            <li class="nav-item4"><a href=""></a></li>
            <li class="nav-item5"><a href=""></a></li>
        </ul>
    </section>
    


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

    Как было отмечено выше, Emmet – это новое имя проекта Zen Coding, ранее упоминавшегося на Хабре. С новым названием проект получил новую жизнь и новые возможности:

    • Появилась полноценная документация и официальный сайт, где можно получить наиболее полную информацию о проекте и его возможностях.
    • Все плагины были переписаны «с нуля» для более тесной интеграции с редактором. Большинство из них обновляются автоматически.
    • Улучшенная работа с CSS: значения свойств можно писать прямо в аббревиатуре. Также был учтён опыт и пожелания пользователей — благодаря модулю нечёткого поиска вам необязательно запоминать громоздкие названия аббревиатур, достаточно написать всего несколько символов (например, ov:h == ov-h == o-h == oh == overflow: hidden);
    • Улучшен модуль определения неявных имён тэгов. Ранее, если вы пытались развернуть аббревиатуру вроде .item, то в результате могли получить либо <div class="item">, либо <span class="item">, в зависимости от типа родительского тэга. Теперь модуль смотрит на название тэга и может вывести, например, <li>, <td>, <option>.
    • Поддержка расширений. Теперь, чтобы добавить новую аббревиатуру или настроить вывод результата, не надо лезть в код плагина, достаточно создать несколько простых JSON-файлов в специальной папке.
    • Генератор «Lorem Ipsum». Ранее, чтобы получить «рыбный» текст для сайта, надо было пользоваться сторонними ресурсами, а затем форматировать результат. Теперь получить такой текст можно прямо в редакторе, причём количество слов в тексте можно регулировать, просто дописав число после аббревиатуры. Более того, генератор использует все возможности аббревиатур Emmet, позволяя дописывать нужные атрибуты к генерируемым элементам и регулировать количество создаваемых блоков.
    • Новый оператор ^.

    Также я выпускаю ещё несколько дополнительных проектов, которые были созданы во время работы над Emmet:


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

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

    Комментарии 36

      +3
      Спасибо вам за вашу работу!
        +2
        Я пользуюсь emmet, но до прочтения этого комментария не знал, что он был создан русскоязычным программистом (по посту можно было понять, но я изначально думал, что это просто обзор). И знаете, стало очень приятно!
        +10
        расскажите почему переименовали в emmet?
          +10
          Торговая марка ZenCoding принадлежит pepelsbey? :)
            0
            Зато теперь через гугл не найдешь кому принадлежит торговая марка ;)
          +2
          Спасибо Вам за ваш проект! Очень давно пользуюсь. Emmet — отличный инструмент. Приятно, что еще учитывались пожелания и идеи, которые приходили от пользователей.
          В общем еще раз большое спасибо! Успехов!
            +1
            Эх, vim бы еще:)
              0
              Если есть API и возможность исполнять код на Javascript, то это вопрос техники. По-моему, кто-то даже пытался, хотя может это просто запрос был.
                0
                Ну старый Zen Conding или его аналог там есть. API точно есть, про Javascript не знаю, но там есть собственный язык для написания макросов.
                0
                Для Vim есть github.com/mattn/zencoding-vim
                Разработчики плагина стараются поддерживать фичи Emmet.

                У меня есть в планах создание официального плагина, но, признаюсь честно, пока останавливает незнание Vim как редактора и его принципов работы.
                  0
                  Ммм отлично, я почему-то думал, что проект заброшен, а нет:)
                +1
                Давно пользуюсь, спасибо. Хотелось бы чуть большей чувствительности, как у hayaku, например
                  0
                  А что вы подразумеваете под «чувствительностью»?
                    0
                    игнорирование опечаток, например
                      0
                      Можете привести пример?
                        0
                        Ну самый грубый пример который пришел в голову
                        btn создаст конпку, bnt не создаст ничего
                          0
                          Если вы про HTML, то я бы в принципе не стал так делать.

                          В Sublime Text нет возможности получить список нативных сниппетов. А это значит, что абсолютно все аббревиатуры мне нужно будет пропускать через себя (чтобы сделать исправление bntbtn) и игнорировать встроенные аббревиатуры (а это довольно серьёзная проблема).
                  –3
                  Отсутствие поддержки visual studio это принципиальная позиция?
                  +2
                  Спасибо за CodeMirror Movie. Мне как раз его не хватало!
                    0
                    Планируется ли поддержка TextMate 2?
                      +1
                      Да, планируется, просто в самом TM2 API как таковое отсутствует. Я попробую сделать контрибьют в код TM2 с теми методами, которые мне необходимы для создания плагина, и если его примут, то добавлю поддержку TM2.
                      0
                      Бывало, что сталкивался с какими-то алертами со стороны Emmet, посмотрим, как в новой версии с этим дела. При попытке обновить, правда, упал сам Sublime, затем он перестал видеть плагин, так что поставил плагин с нуля :)
                        +1
                        Да, проблема с алертами была, но должна быть исправлена в финальной версии. Я перенёс код разворачивания аббревиатуры в другое место: алерт пропал, но сам триггер стал менее точным.
                        0
                        Спасибо!
                          0
                          Приятно что моя идея с группировкой прижилась :) Удачи в будущем, Сергей :)
                            0
                            Это хорошо что отошли от Питона, но почему нельзя было реализовать на С++?
                              +1
                              А какой в этом смысл? Писать такие вещи на C/C++ гораздо сложнее, и такой код сложнее встраивать в существующие редакторы.

                              Тем более, такой код нельзя запустить в браузере и добавить в такие замечательные сервисы, как jsfiddle.net и jsbin.com
                                –2
                                Наоборот, проще. С++ кросс-платформенный и может быть подключен, например, к Visual Studio.
                                  0
                                  Минусы:
                                  1. программа получается бинарно несовместима с другими платформами, надо перекомпилировать. Интерпретируемые языки такой проблемы не испытывают.
                                  2. в браузеры не встраивается в принципе
                                  3. сложен в написании, отладке и сопровождении
                                  4. очень бедная стандартная либа. Нужно или тащить вместе с собой кучу библиотек, либо реализовывать руками велосипеды. Это все таки «высокоуровневый ассемблер», а не язык для написания прикладных приложений.

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

                                  Как видите выбор c++ был бы довольно странным.
                                    0
                                    Только что посмотрел на сорцы а там питон. А написано что от питона отказались. Вообще не понимаю.
                                      0
                                      На питоне написана обёртка, которая запускает JS-код через PyV8.
                                        0
                                        Хорошо, а есть аналогичные движки или механизмы для с# или с++?
                                          0
                                          Уже начата работа над плагином для VS с бриджем через V8: github.com/sergey-rybalkin/emmet.net
                                            –2
                                            Это конечно жесть – поднимать сторонний рантайм только для того чтобы трансформировать строку А → B и правильно выставить каретки.

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

                            Самое читаемое