Молниеносная верстка при помощи плагина "Emmet"
СайтоделВ этом уроке я продемонстрирую тебе как установить плагин "Emmet" в редакторе "Sublime Text 3", а так же основы его применения.
Этот плагин многократно увеличивает продуктивность написания кода за счет преобразования простых аббревиатур хештегов в полноценные куски.
Установка плагина
Для этого находясь в окне редактора нажми сочетание клавиш CTRL + SHIFT + P. В появившемся окне введи "Package Control: Install Package" и кликни на указанный пункт либо клавишу "Enter".
В появившемся окне введи название плагина "Emmet" и аналогичным образом кликни на пункте либо клавишу "Enter" для установки плагина.
Все, плагин установлен и готов к полноценному использованию во всех файлах редактируемых при помощи "Sublime Text 3". Причем даже без перезапуска программы.
Использование плагина
В левом окне файловой системы создай HTML-файл. Например "sitodel.html". Теперь настало время ощутить пользу этого плагина. Введи в файле символ восклицательного знака "!" и нажми кнопку табуляции "Tab".
Символ преобразится в базовый шаблон тегов для HTML страницы. Восклицательный знак является его официальным сокращенным символом. Представь, сколько времени ты сэкономил нажав лишь две кнопки вместо ввода всего блока кода.
Таким образом "Emmet" позволяет писать стандартные HTML-теги при помощи простых аббревиатур. Например, можно создать тег "<a href=""></a>" при помощи простой буквы "a" и табуляции.
А при необходимости указать дочерний элемент, например заголовок "h1" с текстом "Сайтодел", то прописать соответствующий символ ">", после указать "h1" и в фигурных скобках прописать сам заголовок. Например "Сайтодел". В итоге выйдет строка "a>h1{Сайтодел}", которая преобразуется в блок:
<a href="">
<h1>Сайтодел</h1>
</a>
Для примера рассмотрю еще один блок HTML-кода. Между тегами <body> введите указанную строку:
ul>li.item$@-*5
После этого нажми кнопку табуляции "Tab". Строка преобразится в полноценный список из 5 элементов с пронумерованными наименованиями классов:
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
Согласись, что ощутимая экономия в производительности написания кода. Так ты можешь не заморачиваться постоянным прописыванием одних и тех же символов в коде.
Если ты понял в чем преимущество и полезность плагина, то вот тебе отличная шпаргалка по "Emmet". Там продемонстрированы аббревиатуры и блоки кода в которые они преобразовываются.
Более подробная документация представлена на сайте: https://docs.emmet.io/cheat-sheet/. Рекомендую добавить его в закладки и подглядывать во время разработки за полезными аббревиатурами в "Emmet".
Ссылка на канал: https://t.me/sitodel