Меню Рубрики

Установка emmet для notepad

Блог Александра Климова

Повелитель котов

Подружить Emmet с новой версией Notepad++

Сегодня прилетелело обновление на Notepad++ (v.7.6.6) и неожиданно сломался плагин Emmet. А без него я уже не могу. Сначала я не мог понять, почему не работают горячие клавиши, а потом увидел, что самого плагина нет. Полез разбираться. Оказалось, что с некоторых пор ветка 7.6.6 и выше изменила способ работы с плагинами.
Теперь в меню нет пункта Plugin Manager, вместо него теперь Plugins Admin. Но это полбеды, в новом менеджере не находится нужный плагин. Как я понял, разработчики плагинов должны как-то связаться с автором блокнота, чтобы добавить свой плагин.
Остаётся муторный способ — добавлять вручную. Убил полдня, чтобы разобраться с этими механизмом и пишу сюда на всякий случай, чтобы не забыть самому. Работает только под 32-битную версию, под 64-битную на свой страх и риск, там пока экспериментируют.

Итак, шаг первый — сначала следует установить плагин PythonScript. Скачиваем архив PythonScript_Full_1.3.0.0.zip и распаковываем в отдельную папку. Затем открываем папку %ProgramFiles(x86)%\Notepad++\plugins\ и создаём в ней новую папку PythonScript. Копируем файл PythonScript.dll из папки plugins распакованного архива и вставляем его в созданную папку %ProgramFiles(x86)%\Notepad++\plugins\PythonScript\.
Копируем файл python27.dll из архива в папку %ProgramFiles(x86)%\Notepad++\.
Копируем папки scripts и lib из архивной папки plugins\PythonScript в созданную папку %ProgramFiles(x86)%\Notepad++\plugins\PythonScript\.
Надеюсь, вы не запутались.

Второй шаг — установка плагина Emmet. Скачиваем архив emmet-npp.zip и распаковываем его.
Создаём в папке %ProgramFiles(x86)%\Notepad++\plugins\ новую папку EmmetNPP.

Копируем файл EmmetNPP.dll из архива и вставляем в созданную папку EmmetNPP.
Копируем все файлы и папки из папки EmmetNPP архива и вставляем в созданную папку EmmetNPP.
Теперь ваша папка ..\plugins\EmmetNPP должна содержать файлы EmmetNPP.dll, _PyV8.pyd, editor.js, npp_emmet.py, PyV8.py и папку emmet.

Перезапускаем блокнот и видим в меню плагины Emmet и PythonScript. Осталось повесить горячие клавиши на любимые команды.

источник

Notepad++ ускоряем написание кода – Emmet плагин

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 соответственно. Теперь самое интересное. Для примера наберем в редакторе аббревиатуру (по сути, сокращенный код), вот как это работает. Например, нам нужно быстро создать нумерованный список с пятью элементами, набираем:

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

Плагин Emmet для Notepad++ как пользоваться

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

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

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

Соединение элементов: + . Пример: p+b+i+span

Поочередно добавляются открывающие и закрывающие теги.

Поместить элемент выше: ^. Пример: div>p+span^bq

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

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

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

Нумеровать: $. Пример: ul>li#style_$*3

источник

Блог веб дизайнера.

Уроки по дизайну и верстке сайтов.

Страницы

Notepad++ и плагин Emmet.

Установка и настройка Notepad++ и подключение плагина Emmet.

Приветствую всех читателей блога. Сегодня поговорим о текстовом редакторе Notepad++. А в частности о его использовании в качестве редактора кода.
Поскольку NPP имеет интеллектуальную подсветку кода, поддерживает синтаксис практически всех языков программирования, имеет встроенную функцию авто закрытия тегов, скобок и кавычек, а так же функцию авто подсказок, то он с полным правом может считаться полноценным редактором кода. При этом, с учетом его легковесности, быстродействию, отказоустойчивости, бесплатности и возможности расширения функционала за счет подключаемых плагинов, я считаю NPP одним из лучших редакторов. Думаю, что многие, кто занимается кодингом со мной согласятся.

Читайте также:  Установка ксенон на wingroad

Итак, давайте его установим и настроим для полноценной работы с HTML и CSS. Скачиваем установщик по ссылке или с сайта разработчиков и устанавливаем. Единственное, что Вам нужно будет сделать во время установки, это указать Русскую локализацию.

