… Как сказано через 7 этапов Винса МакМэхона.
Вам нравится писать HTML? Возможно нет. Написание HTML не похоже на программирование. Кажется, меньше решения проблем и больше редактирования. Вы тратите большую часть своего времени на создание отступов, закрытие тегов, обертывание блоков HTML в div, отступы, отступы и другие отступы.
Итак, что, если бы я сказал вам, что могу вдвое сократить время, которое вы тратите на написание HTML? Потратьте половину времени, которое вы потратили бы на написание HTML с сегодняшнего дня и до конца своей жизни, и верните его в свои руки, чтобы вы могли делать то, что хотите?
Знакомьтесь, Emmet - плагин, который значительно улучшает рабочий процесс HTML и CSS.
Давайте рассмотрим, что умеет Эммет:
Этап 1
Автозаполнение тегов: введите тег и нажмите вкладку
Вероятно, сейчас вы не впечатлены. Но подождите - это еще не все.
Этап 2
Вставьте имена идентификаторов с помощью оператора #. Вставьте имена классов, используя расширение. оператор.
Вставьте внутренний текст, используя фигурные скобки.
Я привлек ваше внимание?
3 этап
Вставляйте настраиваемые атрибуты и значения, используя квадратные скобки.
Разместите детей с помощью оператора ›.
Вставьте братьев и сестер с помощью оператора +.
А теперь мы говорим, амирит?
4 этап
Умножайте узлы с помощью оператора *.
Вы можете группировать с помощью скобок и умножать сами группы.
Ага, верно.
5 этап
Пронумеруйте элементы с помощью оператора $.
Вы можете проявить изобретательность с оператором $. Ниже я создаю теги h1, h2, h3 и h4, прикрепляю к каждому из них myclass1, myclass2, myclass3 и myclass4 и вставляю внутренний текст заголовка 1, заголовка 2, заголовка 3 и заголовка 4.
Ах, да.
6 этап
Наконец, оберните любой блок текста, нажав CTRL + W, подняв поле обтекания с аббревиатурой и введя любую комбинацию команд emmet, которую вы хотите.
Вы можете легко обернуть блок HTML таким div. Я добавляю идентификатор на всякий случай.
Зная, что вам больше никогда не придется делать отступ, чтобы обернуть HTML в div.
7 этап
Собираем все вместе. Посмотрите на весь HTML, который я могу написать с помощью Эммета. Без отступов и без суеты.
Видеть значит верить.
Заключение
Emmet - мощный инструмент, который может избавить вас от утомительной задачи редактирования HTML. Он может даже использовать CSS, который здесь не рассматривается.
Если вам интересно, посетите их официальный сайт ниже, где вы можете сделать пожертвование команде. Я также добавил ссылку на шпаргалку, где вы можете увидеть, что еще умеет Эммет.
Ссылки:
- Официальный сайт Emmet
- Официальная шпаргалка по Эммету
