Как сохранить закрывающий тег </a> в одной строке, а все остальные в новой строке в проекте Vue.js?

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 ошибка

Простым решением было бы добавить <!-- eslint-disable-line --> в каждый тег привязки. Но мы ищем простое решение, чтобы покрыть все якорные теги в проекте.

Вам нужно использовать плагин, чтобы сделать ваш код красивым? Обычно вы просто используете загрузчик vue и компилятор шаблонов, так как вас не беспокоит, как выглядит ваш код после его компиляции.

Pete 16.01.2023 14:36
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
79
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Просто сделайте это:

  <a href = "#"
     place = "linkText"
     target = "_blank">
    lorum ipsum</a>

но выдает ошибку красивее / eslint.

karunakaran 17.01.2023 14:05
  • Используйте Ctrl + , в Windows (или CMD + , в Mac), чтобы открыть настройки редактора.
  • Найдите закрывающую скобку HTML, и вы увидите экран, похожий на прикрепленное изображение.

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

Вы также можете отредактировать его в своем файле settings.json, как показано ниже:

"prettier.bracketSameLine": true

Если вы хотите иметь доступ к еще большему количеству параметров настройки brackets. Вы можете найти скобку в настройках пользователя кода VS и поиграть с параметрами.

это будет специфично для IDE/редактора и не будет работать при сборке кода в другой среде.

karunakaran 17.01.2023 14:21
Ответ принят как подходящий

Проблема связана с форматированием с учетом пробелов. Этот атрибут 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

Другие вопросы по теме