Теперь займемся настройкой. Прежде всего определимся с внешним видом. Для начала создаем новый документ и во вкладке «Синтаксис» выбираем HTML. Теперь набираемый код будет подсвечиваться. Чтобы изменить стиль редактора кликаем по вкладке «Опции» и выбираем пункт «Определение стилей…». В выпадающем списке «Выбрать тему» выбираем ту цветовую схему, которая Вам больше всего понравиться. Просто пишем несколько произвольных строк с тегами, атрибутами и просто текстом. И смотрим на результат. Как известно, приятный внешний вид непроизвольно улучшает настроение, а соответственно и производительность.

Теперь во вкладке «Опции» выбираем пункт «Настройки…». В открывшемся окне переходим в пункт «Новый документ». Здесь мы задаем параметры для всех новых создаваемых документов. В списке «Синтаксис» устанавливаем HTML. Тетерь, при создании документа теги будут подсвечиваться, а при его сохранении будет автоматически выбран тип файла HTML.
В блоке «кодировка» выбираем кодировку по умолчанию. Я рекомендую использовать UTF-8, поскольку она универсальная и в настоящий момент самая перспективная. Хотя здесь у каждого свои предпочтения. Если выбираете UTF-8, то обязательно снимите галку с пункта «Применить при откр. ANSI файла». В противном случае все открываемые файлы с кодировкой ANSI будут автоматически перекодированы в UTF-8. Что не есть правильно.

Дальше в пункте «Автозавершение» в блоке «Парные символы» устанавливаем флажки напротив скобок < >, ( ), [ ] и кавычек » «, ‘ ‘. Теперь они будут закрываться автоматически и у Вас уже не получиться забыть закрыть скобки. Весьма удобная функция. Чекбокс «закр. теги HTML/XML» оставляем пустым.

EMMET.

Настала пора подключить к NPP плагин Emmet. Плагин этот предназначен для ускорения написания кода HTML и CSS. Документацию с видео уроками Вы можете найти на сайте разработчика. Там же посмотреть с какими редакторами он может быть использован. Итак, давайте подключим Emmet к нашему NPP. Для этого заходим во вкладку «Плагины» и в пункте «Plugin Manager» выбираем «Show Plugin Manager». В открывшееся окно будут загружены все доступные для установки на данный момент плагины. Находим среди них Emmet, устанавливаем напротив него флажок и нажимаем кнопку «Install».

Далее соглашаемся со всем, что потребует установщик. Включая перезагрузку Notepad++. Нюанс: при перезагрузке редактора может появиться всплывающее окно сохранения документа, которое (почему-то) спрятано под окно перезагрузки. Нужно его «достать» и закрыть. В противном случае перезагрузку будете ждать вечно.
После перезагрузки NPP во вкладке «Плагины» появится плагин Emmet.

Теперь переназначим горячие клавиши для основных действия плагина. Для этого заходим в «Опции» -> «Горячие клавиши…» и во вкладке «Plugin commands» выбираем «Expand abbreviation» и нажимаем кнопку «Modify». Затем выбираем удобные сочетания клавиш если они доступны. Если сочетание доступно но не работает, значит оно где-то уже назначено. При желании можно поискать где именно и снять назначение (назначить другое). А для экспанда использовать понравившееся.
К примеру на скрине выше у меня назначено сочетание Ctrl+Spacebar. До этого оно было назначено команде «Завершение функций» во вкладке «Main menu» которой я не пользуюсь и которой я назначил другое сочетание.
Аналогичным образом меняем сочетание клавиш для «Wrap with abbreviation».

