emmet

Плагин 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>
Любой тег

Больше сокращений смотрите в [mask_link href=»https://docs.emmet.io/cheat-sheet/» target=»_blank»]оф. документации[/mask_link].

[mask_link href=»https://docs.emmet.io/cheatsheet-a5.pdf» target=»_blank»]Скачать emmet шпаргалку в формате pdf[/mask_link]

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

Автор

Алексей

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Exit mobile version
Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами.