По советам посетителей решил написать статью о плагине Emmet для Notepad++, ускоряющем разработку скриптов и составление гипертекстовых страниц. В данной статье мы рассмотрим установку плагина и попробуем ввести несколько команд для создания html-страницы.

Плагины для Notepad++

Установка плагинов

Что касается установки плагинов для Notepad++, то здесь все кажется простым. Воспользуемся командой «Show Plugin Manager» из меню «Плагины» - «Plugin Manager».

 

Менеджер плагинов Notepad++

В открывшемся окне менеджера плагинов можно увидеть список доступных для установки расширений.

Выделяя в чекбоксах нужный плагин, и нажимая кнопку «Install», можно обвесить этот редактор кучей полезных (и не очень) функций. В других вкладках «Updates» и «Installed» отображаются доступные обновления и уже установленные плагины соответственно. На последней вкладке кроме просмотра уже установленных плагинов, можно удалить расширение способом, аналогичным установке. Отмечу, что установленные плагины не отображаются во вкладке доступных («Available») вплоть до удаления плагина.

Кроме такой процедуры установки плагинов доступна и ручная, которая заключается в копировании файлов плагина в директорию plugins. Плагин включится сразу после перезапуска редактора. Обычно плагин имеет следующую структуру: динамическую библиотеку (*.dll) с названием плагина и каталог с файлами плагина. При копировании редактор должен быть выключен.

Менеджер плагинов Notepad++

Установка Emmet

В списке доступных мы можем найти два плагина: «Emmet» и «Zen Coding – Python». На самом деле Emmet является развитием Zen Coding.

 

Установим Emmet. На данный момент плагин использует python 2.7, который так же присутствует в системе. После установки необходимо перезапустить редактор.

Emmet Notepad++

В списке плагинов вы найдете строчку «Emmet» и выпадающее меню с командами плагина. Самая верхняя строчка и основная команда преобразования строки «Expand Abbreviation». Эта команда вызывается сочетанием клавиш Ctrl+Shift+Enter.

Настройка и применение Emmet в Notepad++

Я использую редактор на ОС MS Windows 8 Pro x64 в стандартной комплектации с настройками, которые описаны в статье «Настройка Notepad++». И, честно говоря, у меня Emmet не стал работать, как говорится, «из коробки». При написании пробного div и нажатия указанного сочетания получилось только вызвать ошибку, точнее две ошибки:

  • "unknown exception" – неизвестное исключение
  • "Python Script Plugin did not accept the script" – питону не нравится сценарий.

Emmet Notepad++Первым делом я полез менять настройки сочетания клавиш, предположив, что есть конфликт и назначил сочетание, которое тоже занято (косяк), а потом еще раз назначил, но уже свободное.
Назначение происходит в мастере Shortcut Mapper («Опции» - «Горячие клавиши…»). Менеджер имеет пять вкладок и третья из них «Plugins commands», где можно найти требуемое сочетание «Expand Abbreviation». Я поставил Alt+Z.

По после применения настроек все равно работать плагин не захотел и в этот раз даже ошибок не нарисовал..

Сначала я грешил на кривые руки автора статьи, кривую ОС автора статьи и кривые настройки Notepad++ автора статьи. Мама автора всегда говорила, что у него золотые руки и неважно откуда они растут… Кривая система автора статьи на данный момент была абсолютно свежераспакованной из резервной копии и не могла содержать великих глюков. Настройки редактора автор статьи сбросил на дефолт, удалив config.xml в корне каталога редактора.

В общем, после всех манипуляций и переустановок Emmet и Python я не получил результатов и прибег к помощи великих знатоков, предлагающих "погуглить". И вколотив ошибку в google вышел на иностранный форум, где предлагалось скачать полную версию Python 0.9.2.0, якобы родной питон не дружит с не менее родным Emmet.

И действительно, после распаковки архива, который содержал папку plugins и библиотеку питона в.2.7 в корень редактора с заменой файлов, Emmet стал работать.

 

Насколько хорошо работать мне пока оценить не удалось, однако после набора команды div и нажатия Alt+Z на экране появилась запись открывающего и закрывающего тега <div></div>. Вот так удача.

После замены питона в менеджере плагинов в разделе обновлений появилось упоминание о новой версии питона. Оказалось, что я установил более раннюю версию и она заработала. Когда я обновился до новой версии при помощи менеджера плагинов, то снова получил неработающий Emmet. 

Разумеется мне пришло в голову найти все там же последнюю версию питона. И я нашел. На этот раз это был установочный пакет windows (PythonScript_1.0.8.0.msi) и при установке он не спросил директории установки (и я предположил, что он сам найдет Notepad++, наивный), не ругался на отрытый редактор (он реально был в это время открыт). Значит он копировал файлы не в каталог редактора.

