Попрощаемся с Zen Codding. Приветствуем Emmet!

Попрощаемся с Zen Codding. Приветствуем Emmet!

В 2009 году, появился новый способ написания HTML и CSS кода. Этот революционный плагин, назывался Zen Coding. Инструмент, несколько лет помогавший веб разработчикам в написании кода, теперь вышел на новый уровень.

Emmet , ранее известный как Zen Coding, является самым производительным и экономящим время плагином для текстового редактора который вам приходилось видеть. По мгновенно расширяющемся простым сокращениям в сложные фрагменты кода, Emmet может превратить вас в более продуктивного разработчика.

Для тех кто любит больше смотреть чем читать. Язык английский, но из самого видео и так всё ясно.

Как это работает?

Посмотрим правде в глаза: написание HTML-кода требует большого количества времени, написание всех,тегов, атрибутов, кавычек, скобок и т.д. Конечно, в большинство текстовых редакторов есть функция авто завершения, которая здорово помогает, но все равно приходится много печатать. Emmet мгновенно расширяется, из простого сокращения в сложные фрагменты кода.

HTML сокращения

ИНИЦИАЛИЗАЦИЯ

Начало работы с новым документом HTML, занимает меньше секунды. Просто набираем ! или HTML: 5 , нажимаем «Tab», и видим, тип документа HTML 5.
Emmet Demonstration - Initialize

КЛАССЫ, ИДЕНТИФИКАТОРЫ, ТЕКСТЫ И АТРИБУТЫ

Поскольку синтаксис Emmet для описания элементов похож на CSS селекторы, привыкнуть к нему очень легко. Попробуйте совместить имя элемента (например, р ) с идентификатором (например, p#description ).
Emmet Demonstration - Classes and IDs
Кроме того, вы можете комбинировать классы и идентификаторы. Например, p.bar#Foo выведет:

<p class="bar" id="foo"></p>

Теперь давайте посмотрим, как определить содержание и атрибуты для HTML элементов. Фигурные скобки используются для содержания. Таким образом, h1{FOO} будет воспроизводиться следующим образом:

<h1>foo</h1>

А квадратные скобки используются для атрибутов. Таким образом, a[href=#] сгенерирует:

<a href="#"></a>

Emmet Demonstration - Attributes and Texts

ВЛОЖЕННОСТЬ

По вложенности сокращений, вы можете построить целую страницу, используя всего одну строку кода.
Во-первых, дочерний оператор, представленный как > , позволяет вкладывать элементы один в другой. А брат оператор, представленный как + , позволяет размещать элементы рядом друг с другом, на том же уровне. Наконец, новый оператор, представленный как ^ , позволяет подняться на один уровень вверх в дереве.
Emmet Demonstration - Nesting

ГРУППИРОВАННИЕ

Чтобы, эффективно использовать вложения, не превращая их в запутанный беспорядок операторов, вам нужно сгруппировать несколько кусков кода. Это как математика — нужно просто использовать скобки вокруг определенных частей. Например, (.foo>h1)+(.bar>h2) будет выводить следующее:

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

Emmet Demonstration - Grouping

НЕЯВНЫЕ ИМЕНА ТЕГОВ

Чтобы объявить тег с каким-либо классом, просто введите div.item , что сгенерирует <div class="item"> </ div>.
В прошлом, вы могли бы пропустить имя тега div , просто нужно было ввести .item , это бы сгенерировало <div class="item"></ div> .
Теперь Emmet стал деликатнее. Он учитывает название родительского тега каждый раз, когда вы расширяете аббревиатуру с неявным именем. Так что, если вы объявляете .item внутри <ul> , он будет генерировать <li class="item"> </ li> вместо <div class="item"> </ div> .
Emmet Demonstration - Implicit tag names

Вот список всех неявных имен тегов:

  • li для ul и ol
  • tr для table, tbody, thead и tfoot
  • td для tr
  • option для select и optgroup

УМНОЖЕНИЕ

Вы можете предопределить, сколько раз элемент должен быть выведен с помощью оператора *. Таким образом, ul>li*3 будет выводить:
Emmet Demonstration - Multiplication

НУМЕРАЦИЯ

Как насчет смешивания функции умножении с нумерацией элементов? Просто поместите оператор $ возле имени элемента, имя атрибута или значение атрибута для вывода числа в настоящее время повторяющихся элементов. Если вы напишете ul>li.item$*3 , у вас получится:
Emmet Demonstration - Numbering

ЖИВОЙ ПРИМЕР

Попробуем написать что то более существенное, например так:
!>#wrapper>((.header>(#logo+#nav>(ul>li>a*5)))>#mainContent>(.content+.sidebar))+.footer .
Я согласен что может по началу это выглядит немного пугающе, но на самом деле тут нет ничего сложного и стоит только немного вникнуть и всё станет ясно.
В итоге наш пример написанный в течение 10-15 секунд, выведет готовый каркас простенького сайта:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="wrapper">
		<div class="header">
			<div id="logo"></div>
			<div id="nav">
				<ul>
					<li>
						<a href=""></a>
						<a href=""></a>
						<a href=""></a>
						<a href=""></a>
						<a href=""></a>
					</li>
				</ul>
			</div>
		</div>
		<div id="mainContent">
			<div class="content"></div>
			<div class="sidebar"></div>
		</div>
		<div class="footer"></div>
	</div>
</body>
</html>

ПОРА ПОПРОБОВАТЬ!

Почему бы не попробовать прямо сейчас? Всё что надо сделать, это написать аббревиатуру HTML в следующем поле и нажать клавишу Tab .

CSS сокращения

Emmet позволяет упростить написание не только HTML, но и CSS.
Допустим, вы хотите определить ширину. Пишем w100 , и она будет cгенерирована:
Emmet Demonstration - Values

ДОПОЛНИТЕЛЬНЫЕ ОПЕРАТОРЫ

Простая запись @F выведет:

@font-face {
  font-family:;
  src:url();
}

Некоторые свойства, такие как background-image, border-radius, font, @font-face, text-outline, text-shadow — имеют дополнительные опции, которые можно активировать с помощью знака +. Например, @F+ выведет:

@font-face {
  font-family: 'FontName';
  src: url('/other/FileName.eot');
  src: url('/other/FileName.eot?#iefix') format('embedded-opentype'),
     url('/other/FileName.woff') format('woff'),
     url('/other/FileName.ttf') format('truetype'),
     url('/other/FileName.svg#FontName') format('svg');
  font-style: normal;
  font-weight: normal;
}

Emmet Demonstration - Extra operator

НЕЧЕТКИЙ ПОИСК

Emmet использует нечеткий (автоматический) поиск, чтобы найти неизвестные аббревиатуры. Таким образом, каждый раз, когда вы вводите неизвестные аббревиатуры, Emmet будет пытаться найти самое схожее определение. Например, ov:h, ov-h, ovh и oh будет генерировать то же самое:

overflow: hidden;

Emmet Demonstration - Fuzzy Search

ПРЕФИКСЫ

CSS3 является удивительным инструментом, но все эти префиксы являются настоящей головной болью для всех нас. Ну, теперь это в прошлом — Emmet имеет сокращения для них тоже. Например, trs будет расширяться до:
Emmet Demonstration - Vendor Prefixes

Вы также можете добавить префикс к любому элементу. Вам просто нужно использовать префикс - . Таким образом, -super-foo будет расширяться до:

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

Что делать, если вы не хотите использовать все эти префиксы? Это не проблема. Вы можете определить, только те которые хотите использовать.
-wm-trf выведет:

-webkit-transform: ;
-moz-transform: ;
transform: ;
  • w-webkit-
  • m-moz-
  • s-ms-
  • o-o-

ГРАДИЕНТЫ

Говоря о функциях CSS3, мы не можем обойти стороной градиенты. Те длинные определения с разными обозначениями теперь могут быть легко заменены краткими аббревиатурами. lg(left, #fff 50%, #000) , и на выходе будет:

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

Emmet Demonstration - Gradients

ПОРА ПОПРОБОВАТЬ!

Напишите аббревиатуру CSS в следующем поле и нажмите клавишу Tab .

ДОПОЛНИТЕЛЬНЫЕ ОПЦИИ

Забудьте о тех сторонних сервисах, которые генерируют «Lorem Ipsum» текст. Теперь вы можете сделать это прямо в редакторе. Просто используйте сокращения Lorem или Lipsum. И укажите, сколько слов вам надо сгенерировать. lorem10 выведет:
Emmet Demonstration - Lorem Ipsum
Кроме того, Lorem может быть соединен с другими элементами. Таким образом, p*3>lorem5 будет генерировать:

<p>Lorem ipsum dolor sit amet.</p>
<p>Voluptates esse aliquam asperiores sunt.</p>
<p>Fugiat eaque laudantium explicabo omnis!</p>

НАСТРОЙКА

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

  • Чтобы добавить свои собственные или обновить существующие фрагменты кода, надо редактировать файл snippets.json .
  • Чтобы изменить поведение фильтров и действия, попробуйте отредактировать preferences.json .
  • Чтобы определить, как генерируется HTML или XML код, редактируйте файл syntaxProfiles.json .

И МНОГОЕ ДРУГОЕ!

Это только начало. В Emmet есть много других интересных функций, таких как кодирование и декодирование изображений данных: URL , обновления размеров изображений и увеличения и уменьшения цифровых значений .

Официальный веб-сайт , также документация и удобная шпаргалка !

ПОДДЕРЖИВАЕМЫЕ РЕДАКТОРЫ

Лично для меня Zen Coding был большим открытием и быстро стал незаменимым инструментом. Приятно что проект развивается.
Если вы уже используете Zen Coding или Emmet, делитесь своими любимыми трюками.


comments powered by Disqus
Subscribe to RSS Feed Следить в Twitter