在MDX文件中启用JSX的自动（自）关闭标签。

Question

我正在把一个网站搬到Gatsby上。对于文章文章，原始来源是写成HTML文件。我想利用MDX来处理这些内容。然而，将大量的文章从HTML复制粘贴到MDX上会产生很多痛苦。尤其是，MDX解析器通常会抱怨说 Expected corresponding JSX closing tag for ...我想知道，如果prettier或任何formatter可以帮助为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

一旦元素全部（自）关闭，你就可以切换回使用Prettier的推理分析器（MDX的.mdx文件）。

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