Emmet для notepad: Установка Emmet на Notepad++.

Notepad++ ускоряем написание кода – Emmet плагин — Блог Анатолия Бузова

22 августа, 201830 января, 2018

Emmet – довольно полезный плагин редактора Notepad ++.  Для чего нужен плагин Emmet редактора Notepad++ ? Плагин используется для ускорение написания HTML и CSS кода. А именно – вы пишите короткий код, нажимаете заданное сочетание клавиш и код разворачивается в полноценный.

В начале проверим, установлен ли плагин Emmet, для этого откроем вкладку Плагины. Если данный плагин не установлен зайдем в менеджер плагинов (plugin manager) и установим его: Плагины — Менеджер плагинов — Emmet — Установить.  Плагин активируется после перезагрузки редактора.

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

Когда плагин Emmet для Notepad++  установлен, определим сочетание клавиш для «разворачивания» кода. Идем в Опции (Option) – Горячие клавиши (Hotkeys) – Команды плагинов (Plugin commands). Далее ищем две команды:

• Expand abbreviation (развернуть аббревиатуру),
• Wrap width abbreviation (завернуть аббревиатуру).

Я задал сочетания клавиш Alt+Q и Alt+W соответственно. Теперь самое интересное. Для примера наберем в редакторе аббревиатуру (по сути, сокращенный код), вот как это работает. Например, нам нужно быстро создать нумерованный список с пятью элементами, набираем:

ol>li*5

Нажимаем Ctrl+Enter

Это небольшая конструкция наглядно демонстрирует возможности плагина Emmet.

А теперь вашему вниманию предоставляется краткий справочник сокращений плагина Emmet редактора Notepad++:

Дочерний элемент: > . Пример:

div>table>tr>td

Каждый следующий тег будет дочерним для предыдущего (вложенным). bq

Перемещает элементы до знака выше, чем элементы после.

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

Группировка (). Пример: div>(header>ul>li)+footer>p

Группирует элементы.

<div>
<header>
<ul>
<li></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>

Умножение: *. Пример: ol>li*4

Задает необходимое количество тегов.

<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

Нумеровать: $. Пример:

ul>li#style_$*3

Нумерует элементы.

<ul>
<li></li>
<li></li>
<li></li>
</ul>

Автоматизация кода в Notepad++ с помощью плагина Emmet

Оглавление:
• Вступление
• Селекторы в Emmet
• Примеры комбинации сокращений и селекторов Emmet
• Изменение «горячих» клавиш развертывания сокращений

Вступление

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

Установка осуществляется через менеджер плагинов, выбираем «Emmet» и устанавливаем.

Пробуем работает плагин или нет, для этого набираем img (курсор оставляем сразу за img) и нажимаем

Ctrl + Alt + Enter (о там как изменить сочетание клавиш читайте в конце страницы).

Если появился код как показано в примере 1, то на этом установка закончена, плагин работает

Пример 1
Набираем: 
img
Получаем:
<img src="" alt="">

Однако, например у меня ничего сразу не получилось. То есть, установка плагина Emmet, эта та еще морока, если просто прочитал и начал устанавливать. Не помогла ни перестановка самого плагина, ни перестановка всего Notepad++.

После чтения различных форумов и статей, лично мне помогла установка отдельным файлом плагина скриптов Python для Notepad++, для тех кто будет искать файл в сети, называется он PythonScript_1.0.8.0.msi. После установки этого плагина, Emmet наконец заработал.делает переход на уровень вверх

*умножает элементы$заменяется числом, увеличивающимся на единицу$$то же самое, что и в п. 09 — только двухзначное{ }добавляет текстовое содержимое элементам( )группирует элементы:для элементов таких как <input>, <a>, <link> и др. — задает атрибуты

Примеры комбинации сокращений и селекторов Emmet

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

1. Таблица с классом ABCD, включая название и шапку, с семью столбцами и тремя строками. tr*3>td{$}+td*6 Получаем: <table> <caption></caption> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> </tr> <tr> <td>1</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>2</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>3</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table>

2. Часто при верстке требуется набор слов, чтобы просто заполнить блоки текстом для визуального представления страницы, при этом смысл текста абсолютно не важен, так называемая «рыба».

   C Emmet сделать это легко и просто, для этого нужно набрать слово Lorem и указать необходимое количество слов.

   
   Пример 3
   Набираем:
   Lorem10
   Получаем:
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, nesciunt.
   

Изменение «горячих» клавиш развертывания сокращений

Стандартное сочетаний клавиш развертывания сокращений, мне показалось не очень удобным, поэтому оно было изменено (см. рисунок 1).

рисунок 1

Тем более, что это занимает минимум усилий и времени.

1. Идем в Меню — Опции — Горячие клавиши
2. В открывшемся окне переключаемся на вкладку «Plugin commands» и ищем там строку «Expand abbreviations», кликаем по ней мышью, и в новом окне устанавливаем нужное (см. рисунок 2).

рисунок 2

Как установить плагин emmet

Ваш браузер не поддерживает JavaScript. В результате ваши впечатления от просмотра будут уменьшены, и вы будете переведены в режим только для чтения .

Загрузите браузер, поддерживающий JavaScript, или включите его, если он отключен (например, NoScript).

Эта тема была удалена. Его могут видеть только пользователи с правами управления темами.

• 
  

  Я устанавливаю последнюю версию np++.
  Вручную установить менеджер подключаемых модулей. (Создал папку «pluginmanager» в папке np++ и скопировал в dll).
  Запустите менеджер плагинов и установите плагин emmet.
  (Установлены emmet и pyton).
  Чем запросить перезагрузку np++.
  После перезапуска np++ вышло окно с ошибкой:

  http://i. piccy.info/i9/385b02d2bb9101343e6b4046618c4264/1553608476/11102/1309750/2.gif

• 
  

  @Александра-Руденко

  старый менеджер плагинов не совместим с более новыми версиями notepad++.
  , пожалуйста, не используйте диспетчер плагинов в notepad++ версии 7.6 и выше, так как он будет записывать файлы в неправильные места.

  сначала отмените все изменения, внесенные вами в установку notepad++, удалив менеджер плагинов и удалив все, что вы могли установить с помощью менеджера плагинов.
  убедитесь, что вы не видите никаких сообщений об ошибках при запуске notepad++, и убедитесь, что вы не видите менеджер плагинов в вашем меню плагинов больше.

  далее следуйте >>> Руководству: Как установить плагин PythonScript на Notepad++ 7.

  6.3, 7.6.4 и выше <<<, чтобы установить pythonscript вручную.

  , затем загрузите подключаемый модуль emmet emmet-npp.zip из >>> здесь <<< и распакуйте его.

  перейдите в меню notepad++ 7.6.4 плагины > откройте папку плагинов , чтобы открыть папку плагинов, и создайте новую папку с именем ЭмметАЭС .

  скопируйте EmmetNPP.dll из извлеченного emmet-npp.zip в созданную вами папку EmmetNPP .
  скопируйте все файлы и папки из папки EmmetNPP из извлеченного emmet-npp.zip в созданную вами папку EmmetNPP .

  примечание: ваша папка plugins\EmmetNPP теперь должна содержать EmmetNPP.dll , _PyV8.pyd , editor.js , npp_emmet.py , PyV8.py и папку с именем emmet .

  теперь перезапустите блокнот ++, и вы увидите как плагин emmet, так и плагин скрипта python в меню плагинов.

• Версия плагина emmet, загруженная отсюда, подходит только для 32-битной ОС

• 
  

  добро пожаловать в сообщество Notepad++, @Tanveer-Malik

  Версия плагина emmet, загруженная отсюда, подходит только для 32-битной ОС

  да, официальный плагин emmet notepad++ известен только как 32-битный.
  , если вам нужен emmet, установите 32-битную версию notepad++, которая будет нормально работать на 64-битной ОС Windows.
  в качестве альтернативы вы можете попробовать использовать экспериментальную, неофициальную, 64-битную версию, скомпилированную пользователем, из >>> здесь <<<.

  Если вам нужна дополнительная базовая информация о плагине emmet notepad++, посетите также
  трекер проекта плагина emmet: https://github.com/emmetio/npp/issues
  и страницы документации emmet: https://docs.emmet.io

  имейте в виду, что проект emmet не очень хорошо поддерживается, и доступная документация emmet может быть устаревшей.

• @Meta-Chuh
  Где новый менеджер плагинов?

• 
  

  @Marcin-Po

  новая встроенная замена менеджера плагинов называется Plugins Admin и находится в меню Плагины > Администрирование плагинов. .. , как показано на скриншоте ниже.

  примечание: администратор плагинов не содержит все плагины, так как некоторые из них не были добавлены в официальный список плагинов notepad++ разработчиком плагина.

• Я вижу только «Открыть папку плагинов…» (Notepadd++ 7.6.4 или 7.6.5)

• 
  

  @Marcin-Po сказал:

  Я вижу только «Открыть папку плагинов…» (Notepadd++ 7.6.4 или 7.6.5)

  Обычно так бывает при нестандартном способе установки. Вы использовали установщик или портативную версию zip/7z/minimalist? Если установщик, вы его ставили в обычное место или указали другой каталог? Если портативный, в какой каталог вы его поместили?

  (Также перейдите в меню Notepad++ ?> Информация об отладке > Скопируйте информацию об отладке в буфер обмена и вставьте в свой ответ — это покажет нам, что Notepad++ может видеть о своей среде)

• 
  

  Я использовал установщик и нормальное расположение.

  Notepad++ v7.6.5 (32-разрядная версия)
  Время сборки: 29 марта 2019 г. — 02:46:18
  Путь: C:\Program Files (x86)\Notepad++\notepad++.exe
  Режим администратора: ВКЛ
  Режим локальной конференции : OFF
  ОС : Windows 7 (64-разрядная)
  Плагины : DSpellCheck. dll EmmetNPP.dll mimeTools.dll NppConverter.dll NppExport.dll PythonScript.dll

• 
  

  @Marcin-Po сказал:

  Я использовал установщик и нормальное расположение.

  Спасибо.

  Я думаю, что с этими ответами вы увидите администратора плагинов.

  Я вижу, что вы находитесь в режиме администратора. Я не думаю, что это повлияет на доступность администратора плагинов. С моим портативным компьютером я могу работать в режиме администратора и по-прежнему видеть администратор плагинов. Возможно, @Meta-Chuh или кто-то другой с уже доступной установленной версией может подтвердить, что режим администратора работает с администратором плагинов на 32-разрядной версии 7.6.5.

  О, интересно, что-то напутано в программе обновления GUP. Можете ли вы дать нам вставку из каталога c:\program files (x86)\noteapd++\updater ? чтобы мы могли видеть, есть ли у вас все файлы, необходимые для внутреннего средства обновления (на которое полагается администратор плагинов, IIRC).

• 
  

  привет @Marcin-Po @PeterJones et al.

  да, администратор плагинов notepad++ появится и будет работать в режиме администратора.

  режим администратора будет активирован автоматически, если контроль доступа пользователей Windows (UAC) отключен, и вы увидите Notepad++ [Администратор] в строке заголовка Notepad++.

  одна вещь, которая может вызвать то, что вы видите, это отсутствие списка плагинов.
  перейдите в плагины > откройте папку плагинов. .. и найдите папку с именем Config . он должен содержать файл с именем nppPluginList.dll , который содержит список подключаемых модулей.

  , если он отсутствует, переустановите notepad++ 7.6.5. 32 бит поверх существующего блокнота++ с помощью установщика отсюда:
  https://notepad-plus-plus.org/repository/7.x/7.6.5/npp.7.6.5.Installer.exe
  (удаление существующего блокнота++ не требуется)

  важно : когда вы переустанавливаете блокнот ++ поверх существующего блокнота ++, убедитесь, что параметры установщика плагины и плагины администратора включены.

• 
  

  @PeterJones сказал:

  О, интересно, что-то не так в программе обновления GUP. Можете ли вы дать нам вставку из каталога c:\program files (x86)\noteapd++\updater? чтобы мы могли видеть, есть ли у вас все файлы, необходимые для внутреннего средства обновления (на которое полагается администратор плагинов, IIRC).

  gpup.exe
  GUP.exe
  libcurl.dll
  ЛИЦЕНЗИЯ
  README.md

• 
  

  @Meta-Chuh сказал:

  важно: когда вы переустанавливаете блокнот++ поверх существующего блокнота++, убедитесь, что в настройках установщика включены плагины и администратор плагинов.

  Переустановка ничего не дает, но пробовал переустановить без плагинов и плагинов админа, и еще раз с этими опциями и работает!

• org/Comment»>
  

  У меня установлен плагин emmet, как описано в инструкции.
  Но при выборе в меню плагина «Расширить аббревиатуру» np++ вылетает ошибка.

  http://i.piccy.info/i9/8c542a9158620c5df8f24c3e61c3f758/1554642244/8420/1309750/plugin_exception_pyton_1.gif

  http://i.piccy.info/i9/eadf8d0a80d8beeb9feb034c72bbbee6/1554642290/6704/1309750/emmet_2.gif

• 
  

  @Александра-Руденко

  перейдите в меню блокнота ++ плагины > откройте папку плагинов , чтобы открыть папку плагинов, и откройте папку EmmetNPP .

  проверьте наличие файлов _PyV8.pyd , editor.js , npp_emmet.py , PyV8.py и папки с именем emmet .
  , если нет, скопируйте их из папки EmmetNPP внутри emmet-npp.zip .

  если все на своих местах, то расширить аббревиатуру будет вести себя так, как показано на скринкасте ниже:

• 
  

  @Meta-Chuh
  Это новый плагин ComparePlus ?

• 
  

  Те же ошибки.

  http://i.piccy.info/i9/8c542a9158620c5df8f24c3e61c3f758/1554642244/8420/1309750/plugin_exception_pyton_1.gif

  http://i. piccy.info/i9/eadf8d0a80d8beeb9feb034c72bbbee6/1554642290/6704/1309750/emmet_2.gif

  http://i.piccy.info/i9/767e2c0f496d0ceaac5e43f1721da3a0/1554804918/72997/1309750/explorer.gif

• 
  

  @andrecool-68

  да, хорошо подмечено.

  это грядущий ComparePlus от @pnedev
  (также небесный создатель плагинов > открыть папку плагинов... 😉)

  большие и потрясающие новые изменения и функции по сравнению со старым плагином сравнения, такие как дифференциальный красный/зеленый выделение в diff строках для удаленного/добавленного текста вместо одного цвета и многое другое. 👍

• org/Comment»>

  @Meta-Chuh
  В PluginAdmin я вижу только одно Compare …ComparePlus нет)

• @Alexander–Rudenko
  Вставьте свои фотографии на форум таким образом
  ![](http://i.piccy.info/-x-x-.gif)

Эммет не работает | Блокнот++ Сообщество

Ваш браузер не поддерживает JavaScript. В результате ваши впечатления от просмотра будут уменьшены, и вы были помещены в режим только для чтения .

Загрузите браузер, поддерживающий JavaScript, или включите его, если он отключен (например, NoScript).

Эта тема была удалена. Его могут видеть только пользователи с правами управления темами.

• Установлены Notepad++ (7.5.8.) и Emmet 64bit (1.0.0.)
  Однако команды в Plugins/Emmet/xxxx не работают.
  Как это исправить?

• 
  

  Откуда вы установили Emmet 64bit? Судя по https://github.com/emmetio/npp#readme, такой версии нет.
  https://github.com/emmetio/npp/issues кажется правильным местом, но, похоже, уже существуют 64-битные проблемы.

• org/Comment»>
  

  скачано с http://emmet.io

• 
  

  @Jan-Kijlstra

  Единственный плагин Emmet, который я вижу на этом сайте, — 32-битный.

• 
  

  @Jan-Kijlstra ,

  Я тоже вижу только 32-битный.

  Если я перейду по указанному вами URL-адресу, а затем перейду на страницу загрузки, а затем на страницу Notepad ++, мне потребуется https://github.com/emmetio/npp#readme. Оттуда я нажимаю «Загрузить EmmetNPP», что дает мне 32-битную DLL.

  Если вы попытаетесь установить 32-битную DLL в 64-битный Notepad++, это не сработает. Далее, если бы вы смогли найти 64-битный плагин EmmetNPP и установить его на 32-битную АЭС, он тоже не сработал бы.

  Не могли бы вы перейти к вашему Notepad++ ? , выберите Информация об отладке и скопируйте информацию об отладке в буфер обмена и вставьте ее сюда? Если ваша копия Notepad++ способна распознать подключаемый модуль Emmet, он будет указан в списке подключаемых модулей . Если нет, то либо они несовместимы (32-разрядная и 64-разрядная, либо из-за каких-то других изменений, которые происходят… тем более, что Дон Хо, похоже, реструктурирует, где будут располагаться плагины).

  Ой, подождите, вы же намекнули, что можете видеть Плагины> Меню Emmet с xxxx элементами… это, вероятно, означает, что что-то в том, как работает EmmetNPP, несовместимо с тем, как сейчас работает Notepad++. Возможно, вы захотите попробовать вернуться к паре версий Notepad++ и посмотреть, исправит ли это ситуацию. Если это так, вам нужно создать проблему с EmmetNPP, потому что им, возможно, придется что-то изменить, чтобы оставаться совместимым с NPP в будущем. (На самом деле кажется, что кто-то уже отправил отчет об ошибке 64-битной версии на https://github.com/emmetio/npp/issues/24 — о, это явно проблема 32-битной и 64-битной версии.)

  Тем не менее, дайте нам Debug Info , и, если вы действительно 64-битный, где именно вы скачали 64-битную DLL.

• 
  

  Вот он:

  Notepad++ v7.5.8 (64-разрядная версия)
  Время сборки: 23 июля 2018 г. — 02:06:36
  Путь: C:\Program Files\Notepad++\notepad++.exe
  Режим администратора: ВЫКЛ
  Режим локальной конференции: ВЫКЛ.
  ОС: Windows 10 (64-разрядная версия)
  Плагины: EmmetNPP. dll PluginManager.dll PythonScript.dll XMLTools.dll DSpellCheck.dll mimeTools.dll NppConverter.dll

  Rgds

  Январь

• 
  

  куда именно вы скачали 64-битную DLL

  @Jan-Kijlstra

  Вы забыли ответить на запрошенную информацию выше

• 
  

  Извините, будучи новым пользователем, мне пришлось ждать 1200 секунд, прежде чем
  смог ответить (довольно глупо, имхо, отталкивать новых членов сообщества).

  Вот где я это нашел:

  https://github. com/emmetio/npp/issues/19

  Это в сообщении wdhwg001

  Там ссылка на EmmetNPP_x64.zip

• 
  

  @Jan-Kijlstra

  пришлось ждать 1200 секунд, прежде чем он смог ответить (довольно глупо, имхо, отталкивать новых членов сообщества).

  Никого (пытаясь) не отталкивать, кроме спамеров. У вас не должно быть задержек с публикацией, так как я дал вам 2 очка репутации.

• Спасибо.

• org/Comment»>
  

  @Jan-Kijlstra

  какую версию плагина скрипта Python вы используете, недавно произошли некоторые изменения.
  Можете ли вы предоставить воспроизводимое пошаговое описание того, что не работает

  Ура
  Клаудия

• 
  

  Сценарий Python 1.2.0.0

  Я запускаю Notepad++, и в меню плагинов есть подключаемый модуль Emmet Notepad++.

  Итак, в Notepad++ я ввожу div, а затем Ctr+Alt+Enter.

  Что открывает новую пустую строку над тегом.

  Но не

  ,