Вход Регистрация
*— обязательные для заполнения поля
Войти через социальные сети

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

Emmet (ранее известный как Zen Coding) - очень важный инструмент для веб-разработчиков. Это плагин для многих популярных текстовых редакторов, например Aptana, Sublime, который также как и Zen Coding значительно улучшает и ускоряет рабочий процесс с HTML и CSS.

Поддерживаемые редакторы

  • Eclipse/Aptana
  • Sublime Text 2
  • TextMate 1.x
  • Coda 1.6 and 2.x
  • Espresso
  • Chocolat (available via “Install Mixin” dialog)
  • Komodo Edit/IDE (available via Tools > Add-ons dialog)
  • Notepad++
  • PSPad
  • <textarea>
  • CodeMirror2/3
  • Brackets

Установка Emmet в редактор Aptana 3.

  1. В меню сверху Help > Install New Software;
  2. В появившемся окне находим поле для ввода ссылок Work with и вставляем эту ссылку: http://emmet.io/eclipse/updates/
  3. Далее нажимаем клавишу Enter и видим в большом поле ниже подгрузится Emmet;
    Установка Emmet
  4. Отмечаем его галочкой и нажимаем на кнопку ниже Next > Next > I accept... > Finish.;
  5. После установки плагина Aptana попросит Вас перезагрузить ее, нажимаем Restart Now (рекомендуется);
  6. Все готово, плагин Emmet установлен в Aptana 3, остается научиться им пользоваться .
  7. Теперь создаем новый html файл: File > New From Template > HTML > HTML 5 Template и пишем такой код:
    <!doctype html> 
    <html lang="en"> 
    <head>
         <title>Emmet Demo</title> 
    </head> 
    <body>
         ul#nav>li.item$*4>a{Item $} </body> 
    </html> 
  8. Далее в самом конце строки ul#nav>li.item$*4>a{Item $} нажимаем клавишу TAB и получим такой результат:
    <!doctype html> 
    <html lang="en"> 
    <head> 
        <title>Emmet Demo</title> 
    </head> 
        <body> 
            <ul id="nav"> 
                <li class="item1"><a href="">Item 1</a></li> 
                <li class="item2"><a href="">Item 2</a></li> 
                <li class="item3"><a href="">Item 3</a></li> 
                <li class="item4"><a href="">Item 4</a></li> 
            </ul> 
        </body> 
    </html> 
    

Также помимо генерации кода Emmet может вставлять «рыбу» Lorem Ipsum, что очень нужно в разработке иметь как сниппет, а генерируется из слов lorem или lipsum по нажатию TAB.
Также предусмотрена возможность задать количество слов в рыбе loremX, где X - число слов.

В итоге, лично мне Emmet понравился больше Zen Coding тем, что в Aptana с ним устанавливаются сниппеты, которые в основном часто используются и также есть возможность редактирования настроек Emmet в Aptana под себя и добавление своих сниппетов в меню Window > Preferences > Emmet.

Настройка Emmet

Также есть онлайн-шпаргалка по Emmet (Emmet Cheat Cheet): http://docs.emmet.io/cheat-sheet/

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

Комментарии
Получать ответы на почту
#75
Мне больше всего нравится Codelobster IDE
Получать ответы на почту
#76
Мне тоже очень понравился, согласен!
Надо попользоваться, давно уже дело было, я сейчас WeBuilder использую, там очень крутой Code Preview
Получать ответы на почту
#89
http://emmet.io/eclipse/updates
адрес не доступен:
403 Forbidden
Получать ответы на почту
#90
Возможно временная проблема, 403 это nginx ошибка.
Есть еще другая ссылка, там тоже эта ошибка, попробуйте позже.
https://github.com/emmetio/emmet-eclipse#readme
Получать ответы на почту
ЗОЖ
Комментарии
Последние комментарии
Здравствуйте, можно ли у вас заказать доработку модуля? Нам необходимо 1) в этом модуле подключить ф...
Спасибо за помощь, думаю такой вариант решения подойдет. :smile:
В админке все одним списком будет, иначе не сделать, только фильтром пользоваться. В публичке, напри...
Спасибо за ответы, насчет 2-го вопроса, дело в том, что в админке битрикса, я не нашел возможности с...
Я стараюсь каждый компонент делать так, чтобы работали отдельно, но я сам не пробовал, не всегда так...
А это фича битрикса, &quot;обратная постраничная навигация&quot; так работает, это пока в ко...
Если через параметры компонента передаете привязку к ID товара, то скорее всего у вас они закэширова...
Подписка
Выберите рассылку