Оказалось, что установщик заботливо положил все в каталог c:\Program Files (x86)\Notepad++\.  
Содержимое я, опять же вручную, скопировал в каталог редактора с заменой содержимого. В менеджере плагинов отобразился Python Script последней версии и якобы в хорошем самочувствии. Проверим Emmet – работает.

При установке Python Script мне было предложено указать дополнительные компоненты пакета (отмечено только 3 из 6 на установку), но я решил использовать настройки по умолчанию, оставляя за собой право поиграть с компонентами в случае нерабочего Emmet. Этого не случилось, так что ждем новых глюков.

Знакомство с Emmet

Настало время попробовать ускорение набора кода. Ждать реального ускорения от плагина, не зная тех самых команд ускорения, не приходится и тогда я обратился к справке.

Плагин Emmet для Notepad++

Автозавершение. Эту тему мы уже просекли, когда писали div и плагин заворачивал тег в скобки и приплюсовывал закрывающий тег. Интересно, что кириллический набор символов («блабла» пытался) он не смог завернуть, а вот <blabla></blabla> я все же получил. Дискриминация родного языка. При написании одиночного тега (img) я получил шаблон конструкции <img src="/" alt="">. Очень интересно. Таким образом человеку, незнакомому с html, станет понятно, что есть два обязательных атрибута, нуждающихся в значениях.

Вложенность элементов. Занимательно построена вложенность элементов. Вся суть в перечислении тегов, разделенных знаком «больше» (>), отображающих глубину вложенности слева направо (от родителя к дочерним элементам). Так, если я напишу порядок div>p>span, то получу конструкцию:

<div>
    <p><span></span></p>
</div>

Разумеется, результат впечатляющий, а уж польза просто неоценима для профессиональных верстальщиков.

Аналогичным способом создается сразу несколько последовательных элементов, если заменить знак на «+». Итак, div+p+span:

<div></div>
<p></p>
<span></span>

Знак «^» в записи, содержащей вложенность позволяет элемент после этого знака вывести на один уровень вверх в иерархической структуре (в дереве). Комбинируя эти приемы, можно из одной строки получить сразу более сложную структуру.

div>p>span+span^ul>li:

<div>
    <p><span></span><span></span></p>
    <ul>
        <li></li>
    </ul>
</div>

В рамках этой статьи совсем неправильно было бы давать подробное описание при работе с этим чудесным плагином, так как достаточная информация содержится на сайте разработчика, там она будет всегда актуальна и доступна. Однако, некоторые моменты с минимальными разъяснениями я буду стараться включать в некоторые статьи по верстке. При всем выше сказанном я остаюсь верен мысли, что начинающим сайтостроителям (целевая публика) важно понабивать код ручками, совершать и исправлять ошибки, разбираться в атрибутах и значениях.

 

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

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

Защитный код

Введите код с картинки в текстовое поле

Комментарии   

Александр
+2 # Александр 28.02.2015 01:20
Спустя несколько часов "гугления" и тщетных поисков, я набрел на Вашу статью! Спасибо огромное, помогло!
Ответить | Ответить с цитатой | Цитировать
Кирилл
0 # Кирилл 24.04.2015 20:46
А мне так и не помогло ничего :( Работает только комбинация клавиш Ctrl+K - создаёт комментарий в документе. А вот все остальные функции вообще никак. Правда после замены "питона" ошибка тоже не вылетает. При нажатии Ctrl+E - прописывается ENQ в чёрном квадрате. Я не знаю вообще что это такое. При попытке скомандовать через меню - ровным счётом ничего не происходит вообще.
Неделю уже бьюсь. (
Ответить | Ответить с цитатой | Цитировать
yaryk
0 # yaryk 08.07.2015 18:31
проблема решилась - оказывается, не работает, если использовать PythonScript_min_0.9.2.0.7z
Берем PythonScript_full_0.9.2.0.7z - и все отлично!
Ответить | Ответить с цитатой | Цитировать
Кирилл
0 # Кирилл 08.07.2015 20:14
Оказалось, что нужно брать старую версию "питона" - с последней (самой свежей) глючит.
Ответить | Ответить с цитатой | Цитировать
Виктор
0 # Виктор 29.06.2015 14:30
Вау обзор Emmet (Zencoding)!
Прошу обратить внимание на экшены в Emmet. Ваще вещь!!!
Ответить | Ответить с цитатой | Цитировать
 Roman
0 # Roman 30.09.2015 17:54
Моя проблема с установкой была в том, что этот плагины не работают из %appdata% поэтому, лучше и не разрешать грузить туда плагины при установке notepad++
Ответить | Ответить с цитатой | Цитировать
Ярослав
0 # Ярослав 01.12.2015 13:29
Респект, все четко и лаконично, а то уже хотел на другой редактор переходить :Р
Ответить | Ответить с цитатой | Цитировать
Владимир
0 # Владимир 09.06.2017 22:45
Спасибо.
Emmet установился. Помог только Ваш совет с переустановкой PythonScript
Ответить | Ответить с цитатой | Цитировать