От автора: если Вы много верстаете и до сих пор не используете плагин Emmet или Zen Coding, то этот урок будет для Вас как нельзя кстати. Используя плагин Emmet, Вы станете писать код на порядок быстрее, а сам процесс написания кода из скучного и рутинного станет оригинальным и доставит несомненное удовольствие.
Плагин Emmet – это ни что иное, как бывший Zen Coding, который приобрел огромную популярность сразу же после своего выхода в свет. Плагин этот представлен в версиях для множества редакторов, так что, скорее всего, Вы также сможете использовать его в своем любимом редакторе.
В данном уроке мы установим плагин для редактора Notepad++, рассмотрим возможные проблемы, возникающие при установке и, конечно же, попрактикуемся в работе с плагином.
Синтаксис Emmet, на самом деле, прост. Если Вы хорошо знакомы с CSS или jQuery, то изучение синтаксиса Emmet не составит для Вас абсолютно никакого труда. Ну а после некоторой практики Вы сможете составлять сложные последовательности аббревиатур, которые будут разворачиваться в сколь угодно большой код.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть
Отличный материал! Спасибо большое за столь подробный рассказ об этом классном плагине!
Правда, лично у меня он встал сразу из родных подключений плагинов (это оч. хорошо), но файла с настройками быстрых клавиш не оказалось (и это плохо). Всё обыскал…
Но работать просто замечательно!
Пожалуйста)
Если плагин встал у Вас корректно при автоматической установке, то, скорее всего, настройки горячих клавиш данного плагина можно найти в меню Опции — Горячие клавиши — Plugin Commands. В списке команд должны быть команды плагина Emmet.
Очередной раз Вам низкий поклон))))
По этой схеме: Опции — Горячие клавиши — Plugin Commands — я поставил нужную функцию…
Меня поражает одно — я потратил времени больше часа на поиски необходимого изменения, а оказалось всё действительно очень просто! Впрочем, «просто» когда тебе показывают мастера и специалисты… Надо учить матчасть и находить спецов для консультаций….
Спасибо БОЛЬШОЕ!
Пожалуйста
Извините, Андрей за оф-топ… Самое главное не написал(((( За Ваш рассказ-то я поблагодарил, а вот за подробное описание определенных функций (что является самым главным, так как никто из нас в основной массе, не читает документацию) я отметить и забыл((((
А по Вашим подробным примерам работать одно удовольствие!!!
И Вам спасибо за приятный отзыв
А где изучить примеры синтаксиса такого быстрого создания вёрстки например для админки интересно будет бытсрее
Например, в этом же уроке или на офсайте, или поискать в сети.
А вот скажите очень важный для меня вопрос я пользуюсь программой CodeLobster для написание php скриптов а есть под него плагины что бы усткорить мне работу потому что создание своиз снипетов это очень даже интересно ? или просто вообще где скачивать для него плагины как в лисе списком что можно установить
Некоторые плагины есть на офсайте в разделе Download. Сниппеты, полагаю, можно писать самому, эту возможность предоставляют практически все редакторы.
Добрый день!
Подскажите, пожалуйста, как в Nodepad++ и Sublimate Text 2(которыми Вы пользуетесь) сделать выпадающий список предлагаемых тегов/атрибутов??? Есть специальный плагин? Подскажите название плагина…
P.S. В Sublimate Text 2 или Nodepad++, такой функции изначально в нет…
Ссылка на скрин из программы phpDesigner 7:
Добрый день.
Вообще-то для таких вещей все же лучше использовать как раз среду разработки типа phpDesigner. Если все же хочется использовать в данных редакторах такую возможность, то в Notepad++ подсказки уже есть и вызываются комбинацией клавиш Ctrl + Пробел. В ST2 — не знаю, поскольку никогда не пользовался… собственно, в Notepad++ я также не использую данную функцию. По поводу плагинов — нужно гуглить… я подобными плагинами не пользовался.
спасибо большое за ответ и урок!
Пожалуйста
Рад, что урок пригодился.
Спасибо, Андрей! Просто нет слов — и тема классная, нестандартная и полезная, и рассказал все доходчиво, ясно и подробно.
Пожалуйста, Ирина.
Рад, что урок понравился)
Здравствуйте! Я работаю в дримвивере. Установил плагин emmet. Хочу изменить некоторые сниппеты под себя, а для этого нужен файл snippets.json, но я не могу его найти даже через поиск в проводнике… Подскажите пожалуйста, как до него добраться?
Заранее спасибо!
Здравствуйте.
К сожалению, не смогу подсказать, поскольку не пользуюсь Дримвивером. Попробуйте обратиться к документации к редактору или плагину, уверен, там должен быть ответ на этот вопрос.
Здравствуйте, Андрей.
Благодарю за отличный урок, очень много полезного узнала.
Оказалось, что Emmet работает и на XP, а я уже на него махнула рукой) Установила Вашим методом.
Единственная проблемка, все команды работают, кроме «Wrap». Горячие клавиши не меняла.
Буду очень признательна если подскажете как это исправить.
Здравствуйте, Ирина.
Возможно эта комбинация клавиш уже просто занята другой программой в системе. Попробуйте в таком случае переназначить сочетание клавиш для данной операции. В любом случае, операция обертки не самая важная и полезная в работе плагина, поэтому, если не получится, я бы не огорчался из-за этого сильно
Спасибо за ответ.
Пробовала переназначить клавиши, но реакции нет.
Ну да ладно, действительно, это не самое важное.
Ещё раз благодарю за полезный урок.
Пожалуйста)
Если у кого по клику на «Emmet» —> «Expand abbreviation» выпадает два окна:
- первое «unknown exception»
- второе «Python Script Plugin did not accept the script»
качайте и устанавливайте PythonScript_1.0.8.0.msi (11.1 MB) на сайте
Спасибо login2030, у меня была именно такая ошибка. Помогло, проблема была PythonScript.
Вот этот сайт поможет с освоением Emmet, на нём почти все сокращения: