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

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

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

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


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


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


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


Окно настройки можно закрыть. После этого переходим во вкладку «Вид» и кликаем по пункту «Перенос строк». Увеличиваем размер шрифта с помощью клавиш Ctrl и + (на цифровой клавиатуре) до приемлемого. (Чтобы уменьшить – Ctrl и -). На этом настройку Notepad++ можно закончить.

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>. Интересно, правда? Если блок 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 код каркаса трехколоночной страницы. Осталось добавить стили и все.
<html>
<head>
  
  
</head>
<body>
  
</body> <html>
При написании CSS свойств все еще проще. В основном, за некоторыми исключениями, сокращение свойств производится по первым буквам. Например: m – margin, ml – margin-left, p – padding, fw - font-weight и так далее. Заходим на сайт разработчика и смотрим там. Но лучше всего запоминается, когда пробуешь сам и записываешь на бумажке.
Если Вам нужен заполняющий текст, так называемая «рыба», то просто набираете lorem запускаете экспанд и все.
Теперь коротко об «Wrap with abbreviation». Это не что иное, как обертка. К примеру, Вы хотите обернуть текст в тег параграфа. Для этого выделяете текст и запускаете врап. Горячие клавиши для него Вы уже назначили. В результате появится окно в котором и нужно прописать р. Или, к примеру, div>p и тогда параграф будет внутри контейнера.
На этом, пожалуй пора заканчивать.
До следующих постов.



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


Скачать видео.

33 комментария :

  1. Здравствуйте! Подскажите пожалуйста , что нужно исправить, если в опции Запуск нет строки "launch Firefox".
    Спасибо.

    ОтветитьУдалить
    Ответы
    1. Нажимаем F5 или вкладка "Запуск" пункт "Запуск...". Вводим в поле ввода: firefox "$(FULL_CURRENT_PATH)" и нажимаем "Сохранить...". Затем вводим имя для команды, например "Launch in Firefox" задаем комбинацию горячих клавиш и жмем "Ok". Все.
      Подробнее записал на видео: http://youtu.be/N_eVFp7_pc0

      Удалить
    2. Здравствуйте, Виктор,подскажите как установить сохранение по умолчанию с заданным расширением?К теме это не относится, но не могу найти инфу...переустановил notepad и теперь не помню где эти настройки. Заранее спасибо

      Удалить
  2. Добрый день, сделал как вы написали, но почему то при нажатии експанд вылетает окно "Unknown exception"

    ОтветитьУдалить
    Ответы
    1. и еще одно окно "Питон скрипт плагин did not accept the script"

      Удалить
    2. Новую версию питона надо ручками установитиь...

      Удалить
  3. "Новую версию питона надо ручками установитиь..." - а как это сделать?

    ОтветитьУдалить
    Ответы
    1. В папке Notepad++\plugins удалить PythonScript.dll.
      Скачать файл PythonScript_1.0.8.0.msi и установить его
      http://sourceforge.net/projects/npppythonscript/files/?source=navbar

      Удалить
  4. Анонимный12 июля 2015 г., 02:32

    Есть большой CSS файл и Емет очень медленно думает, если писать в конце страницы, это можно как то исправить ?

    ОтветитьУдалить
    Ответы
    1. К сожалению, нет. И не только в Notepad++ но и в SublimeText плагин здорово глючит на больших файлах. Я писал разработчикам, но пока тишина.

      Удалить
    2. Анонимный13 июля 2015 г., 06:46

      Просто сделали бы чтобы обрабатывалась не вся страница, а строка или настраиваемое количество строк от курсора, не уже ли так сложно)

      Удалить
  5. Этот комментарий был удален автором.

    ОтветитьУдалить
  6. В последних версиях почему-то по умолчанию отсутствует plugin manager, так что для установки плагинов придется предварительно его тоже скачать и установить. Зачем такой геморой придумали - не понятно

    ОтветитьУдалить
  7. Я думаю, в статью надо обязательно добавить, что для корректной установки плагина Emmet нужно установить (либо проверить на наличие) последнюю версию плагина Phyton Script (сейчас 1.0.8.0).

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Записывал видео давно. Сейчас попробовал поставить новую версию NPP++ и даже с установкой питона не смог установить emmet. Чего-то разработчики намудрили. Скачал свою старую версию. И все прекрасно. И ни чем не отличается от новых версий.

      Удалить
  8. Есть две реализации Notepad++: 32bit'ная и 64bit'ная
    Если отсутствует Plugin Manager - установлена 64bit'ная версия,
    для которой мало 64bit'ных плагинов.
    Удаляете 64bit'ную версию Notepad++, вместо нее устанваливаете 32bit'ную
    и получаете и Plugin Manager и все плагины к которым привыкли.
    Ну и наслаждаетесь конечно.

    ОтветитьУдалить
  9. Я для Emmet-а использую и очень рекомендую Codelobster

    ОтветитьУдалить
  10. В новой версии Notepad++ 7.5.4 плагин "Plugin Manager" не существует (((

    ОтветитьУдалить
  11. Подскажите, как в Notepad++ реализован автокомплит, т.е функция,когда я,например, в ссылку хочу включить что-либо из папки сайта (gla документ, картинку и т.д) или подключить файл стилей и мне предлагается список файлов из папу по выбранному файлу клац и всё,не нужно искать путь к файлу. В саблайме это легко решалось, а в Notepad++ почему-то я такой настройки или плагина найти не могу.
    Заранее благодарю!

    ОтветитьУдалить
    Ответы
    1. Вероятнее всего никак. Поэтому я много лет и использую для профессиональной работы sublime text. А если бэкэнд то phpstorm. Notepad++ хорош для начального обучения.

      Удалить
  12. Этот комментарий был удален автором.

    ОтветитьУдалить
  13. У меня отсутствует вкладка plugin manager?

    ОтветитьУдалить
    Ответы
    1. https://github.com/bruderstein/nppPluginManager/releases - устанавливай вручную (из папки plugins в соответствующую папку распаковываешь библиотеку).

      Удалить
  14. Помогите чайнику. Установил новую версии Notepad++ 7.5.4 32bit, плагин "Plugin Manager", подключил плагин Emmet и Payton Script.
    После тестового ввода и нажатия Expand Abbreviation выдал ошибку Access Vialation. В чем может быть проблема?

    ОтветитьУдалить
  15. hellllllllllllllllllllllllllllllllo worllllllllllllllllllllllllllld18 февраля 2018 г., 01:48

    wedfdef

    ОтветитьУдалить
  16. Очень нравится Notepad++, но сегодня - прочитав Ваш блог - полюбил его ещё больше! Единственное, не могу понять: как создавать в нём scss файлы и писать кода на препроцессоре. И ещё: как сделать, чтобы при изменении открывающего тега автоматически заменялся на соответствующий ему закрывающий? Спасибо!

    ОтветитьУдалить
    Ответы
    1. https://github.com/marvinlabs/notepad-plus-plus-scss-syntax-highlighting
      https://github.com/mean-cj/notepad-plus-plus-SCSS-Syntax-Highlighting-PlasticCodeWrap-Style

      Удалить
    2. В версии Х64 нет много плагинов, где можно до качать?

      Удалить
    3. Нигде. Ставьте версию Х32

      Удалить
  17. Очень не хочется на sublime переходить, но уже много часов пытаюсь установить emmet...поставил 32бит, установил python script, установил emmet. В списке плагинов ничего не появляется....

    В admin plugin в списке нашел Zen Coding, установил, при экспанде пишет "Not found python script"...ЧТО НЕ ТАК? Подскажите пожалуйста

    ОтветитьУдалить

Ваш комментарий: