Комментарии 23
Отличная шпаргалка. Добавил бы только, что для ввода
<div class="one"></div>
достаточно просто набрать .one, без тега. Это очень удобно, когда набрасываешь каркас HTML.
Он сложнее и все же для другого.
Так же для верстки он и идет. Хранит данные изначально в меньшем виде, все переделки делаются проще. Учить ничего не надо, просто не пишешь html а только html сущности
.header
nav
ul
li ляляля
li ляляля
li ляляля
Мне, лично, Pug не очень нравится по тем же причинам, почему многие предпочитают SCSS вместо SASS.
Хорошая аналогия выше с SASS: всё же это препроцессор, со всеми его плюсами и минусами.
А с Emmet — это просто текстовые макросы, поэтому они никак не нарушают work flow, как работал с чистым HTML, так и работаешь — никаких новых сущностей. Этим и хорош.
Скорее всего тот же препроцессор для css уже подключен в проект и работает. Думаю, дело просто в привычке. Я тоже сопротивлялся, а как попробовал… блин ну удобнее, факт.
Да, разница только в одном -- нужно ли подключать и использовать ещё один препроцессор.
К тому же в SASS я могу сделать всё то же, что в CSS, только больше. А pug хорош для каркасов за счёт того, что он проще html, но тем же и ограничен.
Удобно размножать карточку товара какую нибудь из бд. А верстка компонента то одна.
Уговорили)) попробую, спасибо за идею!
habr.com/ru/company/e-Legion/blog/440134
прямо невероятно минималистично
Ну, не знаю даже. Там такая тонна бойлерплейта к этому нужна… от pug до gulp. И в результате — как они всё же в pug объявляют вот такое?
<ul class="about-achievements list-unstyled row d-none d-sm-flex">
<li class="col-md-6 col-lg-3">
<li class="col-md-6 col-lg-3">
...
придётся руками писать всё то же самое, только учить другой синтаксис? Тогда а) код уже получится совсем не такой чистый и читаемый б) к pug нужен свой Emmet-плагин..
Разница не только в этом, Emmet предназначен для того, чтобы быстро набросать структуру разметки за счёт расширения аббревиатур:
nav>ul>li*4>a[class="link"]{Link $}
→
<nav>
<ul>
<li><a href="" class="link">Link 1</a></li>
<li><a href="" class="link">Link 2</a></li>
<li><a href="" class="link">Link 3</a></li>
<li><a href="" class="link">Link 4</a></li>
</ul>
</nav>
Чтобы добиться такого же результата в Pug, нужно написать цикл и следить за отступами:
nav
ul
- for (var x = 1; x <= 4; x++)
li
a(class='link')= "Link" + x
Pug же, в свою очередь, добавляет такие фичи, как условия, циклы, блоки и прочее. Если создаётся статический сайт или нужен шаблонизатор для какого-нибудь фреймворка, то стоит присмотреться к Pug. Если рассматривать JSX, то тут уже есть условия, циклы и компоненты. Есть плагин, но тут встаёт вопрос о том, насколько он хорошо поддерживается. Я ни разу не встречал Pug в проектах на реакте. Emmet, в этом плане, хорош тем, что не требует написания плагинов babel. Можно создавать свои аббревиатуры и фрагменты для любого языка.
А потерять тег при правке html куда легче.
На реакте, все таки компоненты, а компоненты это не больше 10-100 строчек верстки. Преимущества Pug на таких вещах действительно чувствуются меньше, нет особых проблем чекать закрытие тегов, весь компонент то на экране, да и все удалять и переписывать заново не трудно.
Есть одна архитектурная проблема подобных подходов как у emmet — это бойлерплейт, это чувство избыточности информации, не объясненной технически, кроме как — так проще нашей технологии поэтому пишите избыточно.
Да, emmet скорее язык макросов, извергающий бойлерплейт, pug все таки уже полноценный шаблонизатор c поддержкой es6.
Насколько я знаю, в Pug, если теги имеют одинаковые отступы, то они находяться на одном уровне. Если у второго тега отступ больше, то он вложен в предыдущий. Prettier же не будет угадывать, что Вы имели в виду. Тут он как раз больше поможет с чистым HTML.
Потерять тег при правке HTML конечно можно, но есть различные хоткеи на этот случай.
В чём заключается бойлерплейт, если честно, не понял)
Бойлерплейт — это избыточность, когда языковая конструкция требует меньше символов, зачем та, которая требует больше. Это касается в целом html. Мы точно так же используем в нем отступы, но технически он опирается на закрывающие теги. Нам нужно первое, машине — второе. Так машине же пофиг, пусть использует первое)
Ну тут опять же, на вкус и цвет, по аналогии с SASS/SCSS. Можно использовать сочетание Emmet + Pug.
Чет не заметил ссылки на https://docs.emmet.io/cheat-sheet/
Emmet также хорош для быстрого написания стилей, использую его не только для написания HTML.
А в стилях чаще всего достаточно написать аббревиатуры и нужные значения, например:
jcsb -> justify-content: space-between;
m0-a -> margin: 0 auto;
bgc#fff -> background-color: #ffffff;
и т.д.
Повышение скорости написания кода: Emmet и его использование в VSCode