. Интересно, правда? Если блок div имеет идентификатор или класс, то слово div можно опустить.
Попробуйте так: #top_menu>ul>li.menu*4>a и получим:
Как вы успели заметить, знак > означает вложенность а * — количество подобных тегов на данном уровне.
А теперь наберите вот такую строчку:
html((head>link+title)+body(#main(#header)(#block((#content_block>#content)+#left_block+#right_block))+#footer))
И в результате получаем готовый HTML код каркаса трехколоночной страницы. Осталось добавить стили и все.
При написании CSS свойств все еще проще. В основном, за некоторыми исключениями, сокращение свойств производится по первым буквам. Например: m – margin, ml – margin-left, p – padding, fw — font-weight и так далее. Заходим на сайт разработчика и смотрим там. Но лучше всего запоминается, когда пробуешь сам и записываешь на бумажке.
Если Вам нужен заполняющий текст, так называемая «рыба», то просто набираете lorem запускаете экспанд и все.
Теперь коротко об «Wrap with abbreviation». Это не что иное, как обертка. К примеру, Вы хотите обернуть текст в тег параграфа. Для этого выделяете текст и запускаете врап. Горячие клавиши для него Вы уже назначили. В результате появится окно в котором и нужно прописать р. Или, к примеру, div>p и тогда параграф будет внутри контейнера.
На этом, пожалуй пора заканчивать.
До следующих постов.

Читайте также:  Установка простенка из гипсокартона

Видеоверсия поста.

источник

Настраиваем Emmet в notepad++

Emmet — это скорость набора тегов для веб-верстальщиков. сокращенные команды+определенная клавиша и страница может быть заполнена. давайте настроим emmet для текстового редактора notepad++

Сразу небольшое отвлечение, до недавнего времени я страдал от того, что emmet попросту не работал в моем notepad++ и меня это очень сильно коробило и вот сегодня я разобрался, оказывается причина была в том, что дополнительный плагин — Phyton Script, который нужен для работы Эммета — он либо кривой, либо что-то еще. так вот

Если у вас не работает Emmet

то качайте вот эту версию тут — просто скачайте и установите как программу и все заработает..Урааааааааа.

Настройка Emmet в notepad++

Для настройки нам нужно сделать лишь два действия:

  1. Заходим сюда «опции->горячие клавиши->Plugin commands» — видим первое Expand Abbreviation — это как раз главная клавиша, вернее сочетание клавиш, нажав их и происходит превращение. Например: набрали div затем нажали это сочетание и вуаля, вот вам и открывающийся и закрывающийся тег. Там по умолчанию стоит сочетание ctrl+alt+enter но оно у многих не работает, да и говорят не удобно, поэтому два раза щелкнув меняем на Alt+Z.
  2. Далее видим Wrap with Abbreviation — это быстрая вставка кода в текст, удобная оказывается штука. Тут меняем на Alt+ctrl+Z,

Примеры

1. Для простой команды Alt+Z я уже показал, весь список смотрите тут — горячие клавиши Emmet

2. Для Wrap with Abbreviation:

Наберите или скопируйте это:

Главная
Продукты
О нас
Контакты

Далее нажмите Alt+ctrl+Z и всплывет окно и в него вставьте это ul>li*>a и вы увидите волшебство и вы увидите это:

Более новые статьи:

«>Крякозябры в notepad++ достали решение проблем с кодировкой — 16/08/2016 08:50
Если не подключается phpStorm + MySQL на вашем компьютере — «локально», тупость, конечно, но бился 30 минут над решением, а оно под носом) и нигде инф …

«>Если не подключается phpStorm + MySQL на вашем компьютере — 04/07/2016 08:01
В notepad++ я долго искал как же мне выставлять пробелы или tab перед строками, прям уже так раздражало, что в sublime это с emmet сразу идет, а тут э …

Более старые статьи:

«>Emmet горячие клавиши — краткие команды — шпаргалка
Так может случиться, что В emmet не работает Tab у редактора Sublime text, и я тоже кучу всего перерыл в интернете, но не нашел. сделал сам. …

«>В emmet не работает Tab — Sublime text
Редактор Sublime text 3 — является прогрессивным решением в сфере редактирования кода. если вы профессионально занимаетесь сайтами, то он вам просто …

источник

Установка редактора Notepad++ и плагинов к нему

В компьютере имеется большое количество текстовой информации. Это не только привычные всем файлы с расширением .txt называемые текстовыми это и огромное количество других файлов с самыми разными расширениями. Например файлы с расширением .ini, .log, .bat, .xml, .php, .html и огромное множество других в том числе и без расширения, как например файл hosts являются по сути своей тактовыми, так как хранят информацию в виде текста отформатированного определенным образом.

Значит их можно просматривать и редактировать текстовым редактором, таким как встроенный в Windows Блокнот. Проблема в том, что стандартный Блокнот имеет довольно скромные возможности в нем порой неудобно даже просто просматривать текстовый файл, не говоря уже редактировании конфигурационных файлов или программировании. Поэтому появились редакторы от сторонних разработчиков предлагающие более широкие возможности. Одним из таких редакторов является Notepad++ о котором мы сейчас и поговорим.

Чем же он лучше обычного Блокнота? Он поддерживает вкладки, имеет подсветку синтаксиса разных форматов файлов, настраиваемый внешний вид самого редактора, переносить автоматически строки не умещающиеся по ширине окна редактора, работать с разными кодировками, выполнять множество операций с текстом, выполнять поиск и/или замену, создавать макросы и так далее.

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

Читайте также:  Установка защита картера 2110 усиленная

Установка Notepad++

Хорошая новость, что он является полностью бесплатным и имеет в том числе русский интерфейс, поэтому идем на официальный сайт и скачиваем последнюю версию редактора в соответствии с разрядностью вашей Windows. Стоит иметь в виду, что для версии x32 доступно больше плагинов, так как не все плагины для Notepad++ доступны в 64 битном варианте.

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

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

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

Раньше в Notepad++ был менеджер плагинов, потом его убрали из программы, а недавно снова добавили, теперь он называется Plugins Admin. Поэтому в верхнем меню нажимаем «Плагины» ⇒ «Управление плагинами» и открывается следующее окно.

В нем на вкладке «Доступные» содержится список плагинов, которые можно установить, отметив нужный галочкой и нажав кнопку «Установить». На вкладке «Обновления» можно обновить уже установленные плагины, а на вкладке «Удаление» соответственно удалить ненужные.

Проблема в том, что плагин Emmet отсутствует среди доступных для установки. Дело в том, что там присутствуют не все существующие плагины, а только часть. Поэтому нам придется устанавливать его вручную, что тоже совсем не сложно. Поскольку для работы Emmet требуется Python Script для Notepad++, то сначала установим соответствующий плагин. Идем на страницу плагина и нажимаем ссылку «Download the MSI» после чего через 5 секунд загрузка должна начаться автоматически. Запускаем скачанный файл и выполняем установку.

Теперь займемся установкой самого Emmet. Переходим по ссылке и загружаем на компьютер файл emmet-npp.zip распаковываем его и сохраняем содержимое в папку plugins расположенную в директории куда установлен Notepad++. Теперь запускаем редактор, нажимаем в меню на «Плагины» и видим, что в списке присутствуют только штатные плагины. Почему установленные плагины не работают?

Не работают плагины в Notepad++

Дело в том, что в версии редактора 7.6 был не только возвращен менеджер плагинов, но и внесены изменения в месторасположение пользовательских плагинов и они должны располагаться в AppData\Local. Поэтому плагин Emmet и не работает. Однако не спешите что-то менять, дело в том, что уже в версии 7.6.1 местоположение снова изменилось на папку ProgramData.

Вы не поверите, но на этом чехарда не закончилась, поскольку уже в версии 7.6.3 разработчики очень извиняясь сообщили, что папка снова изменилась, в этот раз на %ProgramFiles%\Notepad++\plugins и обещали больше ее не менять без крайней необходимости. Фактически все вернулось так, как и было в ветке 7.5.x, но ведь Python Script и Emmet у нас не запускаются.

Так как установить плагин Emmet в Notepad++ 7.6.3? Разница в том, что теперь все файлы плагина должны располагаться внутри папки с одноименным названием, а у нас dll расположены просто в папке plugins. Поэтому перемещаем PythonScript.dll в папку PythonScript, а EmmetNPP.dll в папку EmmetNPP. Запускаем Notepad++ и видим наши плагины в списке установленных. Таким образом, если после обновления на 7.6.x у вас перестали работать установленные ранее плагины, вы знаете как это можно легко исправить.

Осталось сделать последних шаг, чтобы можно было нормально пользоваться плагином Emmet в Notepad++. Нажимаем в меню «Опции» ⇒ «Горячие клавиши» и открывшемся окне переходим на вкладку «Plugin commands» где видим две строчки выделенные красным.

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

Редактор Notepad++ является мощным инструментом с большими возможностями, а при соответствующих навыках можно расширять его функциональность под собственные нужды. Попробовав его в деле, вы уже никогда не вернетесь к стандартному Блокноту, разве что перейдете на какой-нибудь другой редактор, вроде Sublime Text.

источник