Плагин Emmet — пишем код быстрее

Плагин Emmet

От автора: если Вы много верстаете и до сих пор не используете плагин Emmet или Zen Coding, то этот урок будет для Вас как нельзя кстати. Используя плагин Emmet, Вы станете писать код на порядок быстрее, а сам процесс написания кода из скучного и рутинного станет оригинальным и доставит несомненное удовольствие.

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

Детали учебника

Тема: HTML

Сложность: Средняя

Урок: Видео версия (.mp4)

Время: 01:17:03

Размер архива: 150 Mb

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

В данном уроке мы установим плагин для редактора Notepad++, рассмотрим возможные проблемы, возникающие при установке и, конечно же, попрактикуемся в работе с плагином.

Синтаксис Emmet, на самом деле, прост. Если Вы хорошо знакомы с CSS или jQuery, то изучение синтаксиса Emmet не составит для Вас абсолютно никакого труда. Ну а после некоторой практики Вы сможете составлять сложные последовательности аббревиатур, которые будут разворачиваться в сколь угодно большой код.

скачать исходникискачать урок

Хотите узнать, что необходимо для создания сайта?

Посмотрите 3-х минутное видео и у Вас будет четкий пошаговый план по созданию сайта с нуля!

Смотреть видео

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

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

  1. Александр

    Отличный материал! Спасибо большое за столь подробный рассказ об этом классном плагине!
    Правда, лично у меня он встал сразу из родных подключений плагинов (это оч. хорошо), но файла с настройками быстрых клавиш не оказалось (и это плохо). Всё обыскал…
    Но работать просто замечательно!

    • Андрей Кудлай

      Пожалуйста)
      Если плагин встал у Вас корректно при автоматической установке, то, скорее всего, настройки горячих клавиш данного плагина можно найти в меню Опции — Горячие клавиши — Plugin Commands. В списке команд должны быть команды плагина Emmet.

  2. Александр

    Очередной раз Вам низкий поклон))))
    По этой схеме: Опции — Горячие клавиши — Plugin Commands — я поставил нужную функцию…
    Меня поражает одно — я потратил времени больше часа на поиски необходимого изменения, а оказалось всё действительно очень просто! Впрочем, «просто» когда тебе показывают мастера и специалисты… Надо учить матчасть и находить спецов для консультаций….
    Спасибо БОЛЬШОЕ!

  3. Александр

    Извините, Андрей за оф-топ… Самое главное не написал(((( За Ваш рассказ-то я поблагодарил, а вот за подробное описание определенных функций (что является самым главным, так как никто из нас в основной массе, не читает документацию) я отметить и забыл((((
    А по Вашим подробным примерам работать одно удовольствие!!!

  4. Александр

    А где изучить примеры синтаксиса такого быстрого создания вёрстки например для админки интересно будет бытсрее

  5. Александр

    А вот скажите очень важный для меня вопрос я пользуюсь программой CodeLobster для написание php скриптов а есть под него плагины что бы усткорить мне работу потому что создание своиз снипетов это очень даже интересно ? или просто вообще где скачивать для него плагины как в лисе списком что можно установить

    • Андрей Кудлай

      Некоторые плагины есть на офсайте в разделе Download. Сниппеты, полагаю, можно писать самому, эту возможность предоставляют практически все редакторы.

  6. Андрей

    Добрый день!
    Подскажите, пожалуйста, как в Nodepad++ и Sublimate Text 2(которыми Вы пользуетесь) сделать выпадающий список предлагаемых тегов/атрибутов??? Есть специальный плагин? Подскажите название плагина…

    P.S. В Sublimate Text 2 или Nodepad++, такой функции изначально в нет…

    Ссылка на скрин из программы phpDesigner 7:
    https://www.dropbox.com/s/0n83nb7qakwvx9c/screenshot.jpg

    • Андрей Кудлай

      Добрый день.
      Вообще-то для таких вещей все же лучше использовать как раз среду разработки типа phpDesigner. Если все же хочется использовать в данных редакторах такую возможность, то в Notepad++ подсказки уже есть и вызываются комбинацией клавиш Ctrl + Пробел. В ST2 — не знаю, поскольку никогда не пользовался… собственно, в Notepad++ я также не использую данную функцию. По поводу плагинов — нужно гуглить… я подобными плагинами не пользовался.

  7. Ирина

    Спасибо, Андрей! Просто нет слов — и тема классная, нестандартная и полезная, и рассказал все доходчиво, ясно и подробно.

  8. Илья

    Здравствуйте! Я работаю в дримвивере. Установил плагин emmet. Хочу изменить некоторые сниппеты под себя, а для этого нужен файл snippets.json, но я не могу его найти даже через поиск в проводнике… Подскажите пожалуйста, как до него добраться?
    Заранее спасибо!

    • Андрей Кудлай

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

  9. Iryna

    Здравствуйте, Андрей.
    Благодарю за отличный урок, очень много полезного узнала.
    Оказалось, что Emmet работает и на XP, а я уже на него махнула рукой) Установила Вашим методом.
    Единственная проблемка, все команды работают, кроме «Wrap». Горячие клавиши не меняла.
    Буду очень признательна если подскажете как это исправить.

    • Андрей Кудлай

      Здравствуйте, Ирина.
      Возможно эта комбинация клавиш уже просто занята другой программой в системе. Попробуйте в таком случае переназначить сочетание клавиш для данной операции. В любом случае, операция обертки не самая важная и полезная в работе плагина, поэтому, если не получится, я бы не огорчался из-за этого сильно :)

      • Iryna

        Спасибо за ответ.
        Пробовала переназначить клавиши, но реакции нет.
        Ну да ладно, действительно, это не самое важное.
        Ещё раз благодарю за полезный урок.

  10. login2030

    Если у кого по клику на «Emmet» —> «Expand abbreviation» выпадает два окна:
    - первое «unknown exception»
    - второе «Python Script Plugin did not accept the script»
    качайте и устанавливайте PythonScript_1.0.8.0.msi (11.1 MB) на сайте http://sourceforge.net/projects/npppythonscript/files/Python%20Script%201.0.8.0/

    • Александр

      Спасибо login2030, у меня была именно такая ошибка. Помогло, проблема была PythonScript.

  11. Arpeks

    Вот этот сайт поможет с освоением Emmet, на нём почти все сокращения:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree