Красивее: Хранение пустых строк, разделяющих атрибуты в HTML / JSX HTML

Question

Итак, я пытался найти способ сказать Преттье, чтобы он сохранял разрывы строк между атрибутами в HTML, для обеспечения чистоты кода, но я выхожу пустым. Я работаю в TypeScript React со стилизованными компонентами, не знаю, имеет ли это значение для ответа. Мне было интересно, если это работа для Beautify, но так как я использую красивее для автоматического форматирования файлов при фиксации, я беспокоюсь, что оба могут стать очень грязными.

Вот что я говорить о:

<CustomInput
  value={whatever}

  width="100px"
  height="32px"
  background="#333"
  borderColor="sandybrown"

  onFocus={handleFocus}
  onBlur={handleBlur}
  onChange={evt => setWhatever(evt.target.value)}
/>

Обратите внимание на пустые строки, разделяющие различные «категории» атрибутов. Преттиер автоматически удаляет их. Можно ли этого достичь?

Answer 1

Он действительно должен работать так, как вы ожидаете (так же, как он работает в объектных литералах). Это просто еще не реализовано. есть открытый запрос на получение доступа , но он, похоже, отклонен.

Answer 2

Prettifiers должны удалить пустые строки на мой взгляд

Возможно, вы можете использовать HTML комментарии

<CustomInput
  value="{whatever}"
  <!-- formatting -->
  width="100px"
  height="32px"
  background="#333"
  borderColor="sandybrown"
  <!-- event handlers-->
  onFocus={handleFocus}
  onBlur={handleBlur}
  onChange={evt => setWhatever(evt.target.value)}
/>

Или просто сделайте то, что рекомендуется:

const handleFocus = () => {}
const handleBlur = () => {}

window.addEventListener("load", function() {
  const inp = document.querySelector("CustomInput");
  inp.addEventListener("focus", handleFocus);
  inp.addEventListener("blur", handleBlur);
  inp.addEventListener("change", evt => setWhatever(evt.target.value));
});

CustomInput {
  display: block;
  width: 100px;
  height: 32px;
  background: #333;
  border-color: sandybrown;
  color: white;
}

<CustomInput value="{whatever}">Text</CustomInput>