Включить автоматическое (самозакрывающееся) теги для JSX в файле MDX

Question

Я перемещаю сайт в Гэтсби. Для сообщений статьи исходный код был написан в виде файлов HTML. Я хочу воспользоваться преимуществами использования многомерных выражений для этого содержимого. Однако копирование и вставка тонны статей из HTML в MDX вызывает много проблем. В частности, анализатор MDX обычно жалуется наExpected corresponding JSX closing tag for ...Интересно, может ли prettier или любое средство форматирования помочь с автоматическим добавлением самозакрывающихся тегов для файлов MDX.

Пример:

<img
  class="wp-image-1221 size-full"
  src="/assets/images/articles-news/Yasmin_pic_4.png"
  alt=""
  width="504"
  height="377"
>

Ожидаемый форматированный вывод

<img
  class="wp-image-1221 size-full"
  src="/assets/images/articles-news/Yasmin_pic_4.png"
  alt=""
  width="504"
  height="377"
/>

// or

<img
  class="wp-image-1221 size-full"
  src="/assets/images/articles-news/Yasmin_pic_4.png"
  alt=""
  width="504"
  height="377"
></img>

Answer 1

Анализатор Prettier MDX не выполняет анализ тегов, которые не являются самозакрывающимися, например imgв вашем примере (детская площадка). Однако, если вы используете парсер HTML, Prettier добавит закрывающий/(детская площадка).

Использовать --parserвозможность форматирования с помощью парсера HTML (обратите внимание, что вам нужно сделать это перед добавлением фронтматера MDX, иначе парсер HTML также не сможет анализировать файлы):

prettier --parser html --write ./my-html-files-from-wordpress

Когда все элементы (само) закрываются, вы можете вернуться к использованию синтаксического анализатора Преттье (многомерные выражения для файлов.mdx):

prettier --write ./my-formatted-mdx-files