addEmptyLinesInBlockJsx

Add empty lines in block JSX components for better readability

Add empty lines after opening tags and before closing tags in block JSX components for better readability.

You must specify which components are “block” components via blockComponents.

Options

Config

{
  "addEmptyLinesInBlockJsx": {
    "enabled": true,
    "blockComponents": ["Outro", "InfoBox", "Sidebar"]
  }
}

Examples

Basic block component

With blockComponents: ["Outro"]:

Before:

<Outro>
This is the outro content.
Multiple lines here.
</Outro>

After:

<Outro>

This is the outro content.
Multiple lines here.

</Outro>

InfoBox with list content

With blockComponents: ["InfoBox"]:

Before:

<InfoBox>
Important information

- Point 1
- Point 2
</InfoBox>

After:

<InfoBox>

Important information

- Point 1
- Point 2

</InfoBox>

Admonition-like components (recommended use case)

This option is particularly useful for admonition-style components (<Note>, <Warning>, <Danger>, etc.) commonly used in documentation frameworks like Docusaurus and Astro.

In MDX, content inside JSX tags requires blank lines to be parsed as markdown. Without them, the content may be treated as raw text — headings, lists, bold, and other markdown syntax won’t render.

With blockComponents: ["Note", "Warning", "Danger"]:

Before (markdown not parsed):

<Note>
**Important:** This text won't be bold.

- This won't render as a list
</Note>

After (markdown parsed correctly):

<Note>

**Important:** This text will be bold.

- This renders as a list

</Note>

The blank line after <Note> is what tells the MDX parser to treat the content as markdown.

Single-line component expansion

When a component listed in blockComponents is written on a single line, the formatter expands it to multi-line with empty lines added.

With blockComponents: ["Note"]:

Before:

<Note>Content here</Note>

After:

<Note>

Content here

</Note>

Non-listed components are not affected

Components not in blockComponents are left alone:

<Card>
Content without extra empty lines.
</Card>

This stays unchanged.

Caution with indentJsxContent

If you also use indentJsxContent on the same components, be careful. Indenting markdown content inside admonitions can break rendering — in standard markdown, 4 or more spaces of indentation creates a code block. See the indentJsxContent caution section for details.