Add this plugin as a dev dependency:
npm i -D prettier-plugin-mdx-no-text-child
# or
yarn add -D prettier-plugin-mdx-no-text-childAnd that's it, Prettier will automatically load the plugin based on the package name (prettier-plugin-*).
MDX is a markdown extension that allows insertion of JSX inside the Markdown markup. This is especially useful for referencing custom component.
Example:
# This is the header
<Info>
This is an info block.
</Info>In MDX, the line break after the opening tag is meaningful and define what the child node is:
| MDX markup | JSX result |
|---|---|
<Info>
This is a **paragraph**.
</Info> |
<Info>
<p>
This is a <strong>paragraph</strong>.
</p>
</Info> |
| MDX markup | JSX result |
<Info>
This is **not** a paragraph.
</Info> |
<Info>
This is **not** a paragraph.
</Info> |
As custom components are often used in MDX to wrap other elements (i.e. an image with a caption), this behavior leads to mistakes and unexpected results.
Example:
| MDX markup | JSX result |
|---|---|
<Info>
This is not a **paragraph**.
But **this one** is.
</Info>
|
<Info>
This is not a **paragraph**.
<p>
But <strong>this one</strong> is.
</p>
</Info> |
See this issue for more context: mdx-js/mdx#628
Prettier supports MDX since the version 1.15.0. By default, Prettier formats the previous example as is:
<Info>
This is not a **paragraph**.
But **this one** is.
+
</Info>Prettier inserts a line break before the closing tag, but it doesn't insert a line break after the opening tag because it would change the meaning of the code (and Prettier is only about formatting).
Well, this plugin does:
<Info>
+
This is not a **paragraph**.
But **this one** is.
+
</Info>This is a 0.x version because this plugin is currently just smart enough to suit my own needs.
To enter 1.0, it needs to be more flexible and have options to exclude specific tags, or insert line breaks only if there are multiple children.
It also need more test cases, there are a LOT of untested situations where the formatting can go wrong.