addEmptyLinesInBlockJsx
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
| Property | Type | Default | Description |
|---|---|---|---|
enabled | boolean | true | Enable/disable this rule |
blockComponents | string[] | [] | Component names that should have empty lines added |
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>
Non-listed components are not affected
Components not in blockComponents are left alone:
<Card>
Content without extra empty lines.
</Card>
This stays unchanged.