Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ncuillery/prettier-plugin-mdx-no-text-child
Prettier plugin to enforce that MDX tags are always separated from their child by a blank line
https://github.com/ncuillery/prettier-plugin-mdx-no-text-child
mdx mdx-js prettier prettier-plugin
Last synced: 22 days ago
JSON representation
Prettier plugin to enforce that MDX tags are always separated from their child by a blank line
- Host: GitHub
- URL: https://github.com/ncuillery/prettier-plugin-mdx-no-text-child
- Owner: ncuillery
- License: mit
- Created: 2020-04-10T19:18:44.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T03:12:42.000Z (about 2 years ago)
- Last Synced: 2024-10-31T10:12:17.793Z (2 months ago)
- Topics: mdx, mdx-js, prettier, prettier-plugin
- Language: TypeScript
- Homepage:
- Size: 683 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
 [](https://coveralls.io/github/ncuillery/prettier-plugin-mdx-no-text-child?branch=master) [](https://www.npmjs.com/package/prettier-plugin-mdx-no-text-child)
# Usage
Add this plugin as a dev dependency:
```bash
npm i -D prettier-plugin-mdx-no-text-child
# or
yarn add -D prettier-plugin-mdx-no-text-child
```
And that's it, Prettier will automatically load the plugin based on the package name (`prettier-plugin-*`).
# General Purpose
MDX is a markdown extension that allows insertion of JSX inside the Markdown markup. This is especially useful for referencing custom component.
Example:
```mdx
# This is the header
This is an info block.
```
In MDX, the line break after the opening tag is meaningful and define what the child node is:
MDX markupJSX result
```mdx
This is a **paragraph**.
```
```jsx
This is a paragraph.
```
MDX markupJSX result
```mdx
This is **not** a paragraph.
```
```jsx
This is **not** a paragraph.
```
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 markupJSX result
```mdx
This is not a **paragraph**.
But **this one** is.
````
```jsx
This is not a **paragraph**.
But this one is.
````
See this issue for more context: https://github.com/mdx-js/mdx/issues/628
## Prettier
Prettier supports MDX since the version 1.15.0. By default, Prettier formats the previous example as is:
```diff
This is not a **paragraph**.
But **this one** is.
+
```
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:
```diff
+
This is not a **paragraph**.
But **this one** is.
+
```
# Roadmap
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.