Повышение скорости написания кода: Emmet и его использование в VSCode

[mSnus]

Отличная шпаргалка. Добавил бы только, что для ввода

<div class="one"></div>

достаточно просто набрать .one, без тега. Это очень удобно, когда набрасываешь каркас HTML.

[nightzen]

Добавил в статью более подробное описание этого момента.

[Alexufo]

Pug же есть

[mSnus]

Он сложнее и все же для другого.

[Alexufo]

Так наоборот проще же!)
Так же для верстки он и идет. Хранит данные изначально в меньшем виде, все переделки делаются проще. Учить ничего не надо, просто не пишешь html а только html сущности

.header
   nav
     ul
        li ляляля
        li ляляля
        li ляляля
 

[nightzen]

Мне, лично, Pug не очень нравится по тем же причинам, почему многие предпочитают SCSS вместо SASS.

[Alexufo]

мне sass тоже не нравится, предпочитаю scss, а pug прям норм.

[mSnus]

Хорошая аналогия выше с SASS: всё же это препроцессор, со всеми его плюсами и минусами.

А с Emmet — это просто текстовые макросы, поэтому они никак не нарушают work flow, как работал с чистым HTML, так и работаешь — никаких новых сущностей. Этим и хорош.

[Alexufo]

Я не сильно верю, что чистый html один правится и это весь уорк флоу. Ну не бывает уже такого в большинстве случаев. Ну маркдаун разве что так может себя вести… ну верстка на бутстрапе чистом если только или подобном.
Скорее всего тот же препроцессор для css уже подключен в проект и работает. Думаю, дело просто в привычке. Я тоже сопротивлялся, а как попробовал… блин ну удобнее, факт.

[mSnus]

Да, разница только в одном -- нужно ли подключать и использовать ещё один препроцессор.

К тому же в SASS я могу сделать всё то же, что в CSS, только больше. А pug хорош для каркасов за счёт того, что он проще html, но тем же и ограничен.

[Alexufo]

Да хоть еще три) Не страшно. На сколько мне известно pug полностью покрывает html возможности и более того, позволяет больше, например, рендерить из заранее набитой бд, шаблоны, миксины, инклуды (footer header) почти как пых.
Удобно размножать карточку товара какую нибудь из бд. А верстка компонента то одна.

[mSnus]

Уговорили)) попробую, спасибо за идею!

[Alexufo]

ага, посмотрите у этих товарищей как сделано
habr.com/ru/company/e-Legion/blog/440134

прямо невероятно минималистично

[mSnus]

Ну, не знаю даже. Там такая тонна бойлерплейта к этому нужна… от 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-плагин..

[Alexufo]

У них сайт для компании на статике, не нужно заниматься переносом верстки на движек. Верстка сама движек.

ul.about-achievements.list-unstyled.row.d-none.d-sm-fle
  li.col-md-6.col-lg-3
или
ul(class="about-achievements list-unstyled row d-none ")

[nightzen]

Разница не только в этом, 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. Можно создавать свои аббревиатуры и фрагменты для любого языка.

[Alexufo]

Следить за отступами мне легче, чем за закрывающимися тегами, потому что банальный Prettier все отступы делает сам, вам лишь надо следить, чтобы каскад визуально не вылазил слишком влево где это не нужно.
А потерять тег при правке html куда легче.

На реакте, все таки компоненты, а компоненты это не больше 10-100 строчек верстки. Преимущества Pug на таких вещах действительно чувствуются меньше, нет особых проблем чекать закрытие тегов, весь компонент то на экране, да и все удалять и переписывать заново не трудно.

Есть одна архитектурная проблема подобных подходов как у emmet — это бойлерплейт, это чувство избыточности информации, не объясненной технически, кроме как — так проще нашей технологии поэтому пишите избыточно.

Да, emmet скорее язык макросов, извергающий бойлерплейт, pug все таки уже полноценный шаблонизатор c поддержкой es6.

[nightzen]

Насколько я знаю, в Pug, если теги имеют одинаковые отступы, то они находяться на одном уровне. Если у второго тега отступ больше, то он вложен в предыдущий. Prettier же не будет угадывать, что Вы имели в виду. Тут он как раз больше поможет с чистым HTML.

Потерять тег при правке HTML конечно можно, но есть различные хоткеи на этот случай.

В чём заключается бойлерплейт, если честно, не понял)

[Alexufo]

Prettier да, будет только выравнивать количество пробелов между вложенностями чтобы не было ее нарушения, но при этом чтобы шаг вложенности был одинаковый. Более того, есть опции в vscode которые очень мило подсвечивают вложенности визуальными конструкциями.

Бойлерплейт — это избыточность, когда языковая конструкция требует меньше символов, зачем та, которая требует больше. Это касается в целом html. Мы точно так же используем в нем отступы, но технически он опирается на закрывающие теги. Нам нужно первое, машине — второе. Так машине же пофиг, пусть использует первое)

[nightzen]

Ну тут опять же, на вкус и цвет, по аналогии с SASS/SCSS. Можно использовать сочетание Emmet + Pug.

[alex_mayak]

Чет не заметил ссылки на https://docs.emmet.io/cheat-sheet/

[SokolovAG]

Emmet также хорош для быстрого написания стилей, использую его не только для написания HTML.
А в стилях чаще всего достаточно написать аббревиатуры и нужные значения, например:

jcsb -> justify-content: space-between;
m0-a -> margin: 0 auto;
bgc#fff -> background-color: #ffffff;

и т.д.

[Alexufo]

проще тогда tailwind если у вас такой подход к написанию стилей