Плагин emmet: документация + шпаргалка

emmet Верстка
Emmet (ранее известный как Zen Coding) — это набор плагинов для текстовых редакторов, который значительно упрощает и ускоряет процесс написания кода HTML, XML, XSL и других языков. В этой статье рассмотрим, как Emmet работает, его ключевые функции и какие редакторы поддерживают этот мощный инструмент.

Что такое Emmet?

Emmet — это инструмент, который позволяет вам использовать сокращения для создания сложных структур кода. Он основан на синтаксисе CSS-селекторов и позволяет вам быстро генерировать HTML и CSS код. Например, вы можете ввести ul>li*5 и Emmet автоматически создаст список из пяти элементов.

Установка и поддержка

Emmet доступен для многих популярных редакторов, включая:

  1. Sublime Text: просто установите плагин через менеджер пакетов.
  2. Visual Studio Code: работает из коробки.
  3. Notepad++: emmet также поддерживается в этом редакторе.
  4. Atom;
  5. PHPStorm и WebStorm (работает из коробки);
  6. Прочие редакторы. Смотрите страницу загрузки на официальном сайте, по адресу: https://emmet.io/download/.

Основные функции Emmet

Emmet предлагает множество полезных функций:

  1. Сокращения: Вводите короткие команды, которые разворачиваются в полноценный код. Например, div>ul>li*3 создаст список из трех элементов.
  2. Группировка: Emmet позволяет группировать элементы, что упрощает создание вложенных структур.
  3. Автозавершение: При вводе Emmet автоматически предлагает варианты завершения.

Пример использования

Допустим, вы хотите создать простую HTML-страницу с заголовком, списком и ссылкой. Вот как это можно сделать с помощью Emmet:

  1. Введите ! и нажмите Tab. Emmet создаст базовую структуру HTML-документа.
  2. Введите h1{Заголовок} и нажмите Tab. Это создаст заголовок первого уровня.
  3. Введите ul>li*3>a{Ссылка $} и нажмите Tab. Это создаст список из трех элементов с текстом “Ссылка 1”, “Ссылка 2” и “Ссылка 3”.

В результате должны получить следующее:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>Тестим Emmet</h1>
	<ul>
		<li><a href="">Ссылка 1</a></li>
		<li><a href="">Ссылка 2</a></li>
		<li><a href="">Ссылка 3</a></li>
	</ul>
</body>
</html>

Шпаргалка (сокращения / команды)

Ниже вы увидите справочник сокращений (шпаргалку) EMMET — сборник комбинаций команд или аббревиатур широко известного плагина для ускорения верстки.

HTML сокращения

Сокращение Расшифровка сокращения
!
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
a
<a href=""></a>
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>
area
<area shape="" coords="" href="" alt="Плагин emmet: документация + шпаргалка">
art
<article></article>
audio
<audio src=""></audio>
base
<base href="">
bq
<blockquote></blockquote>
br
<br>
btn
<button></button>
btn:r
<button type="reset"></button>
btn:s
<button type="submit"></button>
c
<!--  -->
cc:ie
<!--[if IE]>
    
<![endif]-->
cc:ie6
<!--[if lte IE 6]>
    
<![endif]-->
cc:noie
<!--[if !IE]><!-->
    
<!--<![endif]-->
dl+
<dl>
    <dt></dt>
    <dd></dd>
</dl>
emb
<embed src="" type="">
form
<form action=""></form>
form:get
<form action="" method="get"></form>
form:post
<form action="" method="post"></form>
fst
<fieldset></fieldset>
ftr
<footer></footer>
hdr
<header></header>
ifr
<iframe src="" frameborder="0"></iframe>
img
<img src="" alt="Плагин emmet: документация + шпаргалка">
inp
<input type="text" name="" id="">
input
<input type="text">
input:b
<input type="button" value="">
input:c
<input type="checkbox" name="" id="">
input:f
<input type="file" name="" id="">
input:h
<input type="hidden" name="">
input:i
<input type="image" src="" alt="Плагин emmet: документация + шпаргалка">
input:p
<input type="password" name="" id="">
input:r
<input type="radio" name="" id="">
input:reset
<input type="reset" value="">
input:s
<input type="submit" value="">
label
<label for=""></label>
link
<link rel="stylesheet" href="">
link:atom
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml">
link:css
<link rel="stylesheet" href="style.css">
link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
link:rss
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
map
<map name=""></map>
map+
<map name="">
    <area shape="" coords="" href="" alt="Плагин emmet: документация + шпаргалка">
</map>
meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7">
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
obj
<object data="" type=""></object>
ol+
<ol>
    <li></li>
</ol>
opt
<option value=""></option>
script:src
<script src=""></script>
sect
<section></section>
select
<select name="" id=""></select>
select+
<select name="" id="">
    <option value=""></option>
</select>
str
<strong></strong>
table+
<table>
    <tr>
        <td></td>
    </tr>
</table>
tarea
<textarea name="" id="" cols="30" rows="10"></textarea>
tr+
<tr>
    <td></td>
</tr>
ul+
<ul>
    <li></li>
</ul>
video
<video src=""></video>
Любой тег

Больше сокращений смотрите в оф. документации.

Скачать emmet шпаргалку в формате pdf

Emmet — это мощный инструмент, который значительно ускоряет процесс разработки веб-сайтов. Попробуйте его и убедитесь сами!

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru
Добавить комментарий