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

Question

我正在将网站迁移到 Gatsby 。对于文章帖子，原始来源被编写为 HTML 文件。我想利用 MDX 来处理这些内容。然而，将大量文章从 HTML 复制粘贴到 MDX 会带来很多麻烦。特别是，MDX 解析器通常会提示 Expected相应的 JSX 结束标记为... 我想知道 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 ( playground )。但是，如果您使用 HTML 解析器，Prettier 将添加结束 / ( playground )。

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

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

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

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