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

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

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

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

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

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

Настройка плагина Emmet редактора Notepad

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

ol>li*5

Нажимаем Ctrl+Enter

Плагин Emmet в действии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Notepad++ ускоряем написание кода – Emmet плагин обновлено: Август 22, 2018 автором: Анатолий Бузов

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

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