Главная » Статьи » Компьютер, Интернет » Notepad++
Плагин Emmet (Zen Coding) для Notepad++

Плагин Emmet (Zen Coding) для Notepad++

Emmet (предыдущее название — Zen Coding) — набор плагинов для различных текстовых редакторов, в том числе и для редактора Notepad++, используемый для быстрого написания HTML и CSS кода. Синтаксис Emmet прост и не требует со стороны пользователя больших усилий для его запоминания, в то же время его использование позволяет ускорить процесс написания кода, ну или облегчить процесс этот, для тех кто никуда не торопится...вот как я например, не верстаю по 555 страниц в день, и в принципе все теги могу и так расставить, но приятно однако процесс это автоматизировать.

Установка осуществляется через менеджер плагинов, выбираем "Emmet" и устанавливаем плагин (в процессе установки программа запросит разрешение на установку скриптов "Python" если не установлены ранее, соглашаемся) и редактор перезапускается автоматически.

Пробуем работает плагин или нет, для этого создаем новый файл, Меню - Файл - Новый и набираем, копируем отсюда ".Emmet" жмем набор клавиш Ctrl+Alt+Enter и ... ничего не происходит... если же вы увидели сразу вот это <div class="Emmet"></div>, поздравляю, следующие два абзаца не для вас, и их можно нужно пропустить.

У меня по крайней мере было так, тогда выделяем ".Emmet" идём в Плагины - Emmet - Expand abbreviation (Ctrl+Alt+Enter) нажимаем и получаем следующее:
<div class="Emmet"></div>.

После этого, я просто поменял "Горячую клавишу". В Меню - Опции - Горячие клавиши ... жмём на кнопку "Plugin Commands" находим в списке Expand abbreviation и устанавливаем то сочетание которое нравится вам, я например поставил Alt+Z, пробуем заново ввести ".Emmet", затем нажимаем, установленную комбинацию "Горячей клавиши", должен получиться результат, как при выделении ".Emmet" и вызова функции из меню Плагины, если всё получилось, значит плагин установлен, "Горячая клавиша" "фунциклирует" можно начинать пробовать "облегчать себе жизнь".

Основные селекторы используемые в Emmet

Таблица 1
№ Селектор Описание
1 # создает атрибут id
2 . создает атрибут class
3 [] создает любые другие атрибуты
4 > переход на один уровень ниже
5 + создает соседние элементы на том же уровне
6 ^ делает переход на уровень вверх
7 * умножает элементы
8 $ заменяется числом, увеличивающимся на единицу
9 $$ то же самое, что и в п. 09 - только двухзначное
10 {} добавляет текстовое содержимое элементам
11 () группирует элементы
12 : для элементов, таких как <input>, <a>, <link> и др., - задает для них атрибуты

Сразу небольшой пример, для того чтобы создать таблицу 1 приведенную выше, я набрал - table>tr>th*3^tr*12>td#tbA{$}+td#tbB+td#tbC

Для наглядности, несмотря на большой кусок (67 строк) ненужного (а может, наоборот нужного) текста, приведу код полученный, после нажатия "Горячей клавиши" ... и сразу становится понятным, подумать, а если часто используешь, то "на автомате" набрать короткую строчку, гораздо удобнее, осталось только в соответствующие ячейки, добавить селекторы, их описание и оформить таблицу с помощью стиля CSS используя добавленные идентификаторы, ну там можно было бы вместо # поставить точку, тогда были бы классы.

<table>
 <tr>
 <th></th>
 <th></th>
 <th></th>
 </tr>
 <tr>
 <td id="tbA">1</td>
 <td id="tbB"></td>
 <td id="tbC"></td>
 </tr>
 <tr>
 <td id="tbA">2</td>
 <td id="tbB"></td>
 <td id="tbC"></td>
 </tr>
 <tr>
 <td id="tbA">3</td>
 <td id="tbB"></td>
 <td id="tbC"></td>
 </tr>
 <tr>
 <td id="tbA">4</td>
 <td id="tbB"></td>
 <td id="tbC"></td>
 </tr>
 <tr>
 <td id="tbA">5</td>
 <td id="tbB"></td>
 <td id="tbC"></td>
 </tr>
 <tr>
 <td id="tbA">6</td>
 <td id="tbB"></td>
 <td id="tbC"></td>
 </tr>
 <tr>
 <td id="tbA">7</td>
 <td id="tbB"></td>
 <td id="tbC"></td>
 </tr>
 <tr>
 <td id="tbA">8</td>
 <td id="tbB"></td>
 <td id="tbC"></td>
 </tr>
 <tr>
 <td id="tbA">9</td>
 <td id="tbB"></td>
 <td id="tbC"></td>
 </tr>
 <tr>
 <td id="tbA">10</td>
 <td id="tbB"></td>
 <td id="tbC"></td>
 </tr>
 <tr>
 <td id="tbA">11</td>
 <td id="tbB"></td>
 <td id="tbC"></td>
 </tr>
 <tr>
 <td id="tbA">12</td>
 <td id="tbB"></td>
 <td id="tbC"></td>
 </tr>
</table>

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

Так же плагин, имеет встроенные шаблоны, ускоряет создание новых страниц, создавая основную разметку, набираем html:5 жмём "Горячую клавишу" ... и получаем результат:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 
</body>
</html>

Удобно, не правда ли, на сём пока откланяюсь, но буду добавлять, примеры использования плагина, возможно кто-то тоже захочет поделится своими примерами, оставляйте комментарии ...

P.S.

Нашел документацию по плагину и "шпаргалку" от "производителя" для него ... все примеры там приведены, в более менее понятном виде, но если кто-то знает, удобные, а главное понятные конструкции, принципы работы, рассказываем в комментариях ...

Категория: Notepad++ | Добавил: Админ (10.01.2013)
Просмотров: 2134 | Теги: Notepad++
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]