RUDE

3+ причины, по которым вам необходимо использовать Emmet

CoderStudio, 15.07.2022 12:32
3+ причины, по которым вам необходимо использовать Emmet
Фото kyler trautner на Unsplash

Инструмент быстрого доступа, который должен использовать каждый front-end разработчик

Когда вы работаете с технологиями, позвольте технологиям помогать вам работать.

Emmet - это набор инструментов/плагин для текстовых редакторов, изначально созданный в 2008 году. Его цель в жизни проста - сделать написание кода проще и быстрее. В первую очередь он используется для HTML и CSS, чтобы иметь возможность писать сокращенные блоки кода, которые автоматически расширяются для вас.

Как и в случае с попыткой запомнить целый язык программирования, попытка запомнить весь Emmet была бы немного безумной задачей. К счастью, они создали эту удобную шпаргалку, чтобы помочь вам начать! Хотя здесь есть с чем поиграть, вот мои любимые варианты использования Emmet:

  1. Новые HTML-документы- никому не нравится прописывать все эти doctype и meta-классы в начале обычного HTML-файла. С Emmet, просто набрав ! и нажав клавишу tab, вы создадите все: тег doctype, тег head (включая теги метаданных) и даже тег body!
  2. Быстрая компоновка страницы -компоновка новой страницы часто начинается с довольно простого базового слоя. Если вы хотите быстро разместить все основные элементы блока, Emmet поможет вам в этом! header>nav^main+aside+footer позволит вам быстро и легко создать макет страницы, готовый для CSS Grid или Flexbox. > - гнезда, ^ - перемещение на уровень выше, а + - для родственных тегов!
ярлык header>nav^main+aside+footer в Emmet
ярлык header>nav^main+aside+footer в Emmet

3. Повторяющиеся разделы- Вы когда-нибудь создавали контент и имели один и тот же раздел снова и снова, даже создание навигационных меню является повторяющимся! При использовании Emmet, если вы добавите *X после аббревиатуры, заменив X на число, он будет генерировать этот тег столько раз, сколько указано! Если вы хотите сделать это с целыми разделами сокращенных тегов, вы можете обернуть их круглыми скобками. Для навигационного меню, использующего неупорядоченный список, можно использовать что-то вроде: nav>ul>(li>a[href="#" target="_blank"])*5 , и в итоге вы получите пять пунктов навигации, с тегами якоря, имеющими # href, и все они будут открываться на новой странице. Скобки [] используются для задания атрибутов любого элемента.

nav>ul>(li>a[href="#" target="_blank"])*5
nav>ul>(li>a[href="#" target="_blank"])*5

Итак, это три относительно базовых примера HTML, демонстрирующих возможности Emmet. Большую скорость и удобство можно получить, изучив некоторые аббревиатуры CSS, например, bgc превращается в background-color: #fff. Потренировавшись, вы сможете делать большие фрагменты HTML и CSS еще до того, как закончится приготовление кофе.

Может быть, он и не пытается создавать ваши программы за вас, как GitHub Copilot, но все же это чрезвычайно мощный инструмент для любого front-end разработчика. В паре с другими инструментами, такими как CSS Grid, Flexbox CSS и даже SASS, вы будете собирать мастерские веб-сайты за долю времени.