Как в Pug отменить inline-tags при компиляции?

Question

[myskypesla]

Привет.

Как в Pug (task manager - Gulp) отменить inline-tags при компиляции?

Есть код

.links
  a(href='#').link: img(src='img/some-img.png' alt='')
  a(href='#').link: img(src='img/some-img.png' alt='')
  a(href='#').link: img(src='img/some-img.png' alt='')
  a(href='#').link: img(src='img/some-img.png' alt='')

Gulp'ом компилируется в такой HTML:

<div class="links"><a href="#" class="link"><img src="img/some-img.png" alt=""/></a><a href="#" class="link"><img src="img/some-img.png" alt=""/></a><a href="#" class="link"><img src="img/some-img.png" alt=""/></a><a href="#" class="link"><img src="img/some-img.png" alt=""/></a></div>

А нужно чтобы было так:

<div class="links">
  <a href="#" class="link">
    <img src="img/some-img.png" alt=""/>
  </a>
  <a href="#" class="link">
    <img src="img/some-img.png" alt=""/>
  </a>
  <a href="#" class="link">
    <img src="img/some-img.png" alt=""/>
  </a>
  <a href="#" class="link">
    <img src="img/some-img.png" alt=""/>
  </a>
</div>

Я добился такого отображения только удалением в каждом проекте из папки node_modules/pug_parser в файле inline-tags.js тегов a, img, span и т.д., но в каждом проекте так делать неправильно, потому что иногда приходится переустанавливать node_modules или передавать другим разработчикам проект, и я или они могу забыть удалить из этого файла теги.

Подскажите настройки gulp-pug.

Answer 1

[Алексей Ярков]

{pretty: true}

Comments

[myskypesla]

Так компилирует с pretty: true, вопрос пользуетесь ли вы pug, что пишите такие ответы?

[Алексей Ярков]

myskypesla: пользуюсь. И на выходе хтмл вот этим еще обрабатываю: https://www.npmjs.com/package/gulp-html-prettify

Answer 2

[Юрий Уваров]

Нашел чудо-плагин, который решает проблему автора, решил поделиться.
gulp-format-html
Очень нужная вещь, сам долго мучился с этими inline тегами.
Мне другие способы отформатировать текст не помогали, в том числе gulp-html-prettify.

Comments

[DeveloperV]

Спасибо, работает. Только у вас ссылка ведет на другую страницу.

[Orkhan Abbasov]

Вот оригинальная ссылка gulp-format-html
Спасибо отличный плагин!

Answer 3

[Алексей Уколов]

{ pretty: true }

pretty: boolean | string
[Deprecated.] Adds whitespace to the resulting HTML to make it easier for a human to read using ' ' as indentation. If a string is specified, that will be used as indentation instead (e.g. '\t').

We strongly recommend against using this option: Too often it creates subtle bugs in your templates because of the way it changes the interpretation and rendering of whitespace, and so this feature is going to be removed. Defaults to false.

https://pugjs.org/api/reference.html

Comments

[myskypesla]

Так компилирует с pretty: true, вопрос пользуетесь ли вы pug, что пишите такие ответы?

Answer 4

[maxhd]

может кому пригодится)

npm i prettier --save-dev

// package.json
"scripts": {
  "pretty": "prettier --write ./dist/*.html"
},

// .prettierrc.json
{
  "htmlWhitespaceSensitivity": "ignore",
  "printWidth": 128
}

npm run pretty

можно как нить автоматизировать для production сборки