MDX / JSX

How the formatter handles MDX-specific syntax and JSX components

The formatter preserves MDX-specific syntax including JSX components, import/export statements, and expressions. Several configurable options control JSX formatting — see the Options section.

Rules

• JSX components are preserved
• Import/export statements are maintained
• Self-closing tags remain self-closing
• A blank line is added after a JSX component when followed by text content
• Consecutive JSX components are not automatically separated unless configured as blockComponents
• Multi-line JSX formatting is handled by the formatMultiLineJsx option

Examples

Self-closing JSX component

Before:

<Youtube url="https://example.com" />

After (unchanged):

<Youtube url="https://example.com" />

Import statements

Before:

import { Component } from "./component";

# Content

After (unchanged — imports preserved):

import { Component } from "./component";

# Content

Export statements

Before:

export const meta = { title: "Test" };

# Content

After (unchanged — exports preserved):

export const meta = { title: "Test" };

# Content

JSX after text

Before:

そんなわけで、以下がVol.1の内容となります。
<ExImg src="/images/p/hero" extraWide alt="メルマガ写真" />

After:

そんなわけで、以下がVol.1の内容となります。

<ExImg src="/images/p/hero" extraWide alt="メルマガ写真" />

Multi-line JSX formatting

Controlled by the formatMultiLineJsx option:

Before:

<ExImg src="/images/p/oxi-one-display" className="mx-auto md:ml-0" restrictedWidth="500"
  alt="Display: Sequencer Mode"
/>

After:

<ExImg
  src="/images/p/oxi-one-display"
  className="mx-auto md:ml-0"
  restrictedWidth="500"
  alt="Display: Sequencer Mode" />