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

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

<div>
<table>
<tr>
<td></td>
</tr>
</table>
</div>

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

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

<p></p>
<b></b>
<i></i>
<span></span>

Поместить элемент выше: ^. Пример: div>p+span^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 id="style_1"></li>
<li id="style_2"></li>
<li id="style_3"></li>
</ul>

Оставьте комментарий