在 MDX 文件中为 JSX 启用自动(自)关闭标记

Question

我正在把一个网站搬到盖茨比。对于文章帖子，原始源代码被写入为 HTML 文件。我想利用对这些数据使用 MDX。但是，将大量文章从HTML复制粘贴到MDX会产生很多痛苦。特别是，MDX解析器通常会抱怨Expected corresponding JSX closing tag for ...我想知道更漂亮或任何格式化程序是否可以帮助为 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

更漂亮的 MDX 解析器无法解析非自闭合的标记，例如示例中的img(游乐场(。但是，如果您使用 HTML 解析器，Prettier 将添加结束/(操场(。

使用--parser选项使用 HTML 解析器进行格式化(请注意，您需要在添加 MDX 前言之前执行此操作，否则 HTML 解析器也无法解析文件(：

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

元素全部(自(关闭后，您可以切换回使用 Prettier 的推断解析器(MDX for .mdx 文件(：

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