Странное форматирование HTML с более красивым

У меня есть это HTML, когда я использую встроенный модуль форматирования. Нехорошо. Я хочу, чтобы каждый тег был каскадным. Здесь у нас есть span, svg и a в одной строке.

введите здесь описание изображения

После форматирования с помощью Prettier (эта версия)

Я понял. Это почти хуже. (см. раздел редактирования ниже, в котором объясняется, почему это на самом деле разумный выбор, а не более красивый.)

введите здесь описание изображения

Более красивая конфигурация

введите здесь описание изображения

Что я могу использовать для правильного автоматического форматирования этого HTML?

Изменить: я получил то, что хотел, с расширением Beautify и редактируя его встроенную конфигурацию. введите здесь описание изображения

вот почему красивее форматирование как это. Это обходной путь, чтобы не нарушать отображение контента. На самом деле, это довольно умно, как только вы к этому привыкнете.

Вы можете переопределить его с помощью опции

"prettier.htmlWhitespaceSensitivity": "ignore",

См. ссылку выше, чтобы узнать больше об этом.


visual-studio-code vscode-settings prettier-vscode
person Fred Eric    schedule 01.01.2021    source источник
comment
Пожалуйста, добавьте код вместо скриншотов, если это возможно.   -  person srishtigarg    schedule 01.01.2021
comment
@srishtigarg Код — это первая ссылка в начале моего вопроса.   -  person Fred Eric    schedule 01.01.2021

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете установить более красивый формат в качестве формата по умолчанию для вашего редактора для всех языков программирования, поместив более красивые свойства в файл setting.json.

"editor.defaultFormatter": "esbenp.prettier-vscode",

Более красивый формат для HTML, на мой взгляд, выглядит не так круто, поэтому я установил формат VS Code по умолчанию.

"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},

Если вам нужно расширение формата Beautify для вашего HTML, вы можете установить расширение beautify и добавить эту строку в файл setting.json

"[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
}

Точно так же вы можете установить другое расширение формата для другого языка. На мой взгляд, это стандартный способ установки расширения формата на один или несколько языков.

Вы можете сделать это так

"beautify.language": {
    "html": ["html", "php", "erb"],
},

Отредактировано

Все кредиты @Fred.

Вы можете добиться такого же поведения расширения beautify в prettier с помощью следующего свойства.

"prettier.htmlWhitespaceSensitivity": "ignore"
person Subrato Patnaik    schedule 01.01.2021
comment
Я знаю. Я обновил свой вопрос, чтобы добавить, почему более красивое форматирование html таким образом. - person Fred Eric; 01.01.2021
comment
Возможно, вам поможет этот блог. На мой взгляд, beautify хорош для HTML, а prettier хорош для JSX. Если бы кто-то знал причину, то эта проблема была бы решена раньше и обновлена ​​​​в более красивом расширении. Возможно, в будущем она будет решена. - person Subrato Patnaik; 01.01.2021
comment
На самом деле, с красивыми проблем нет. Это вариант. Этот красивее.htmlWhitespaceSensitivity: игнорировать. Теперь он будет форматироваться, как это делает Beautify. - person Fred Eric; 01.01.2021
comment
о, спасибо, приятель, еще один вопрос, почему вы устанавливаете более красивые свойства, чем форматирование кода? Означает ли это, что вы настраиваете более красивые свойства? - person Subrato Patnaik; 01.01.2021
comment
Это намного лучше, чем украшать. - person Subrato Patnaik; 01.01.2021