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

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/

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

ЗОЖ
Комментарии
Последние комментарии
https://screencast.com/t/z1dP3ysILN
Если не работают формы, смотрите js-ошибки в консоли инструментов разработчика вашего браузера по F1...
Не нажимается кнопка Отправить. Что я настроил не так?
Извините за беспокойство сама уже нашла в чем причина.
Здравствуйте! Подскажите, пожалуйста, как исправить ошибку при нажатии на кнопку &quot;оставить ...
Спасибо большое - уже решил вопрос. Открыл бекап дамп базы mysql в notepad++ и в именно той строке ...
Не знаю, смотрите фильтры, условия, тип цен, крон должен выполнять файл, бывают ситуации, когда крон...
Подписка
Выберите рассылку