Автоматизация кода в 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 наконец заработал.
Плагин Emmet предусматривает не просто возможность вывода кода по определенным сокращениям, но и возможность их комбинации с помощью селекторов. Так например сокращение вида table>(cap)>tr>th*5^tr*10>td*5, выведет код таблицы с пятью столбцами и дестью строками.
Ниже приведены селекторы в Emmet с помощью которых вы сможете модернизировать свои записи.
Большая часть примеров применения сокращений и селекторов, находится на странице примеры использования плагина Emmet. Список там очень большой, и как говорится на все случаи жизни.
Селекторы в Emmet
| Селектор | Описание |
|---|---|
| # | создает атрибут id |
| . | создает атрибут class |
| [ ] | создает любые другие атрибуты |
| > | переход на один уровень ниже |
| + | создает соседние элементы на том же уровне |
| ^ | делает переход на уровень вверх |
| * | умножает элементы |
| $ | заменяется числом, увеличивающимся на единицу |
| $$ | то же самое, что и в п. 09 - только двухзначное |
| { } | добавляет текстовое содержимое элементам |
| ( ) | группирует элементы |
| : | для элементов таких как <input>, <a>, <link> и др. - задает атрибуты |
Примеры комбинации сокращений и селекторов Emmet
Как уже говорилось выше, большая часть примеров находится на отдельной странице, здесь же приведены примеры комбинации сокращений и селекторов Emmet.
-
Таблица с классом ABCD, включая название и шапку, с семью столбцами и тремя строками. В строки и столбцы добавлена нумерация.
Пример 2
Набираем: table.ABCD>(cap)>tr>th{$}*7^tr*3>td{$}+td*6 Получаем: <table class="ABCD"> <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> -
Часто при верстке требуется набор слов, чтобы просто заполнить блоки текстом для визуального представления страницы, при этом смысл текста абсолютно не важен, так называемая "рыба".
C Emmet сделать это легко и просто, для этого нужно набрать слово Lorem и указать необходимое количество слов.
Пример 3
Набираем: Lorem10 Получаем: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, nesciunt.
Изменение «горячих» клавиш развертывания сокращений
Стандартное сочетаний клавиш развертывания сокращений, мне показалось не очень удобным, поэтому оно было изменено (см. рисунок 1).
.png)
Тем более, что это занимает минимум усилий и времени.
- Идем в Меню - Опции - Горячие клавиши
- В открывшемся окне переключаемся на вкладку «Plugin commands» и ищем там строку «Expand abbreviations», кликаем по ней мышью, и в новом окне устанавливаем нужное (см. рисунок 2).
.png)