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/

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

Комментарии
Получать ответы на почту
Получать ответы на почту
Подписка на статьи
Выберите рассылку
Последние комментарии