Emmet в Notepad++. Установка и настройка

Если вы уже начали писать проекты на html то пора вам ознакомиться с техниками ускорения написания кода, типа Zen Coding или Emmet. Наибольшую часть времени при работе с HTML занимает написание тегов. Длинные конструкции, особенно с написанием классов или id занимают очень много времени и являются рутинными операциями. Проекты типа ZenCoding и его дальнейшее развитие Emmet позволяет ускорить и автоматизировать данный процесс.

Для начала давайте установим плагин Emmet для Notepad++. Откройте Notepad++ и перейдите в Плагины → Plugin Manager → Show Plugin Manager. Найдите Emmet и установите его. При установке плагин потребует от вас установки Python script. Согласитесь на установку. А теперь внимание! Та версия Python script которая тянеться из репозитария устарела и не позволяет использовать Emmet, выдавая ошибку «unknown exception» и «Python Script Plugin did not accept the script». Как это исправить? Просто скачайте python script. Распакуйте архив и скопируйте в папку, где установлен Notepad++ все файлы. Если потребуется заменить некоторые файлы — соглашайтесь. Перезапустите Notepad++ и начинайте работу.

Читайте также как установить Emmet и другие плагины в Brackets

Принципы работы с Emmet

Принцип работы простой — вы пишете сокращенную формулу, после чего выбираете опцию Expand Abbreviation (Ctrl+Alt+Enter).

Давайте попробуем. Откроем новый документ и наберем html:5 после чего нажмем Ctrl+Alt+Enter. Итак, было:

Стало:

Таким образом, плагин Emmet, разворачивает код и дополняет его. Давайте ознакомимся с наиболее распространенными сокращениями.

Для создания любого элемента с id используйте синтаксис p#yy. Где p — элемент, yy — id элемента. Для класса — p.yy.

Развернется в:

Также можно комбинировать ввод id и класса. Для этого используется запись p.class#id

Для добавления атрибутов используйте синтаксис p[title=»hello»]. Данный текст развернется в:

Как вы уже догадались, для добавления любого элемента необходимо просто набрать его имя: div, p, h1.

Если необходимо добавить содержимое элемента, то этом можно сделать с помощью фигурных скобок. Так код h1{Привет} преобразуется в:

Для вложенных элементов используется селектор: <

Конструкция div>p>span преобразуется в :

Для генерации двух элементов на одном уровне необходимо применять знак +. Так div+p дадут:

Довольно простая логика, согласны?

Больше всего я не люблю вводить списки. Скучно, долго и нудно. Особенно если эти списки содержат гипессылки. Раньше я набирал одну строку списка и копировал нужное количество раз. Теперь все стало намного проще: ul>li*3>a[href=»#» title=»»]

Таким образом, модификатор *3 продублировал строку 3 раза.

Описанных выше опций хватает для написания любого сложного HTML кода.

Хорошая шпаргалка по написанию кода с помощью Emmet здесь и здесь

Emmet в Notepad++. Установка и настройка: 4 комментария

  1. Сергей

    Добрый день!
    Вопрос : в NOTEPAD++ установленом на ОС Windows xp Emmet работает?
    python script. я установил но комбинация клавиш: (Ctrl+Alt+Enter) не срабатывает!

    1. sadmin Автор записи

      Попробуйте через меню Emmet сделать развертывание аббривеатуры. И посмотрите, что скажет. Также попробуйте клавишу Tab.

      1. Игорь

        Через меню Emmet работает, комбинация клавиш не функционирует. python script установлен, OC Windows 10

  2. Максим

    У меня во вкладке плагины нет Plugin Manager → Show Plugin Manager, а есть только Converter и MIME-Tools, что делать, как установить?

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

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