Ускоренная верстка в Notepad++ при помощи плагина Emmet

Удобный плагин который поможет быстрее и легче вводить код HTML, CSS. Основная идея этого плагина, по крайней мере как это понял я, это на основе сокращений вводить различные куски кода.

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

Пробуем работает плагин или нет, для этого просто ставим точку и нажимаем набор клавиш Ctrl+Alt+Enter, если появился код <div class=""></div>, то на этом установка закончена, плагин работает.

Если нет, то открываем поиск и ищем статьи про установку, они есть, но там так сумбурно написано, по крайней мере, я не нашел ничего четкого и понятно.

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

Ну вот собственно и всё, ниже указаны селекторы, комбинируя которые, можно быстро строить достаточно большие куски кода.

Селекторы в Emmet

Селектор Описание
# создает атрибут id
. создает атрибут class
[ ] создает любые другие атрибуты
> переход на один уровень ниже
+ создает соседние элементы на том же уровне
^ делает переход на уровень вверх
* умножает элементы
$ заменяется числом, увеличивающимся на единицу
$$ то же самое, что и в п. 09 - только двухзначное
{ } добавляет текстовое содержимое элементам
( ) группирует элементы
: для элементов, таких как <input>, <a>, <link> и др., - задает для них атрибуты

Большая часть примеров применения селекторов, находится на странице - примеры использования плагина Emmet.

Приведу лишь несколько примеров для наглядности, итак, начинаем верстку новой страницы если вам необходима первоначальная разметка, то при установленном плагине, достаточно набрать лишь !

<!-- Набираем: -->
!
<!-- Получаем: -->
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

Часто при верстке требуется набор слов, чтобы просто заполнить блоки текстом для визуального представления страницы, при этом смысл текста абсолютно не важен, так называемая "рыба". Сделать это можно легко и просто, для этого достаточно набрать слово Lorem и указать необходимое количество слов.

<!-- Набираем: -->
Lorem10
<!-- Получаем: -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, veritatis?
<!-- Набираем: -->
Lorem50
<!-- Получаем: -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laborum, officiis,
veritatis praesentium qui iusto animi at eos debitis beatae hic provident 
laudantium eius voluptates officia! Voluptas, odit, architecto hic quibusdam 
saepe incidunt beatae sed sapiente atque magnam ab ipsam harum corporis 
adipisci possimus impedit animi. Odio at voluptates facilis.

Вот такая короткая запись table>tr>th*3^tr*12>td.tbA{$}+td.tbB+td.tbCC, позволяет создать довольно большую таблицу в один клик.

Как уже говорилось выше, более полное, но общее применение селекторов приведено на отдельной странице. Этот же набор, показывает, как с помощью комбинации селекторов можно строить различные конструкции кода.

<!-- Набираем: -->
table>tr>th*3^tr*12>td.tbA{$}+td.tbB+td.tbCC
<!-- Получаем: -->
<table>
	<tr>
		<th></th>
		<th></th>
		<th></th>
	</tr>
	<tr>
		<td class="tbA">1</td>
		<td class="tbB"></td>
		<td class="tbCC"></td>
	</tr>
	<tr>
		<td class="tbA">2</td>
		<td class="tbB"></td>
		<td class="tbCC"></td>
	</tr>
	<tr>
		<td class="tbA">3</td>
		<td class="tbB"></td>
		<td class="tbCC"></td>
	</tr>
	<tr>
		<td class="tbA">4</td>
		<td class="tbB"></td>
		<td class="tbCC"></td>
	</tr>
	<tr>
		<td class="tbA">5</td>
		<td class="tbB"></td>
		<td class="tbCC"></td>
	</tr>
	<tr>
		<td class="tbA">6</td>
		<td class="tbB"></td>
		<td class="tbCC"></td>
	</tr>
	<tr>
		<td class="tbA">7</td>
		<td class="tbB"></td>
		<td class="tbCC"></td>
	</tr>
	<tr>
		<td class="tbA">8</td>
		<td class="tbB"></td>
		<td class="tbCC"></td>
	</tr>
	<tr>
		<td class="tbA">9</td>
		<td class="tbB"></td>
		<td class="tbCC"></td>
	</tr>
	<tr>
		<td class="tbA">10</td>
		<td class="tbB"></td>
		<td class="tbCC"></td>
	</tr>
	<tr>
		<td class="tbA">11</td>
		<td class="tbB"></td>
		<td class="tbCC"></td>
	</tr>
	<tr>
		<td class="tbA">12</td>
		<td class="tbB"></td>
		<td class="tbCC"></td>
	</tr>
</table>