Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
prettier-plugin-mdx-no-text-child
Advanced tools
Add this plugin as a dev dependency:
NPM | Yarn |
---|---|
|
|
And 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 |
---|---|
|
|
MDX markup | JSX result |
|
|
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 |
---|---|
|
|
See this issue for more context: https://github.com/mdx-js/mdx/issues/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 more need more test cases, there are a LOT of untested situations where the formatting can go wrong.
FAQs
Add this plugin as a dev dependency:
The npm package prettier-plugin-mdx-no-text-child receives a total of 0 weekly downloads. As such, prettier-plugin-mdx-no-text-child popularity was classified as not popular.
We found that prettier-plugin-mdx-no-text-child demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.