no-leaked-semicolon
Catches ';' at the start of JSX text nodes — typically from accidentally placing a statement-ending ';' inside JSX. The ';' "leaks" into the rendered output.
Full Name in eslint-plugin-react-jsx
react-jsx/no-leaked-semicolonFull Name in @eslint-react/eslint-plugin
@eslint-react/jsx-no-leaked-semicolonFeatures
🔧
Presets
jsx
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
When refactoring JSX, trailing semicolons may be accidentally left immediately after JSX elements or fragments. This causes ; to be unexpectedly rendered as text nodes:
// before
return <div />;
// after
return (
<div>
<div />;
</div>
);Examples
Accidentally leaving semicolons inside JSX
// Problem: Semicolon leaks into rendered text
function MyComponent() {
return (
<div>
<div />;
</div>
);
}// Problem: Semicolon leaks into rendered text
function MyComponent() {
return (
<div>
<Component>
<div />
</Component>;
</div>
);
}Proper JSX without leaked semicolons
// Recommended: No semicolon after JSX elements
function MyComponent() {
return (
<div>
<div />
</div>
);
}Intentionally rendering semicolons as text
// OK: Semicolon is intentionally placed as separate text
function MyComponent() {
return (
<div>
<div />
;
</div>
);
}Versions
Resources
See Also
react-jsx/no-leaked-dollar
Catches$before{expr}in JSX — typically from template literal${expr}being copy-pasted into JSX without removing the$. The$"leaks" into the rendered output.