Плагин Emmet для Sublime Text.
Вы до сих пор пишите теги html и css свойства вручную? Пришло время это исправить! Сегодня мы поговорим о плагине emmet, который поможет нам в этом.
Emmet - это плагин, который позволит вам писать html и css в десятки раз быстрее. Многие уже используют его в своих проектах, но многие о нем еще ничего не знают, и сегодня я попытаюсь исправить это.
Для начала его нужно установить. В Sublime Text, о котором недавно была написана статья, это делается очень просто. Откройте command palette, нажав сочетание клавиш cmd+shift+p, или перейдите в пункт tools и выберите там command palette. Теперь введите "install package" и нажмите enter. Дальше введите "emmet" и снова нажмите enter. После того, как плагин загрузится и установится, перезапустите Sublime Text.
Установка завершена, и теперь мы можем начать пользоваться плагином emmet. Введите
div
А теперь нажмите клавишу tab. В результате этих несложных действий мы получим открывающий и закрывающий тег div, а курсор будет установлен внутри, между ними.
<div></div>
Точно так же можно делать с любыми тегами. Например, давайте создадим ссылку.
a
Теперь нажмите tab, и мы получим следующее
<a href=""></a>
Как видите, emmet добавил атрибут href самостоятельно. Если же вы введете img, то там сразу будут атрибуты src и alt.
Теперь рассмотрим, как добаблять классы и id. Делается это точно так же, как и в css: класс с помощью ., а id с помощью #
.block
В результате получим
<div class="block"></div>
То же самое и с id
#block
Получим следующее
<div id="block"></div>
Заметьте, что я не писал слово div, а просто ставил точку или решетку и писал нужный мне класс или id. Дело в том, что мы можем пропускать название тега и тогда emmet сам будет додумывать, какой же тег поставить. В большинстве случаев это будет div, но, если вы, например, напишите так внутри тега ul, то тег будет li с нужным классом или id.
Если вы хотите сами ввести какой-то атрибут, то напишите его в квадратных скобках
div[data-attribute="value"]
Получим следующее
<div data-attribute="value"></div>
Чтобы вкладывать теги внутри других тегов, нужно использовать знак больше
ul>li>a
Получим следующее
<ul>
<li><a href=""></a></li>
</ul>
С помощью символа * можно указать, сколько таких тегов нам нужно
ul>li*5
Вот, что у нас получится
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Если вам нужно добавить тег на том же уровне, используйте знак +
#container>.left+.right
Результат
<div id="container">
<div class="left"></div>
<div class="right"></div>
</div>
С помощью символа $ мы можем указать, что каждый тег следует нумеровать автоматически
ul>li.item$*5
Результат
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
Если вам нужен ведущий ноль, то напишите знак $ 2 раза, если 2 ведущих нуля, то 3 знака $ и т.д.
Если вы хотите добавить внутри тега текст, то его нужно указать в фигурных скобках
a{Some text}
Результат
<a href="">Some text</a>
Если во время верстки вам нужен какой-то текст, то просто напишите lorem
lorem
Результат
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, mollitia quibusdam voluptatibus fuga dolorem officiis animi error ex ea ipsa excepturi incidunt quis sunt ducimus rerum corrupti obcaecati ipsum quisquam.
Если вам нужно какое-то определенное количество слов, то напишите цифру, обозначающую количество слов после.
lorem3
Результат
Lorem ipsum dolor.
Чтобы создать html структуру, просто напишите знак !
!
Результат
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Теперь поговорим о том, как emmet поможет нам в css
Там достаточно просто написать начальные буквы свойства и значение, а потом нажать tab. Например
m10
В результате получим
margin: 10px;
В некоторых свойствах уже стоят значения по-умолчанию. Например, в свойстве text-align
ta
Результат
text-align: left;
Но вы можете изменить его, просто написав букву значения после сокращения свойства. К примеру, пусть будет по центру.
tac
Результат
text-align: center;
Все рассматривать нет смысла. Документацию по плагину emmet вы можете найти здесь: http://docs.emmet.io/cheat-sheet/
В конце стоит сказать, что если вам по каким-то причинам не нравится клавиша tab, то вы можете поменять ее. Для этого зайдите по следующему пути: Perferences->Package Settings->Emmet->Key Bindings - default. Используйте поиск(cmd+f или перейдите по пути Find->Find) С помощью поиска найдите команду "expand_abbreviation_by_tab". Выше нее, в массиве keys, в кавычках написано "tab". Измените это значение на свое, например, на "ctrl+e". Но это не совсем правильно. Лучше будет, если вы скопируете весь этот объект и вставите его в файл Key Bindings - User, а там уже меняйте сочетание клавиш. Сделано это для того, чтобы если что, вы могли вернуть все настройки по-умолчанию с помощью файла Key Bindings - Default.
Итак, на этом все. Сегодня мы рассмотрели плагин emmet для текстового редактора Sublime Text. Если вы используете другой редактор, то поищите этот плагин для него в интернете. Удачи!
-
Создано 20.05.2014 19:09:59
-
Михаил Русаков
Комментарии (13):
Что то не работает, когда ввожу install package, ничего не происходит.
Ответить
Потому что Package Control сначала нужно установить. Для этого перейдите по ссылке: https://sublime.wbond.net/installation#st2 скопируйте весь код, который там дан слева в окошечке. Затем откройте Sublime Text и перейдите в View, а затем Show Console. У вас откроется консоль и вам следует вставить туда скопированный код. После того, как установка завершится, перезапустите Sublime Text.
Ответить
Спасибо большое помогло.
Ответить
Михаил, здравствуйте! У вас в строчке ошибка. У вас написано так: С помощью символа * можно указать, сколько таких тегов на нужно А надо так: С помощью символа * можно указать, сколько таких тегов нам нужно
Ответить
Кстати, Михаил, сделайте на своём сайте редактор BB кодов. Просто без него не удобно писать комментарии, особенно если текст будет длинным. С уважением, Сергей.
Ответить
У меня установилось без проблем, но не работает!!! в чем соль?
Ответить
Опишите, в чем именно заключается проблема, и напишите, какая у Вас операционная система.
Ответить
у меня windows 7. tab и другие кнопки если менять работают в обычном режиме.
Ответить
Странно это, на самом деле. Вы уверены, что плагин точно установился? Если да, то создайте .html файл, введите "!"(без кавычек) и нажмите tab. Все должно работать из коробки. Возможно, Вам стоит попробовать переустановить плагин, если все равно ничего не работает.
Ответить
все заново скачал и переустановил в 3-й раз, ЗАРАБОТАЛО! СПАСИБО БОЛЬШОЕ! полезная штука)))
Ответить
Вы написали в 9 абзаце добаблять, исправьте)))
Ответить
Да крутая штука, ускоряет процесс написание кода!!! +5
Ответить
уже 2016 на дворе, а у вас все еще : "Теперь рассмотрим, как ДОБАБЛЯТЬ классы и id. Делается это точно так же, как и в css: класс с помощью ., а id с помощью #" :D
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.