vue/html-closing-bracket-newline
добавляет неожиданный пробел после текста ссылки. удаление пробела создает конфликт и ошибку в prettier и eslint. ищете решение, чтобы преодолеть это с помощью простого изменения конфигурации вместо построчного игнорирования комментариев.
vue/html-closing-bracket-newline
перемещает все закрывающие теги на новую строку, что добавляет неожиданный пробел после текста ссылки
<a
href = "#"
place = "linkText"
target = "_blank">
lorum ipsum
</a>
ожидаемый формат синтаксиса кода
<a
href = "#"
place = "linkText"
target = "_blank">lorum ipsum</a>
Но это создает конфликт между prettier/eslint/vue.
Простым решением было бы добавить <!-- eslint-disable-line -->
в каждый тег привязки. Но мы ищем простое решение, чтобы покрыть все якорные теги в проекте.
Просто сделайте это:
<a href = "#"
place = "linkText"
target = "_blank">
lorum ipsum</a>
но выдает ошибку красивее / eslint.
Ctrl
+ ,
в Windows (или CMD
+ ,
в Mac), чтобы открыть настройки редактора.Если он не отмечен, вы можете пойти дальше и проверить его. Что делает этот параметр, так это добавляет закрывающую скобку в ту же строку, что и последняя буква, а не опускает ее на следующую строку, где она находится одна, как вы сейчас испытываете.
Вы также можете отредактировать его в своем файле settings.json
, как показано ниже:
"prettier.bracketSameLine": true
Если вы хотите иметь доступ к еще большему количеству параметров настройки brackets
. Вы можете найти скобку в настройках пользователя кода VS и поиграть с параметрами.
это будет специфично для IDE/редактора и не будет работать при сборке кода в другой среде.
Проблема связана с форматированием с учетом пробелов.
Этот атрибут htmlWhitespaceSensitivity
принимает следующие параметры:
"css"
— Уважайте значение свойства отображения CSS по умолчанию. Для Handlebars рассматривается так же, как и strict. "По умолчанию""strict"
- Пробелы (или их отсутствие) вокруг всех тегов считаются значительными."ignore"
- Пробелы (или их отсутствие) вокруг всех тегов считаются незначительными.Вы можете исправить это, добавив следующее правило в свой файл .eslintrc.js
(раздел правил):
"prettier/prettier": [
"warn",
{
htmlWhitespaceSensitivity: "strict"
}
]
Он будет считать пробел «значимым» во всех случаях. Это значит:
<!-- input -->
<span class = "dolorum atque aspernatur">Est molestiae sunt facilis qui rem.</span>
<div class = "voluptatem architecto at">Architecto rerum architecto incidunt sint.</div>
<div class = "voluptatem architecto at">
Architecto rerum architecto incidunt sint.</div>
<div class = "voluptatem architecto at">
Architecto rerum architecto incidunt sint.
</div>
<!-- output -->
<span class = "dolorum atque aspernatur"
>Est molestiae sunt facilis qui rem.</span
>
<div class = "voluptatem architecto at"
>Architecto rerum architecto incidunt sint.</div
>
<div class = "voluptatem architecto at">
Architecto rerum architecto incidunt sint.</div
>
<div class = "voluptatem architecto at">
Architecto rerum architecto incidunt sint.
</div> <!-- in this case you would have the whitespace -->
Это выглядит некрасиво, так как ставит </div
в конце строки и >
на следующей строке. Но это решает проблему.
Подробнее об этом можно прочитать здесь:
https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting
А вот старая проблема Github о красивее, в которой говорится то же самое, что вы упомянули здесь:
https://github.com/prettier/prettier/issues/6290
Вам нужно использовать плагин, чтобы сделать ваш код красивым? Обычно вы просто используете загрузчик vue и компилятор шаблонов, так как вас не беспокоит, как выглядит ваш код после его компиляции.